Skip to content

Instantly share code, notes, and snippets.

@scottgonzalez
Created October 28, 2015 18:24
Show Gist options
  • Save scottgonzalez/5aadcd7e37cccced1239 to your computer and use it in GitHub Desktop.
Save scottgonzalez/5aadcd7e37cccced1239 to your computer and use it in GitHub Desktop.

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)
@timmywil
Copy link

Also, there's a lot of overlap in these tables. I don't think it's as complicated as the tables make it seem, but still glad we're filling this in.

@scottgonzalez
Copy link
Author

Only thing I would change is for cascade none, inline none + .show().hide() or .toggle().toggle(). I think it'd be easiest to not save any values that weren't set by the user inline.

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

Also, there's a lot of overlap in these tables. I don't think it's as complicated as the tables make it seem, but still glad we're filling this in.

Yes, a ton of overlap. Many of these rows are just copy/paste.

@timmywil
Copy link

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.

@timmywil
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment