showhide.md

Expected inline display

Non-animated

Initially block

Initial state	.show()	.hide() or .toggle()	.hide().show() or .toggle().toggle()	.show().hide()
default block, no inline	has layout, no action	none, don't save	remove because not saved	none, don't save
cascade block, no inline	has layout, no action	none, don't save	remove because not saved	none, don't save
default list-item, inline block	has layout, no action	none, save "block"	block, restored from saved	none, save "block"
cascade list-item, inline block	has layout, no action	none, save "block"	block, restored from saved	none, save "block"
cascade none, inline block	has layout, no action	none, save "block"	block, restored from saved	none, save "block"

Initially inline

Initial state	.show()	.hide() or .toggle()	.hide().show() or .toggle().toggle()	.show().hide()
default inline, no inline	has layout, no action	none, don't save	remove because not saved	none, don't save
cascade inline, no inline	has layout, no action	none, don't save	remove because not saved	none, don't save
default block, inline inline	has layout, no action	none, save "inline"	inline, restored from saved	none, save "inline"
cascade block, inline inline	has layout, no action	none, save "inline"	inline, restored from saved	none, save "inline"
cascade none, inline inline	has layout, no action	none, save "inline"	inline, restored from saved	none, save "inline"

Initially list-item (or other non-block non-inline)

Initial state	.show()	.hide() or .toggle()	.hide().show() or .toggle().toggle()	.show().hide()
default list-item, no inline	has layout, no action	none, don't save	remove because not saved	none, don't save
cascade list-item, no inline	has layout, no action	none, don't save	remove because not saved	none, don't save
default inline, inline list-item	has layout, no action	none, save "list-item"	list-item, restored from saved	none, save "list-item"
cascade inline, inline list-item	has layout, no action	none, save "list-item"	list-item, restored from saved	none, save "list-item"
cascade none, inline list-item	has layout, no action	none, save "list-item"	list-item, restored from saved	none, save "list-item"

Initially none

Initial state	.show() or .toggle()	.hide()	.hide().show()	.show().hide() or .toggle().toggle()
default none, no inline	block	no action	block	none
cascade none, no inline	default based on element name	no action	default based on element name	none, save whatever's inline from .show() (default based on element name)
default block, inline none	remove because not saved	no action	remove because not saved	none, don't save
default inline, inline none	remove because not saved	no action	remove because not saved	none, don't save
default list-item, inline none	remove because not saved	no action	remove because not saved	none, don't save
cascade block, inline none	remove because not saved	no action	remove because not saved	none, don't save
cascade inline, inline none	remove because not saved	no action	remove because not saved	none, don't save
cascade list-item, inline none	remove because not saved	no action	remove because not saved	none, don't save
cascade none, inline none	default based on element name	no action	default based on element name	none, save whatever's inline from .show() (default based on element name)

I think in practice there's no difference, so not having to track that we stored the value just makes the implementation simpler.

The difference has to do with respecting responsiveness, and I now notice I'm suggesting another revision. Consider the cascade none, no inline case. When calling show, we have to add a display value that we determine somehow (default based on element name is fine – using legacy defaultDisplay or maintaining the list ourselves, whichever is smaller). In a subsequent .hide(), I don't want to save the display value. If the cascade changes somehow, another call to .show() should not set a saved display.

Then again, that's a bit of an edge case. I think, with the values you have in the table, it still improves the way show works with media queries.