[css-display] box-suppress use cases

Hi,

I would like to contribute some use cases for the box-suppress module but
I'm not totally sure I understand the proposal as it is.

So, here are some cases where I have messed with whether or not an element
can be seen and why:

- To hide text from users consuming my sites with visual formatting but to
provide information for users consuming my content without it.
- To hide elements I plan on displaying in response to user interaction,
examples:
 -- modals
 -- progressive disclosure
 -- tabs
 -- drop down menus
 -- autocomplete suggestions
- Removing content when formatting for other media
 -- print style sheets
 -- small breakpoints in a responsive design
 -- browsers without javascript enabled
- To place an interactive element over top of a non-interactive one (ie, so
that a hidden button completely covers a heading and clicking on the
heading triggers the events bound to the button)
- To make an element not visible but focusable (ie, skip links)
- To hide an element until the associated javascript has loaded to make it
functional.

Some of my frustrations with display:none for some of these purposes are:
- it's not read out by screen readers
- it is not possible to get height and width information in JS prior to
displaying it
 -- to animate it with JS
 -- to adjust other elements on the page to make space for it
 -- to adjust the scroll position of the page to make sure it is visible
- it is not possible to animate it with CSS

Please let me know if you would like code samples or more information for
any of these use cases.

Thank you,
Stephanie.