[css-display-3] Per WG resolution, migrate the 'visibility' property from CSS2.

Author: tabatkins

css-display-3/Overview.bs

@@ -73,7 +73,7 @@ Introduction</h2>
 	CSS takes a source document organized as
 	a <dfn id="element-tree" oldids="css-element-tree" export for=CSS lt="element tree">tree</dfn>
 	of <dfn id="elements" oldids="css-element" export for=CSS lt="element">elements</dfn>
-	(which can contain a mix of other [=elements=] and [=text nodes=])
+	(which can contain a mix of other [=CSS/elements=] and [=text nodes=])
 	and <dfn id="text-nodes" oldids="css-text-node" export for=CSS lt="text node">text nodes</dfn>
 	(which can contain text),
 	and renders it onto a <a href="https://www.w3.org/TR/CSS2/intro.html#canvas">canvas</a>
@@ -1124,6 +1124,83 @@ Reordering and Accessibility</h3>
 	all the layout features of CSS that modify spatial relationships.
 
 
+<!--
+██     ██ ████  ██████  ████ ████████
+██     ██  ██  ██    ██  ██  ██     ██
+██     ██  ██  ██        ██  ██     ██
+██     ██  ██   ██████   ██  ████████
+ ██   ██   ██        ██  ██  ██     ██
+  ██ ██    ██  ██    ██  ██  ██     ██
+   ███    ████  ██████  ████ ████████
+-->
+
+<h3 id="visibility">Invisibility: the 'visibility' property</h3>
+
+	<pre class="propdef">
+	Name: visibility
+	Value: visible | hidden | collapse
+	Initial: visible
+	Applies to: all elements
+	Inherited: yes
+	Percentages: N/A
+	Media: visual
+	Computed Value: as specified
+	Animation type: discrete
+	</pre>
+
+	The 'visibility' property specifies whether the box is rendered.
+	[=Invisible=] boxes still affect layout.
+	(Set the 'display' property to ''display/none'' to suppress box generation altogether.).
+	Values have the following meanings:
+
+	<dl dfn-for=visibility dfn-type=value>
+		<dt><dfn>visible</dfn>
+		<dd>
+			The generated box is visible, as normal.
+		<dt><dfn>hidden</dfn>
+		<dd>
+			Any boxes generated by the element are [=invisible=].
+			Descendants of the element can, however, be visible
+			if they have ''visibility: visible''.
+		<dt><dfn>collapse</dfn>
+		<dd>
+			Indicates that the box is <dfn dfn for noexport>collapsed</dfn>,
+			which can cause it to take up less space than otherwise
+			in a formatting-context&ndash;specific way.
+			See <a href="https://www.w3.org/TR/CSS2/tables.html#dynamic-effects">dynamic row and column effects in tables</a> [[!CSS2]]
+			and [[css-flexbox-1#visibility-collapse|collapsed flex items]] in flex layout [[!CSS-FLEXBOX-1]].
+			In all other cases, however,
+			(i.e. unless otherwise specified)
+			this simply makes the box [=invisible=],
+			just like ''visibility/hidden''.
+	</dl>
+
+	Note: For certain constructs with strict hierarchical structure
+	such as tables
+	making parent elements with special roles (such as table rows) [=invisible=]
+	while leaving child elements with special roles (such as table cells) visible
+	can be problematic for accessibility tools.
+	Authors should avoid creating these situations.
+
+	<dfn>Invisible</dfn> boxes are not rendered
+	(as if they were fully transparent),
+	cannot be interacted with
+	(and behave as if they had ''pointer-events: none''),
+	are removed from navigation
+	(similar to ''display: none''),
+	and are also not rendered to speech
+	(except when 'speak' is ''speak/always'' [[CSS-SPEECH-1]]).
+	However, as with ''display: contents'',
+	their semantic role as a container is not affected,
+	to ensure that any ''visibility/visible'' descendants
+	are properly interpreted.
+
+	Note: If 'speak' is ''speak/always'',
+	an otherwise [=invisible=] box
+	<em>is</em> rendered to speech,
+	and may be interacted with using non-visual/spatial methods.
+
+
 <!--
 ████████  ██     ██ ██    ██         ████ ██    ██
 ██     ██ ██     ██ ███   ██          ██  ███   ██
@@ -1769,13 +1846,13 @@ Acknowledgments</h2>
 -->
 
 <!--
- ██████  ██     ██    ███    ██    ██  ██████   ████████  ██████ 
+ ██████  ██     ██    ███    ██    ██  ██████   ████████  ██████
 ██    ██ ██     ██   ██ ██   ███   ██ ██    ██  ██       ██    ██
-██       ██     ██  ██   ██  ████  ██ ██        ██       ██      
-██       █████████ ██     ██ ██ ██ ██ ██   ████ ██████    ██████ 
+██       ██     ██  ██   ██  ████  ██ ██        ██       ██
+██       █████████ ██     ██ ██ ██ ██ ██   ████ ██████    ██████
 ██       ██     ██ █████████ ██  ████ ██    ██  ██             ██
 ██    ██ ██     ██ ██     ██ ██   ███ ██    ██  ██       ██    ██
- ██████  ██     ██ ██     ██ ██    ██  ██████   ████████  ██████ 
+ ██████  ██     ██ ██     ██ ██    ██  ██████   ████████  ██████
 -->
 
 <h2 class=no-num id="changes">