Skip to content

Commit

Permalink
[css-display] Describe SVG unboxing with element categories
Browse files Browse the repository at this point in the history
Fixes #2118
  • Loading branch information
AmeliaBR committed Apr 9, 2018
1 parent a6aa4d8 commit 685ed46
Showing 1 changed file with 47 additions and 17 deletions.
64 changes: 47 additions & 17 deletions css-display-3/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,13 @@ spec:css-pseudo-4; type:selector;
text: ::first-line
text: ::before
text: ::after
spec: svg2;
type:dfn;
text: container element
text: text content child element
text: renderable element
text: non-rendered element
text: rendered element
</pre>

<h2 id="intro">
Expand Down Expand Up @@ -1160,34 +1167,57 @@ HTML Elements {#unbox-html}
SVG Elements {#unbox-svg}
---------------------------

: Root <{svg}>
: An <{svg}> element that has CSS box layout
(this includes all <{svg}> whose parent is an HTML element,
as well as document root elements)
::
''display: contents'' behaves as ''display: none''.

: Nested <{svg}>
: <{a}>
: <{g}>
: <{use}> (treated as a Shadow DOM container)
: <{tspan}>
: <{textPath}>
: unknown elements
: All other SVG [=container elements=] that are also [=renderable elements=]
: SVG [=text content child elements=]
: <{use}>
::
''display: contents'' strips the element from the formatting tree,
and hoists its contents up to display in its place.
These contents include the shadow-DOM content for <{use}>.

: any other SVG elements
::
''display: contents'' behaves as ''display: none''.

<div class="note">

The intention here is that
the ''display: none'' behavior applies
whenever the "rendering context" inside the element
is different than the context outside of it.
If the element's child elements would not be valid children
of the element's parent,
you cannot simply hoist them up the formatting tree.

For example, text content and text formatting elements in SVG
require a <{text}> element context;
if you remove a <{text}>,
its child text content and elements are no longer valid.
For that reason, ''display: contents'' on <{text}>
prevents the entire text element from being rendered.
In contrast, any content inside a <{tspan}> or <{textPath}>
is also valid content inside the parent text formatting context,
so the hoisting behavior applies for these elements.

Similarly, if hoisting would convert the children from
[=non-rendered elements=]
(e.g., a shape inside a <{pattern}> or <{symbol}>)
to [=rendered elements=]
(e.g., a shape that is a direct child of the <{svg}>),
that is an invalid change of rendering context.
Never-rendered container elements therefore cannot be "un-boxed"
by ''display: contents''.
(Also, authors cannot override the 'display' property on these elements:
it is forced to ''none'' by an ''!important'' user agent style rule.)

</div>

Note: The intention here is that "nested container" elements--
elements which have the same sort of "rendering context"
both outside and inside themselves,
such that it's <em>meaningful</em> to put their contents
into the context of their parents--
get stripped and hoist their contents like normal for ''display: contents''.
Anything else,
where their contents are handled in a totally separate context from their parent,
just removes itself entirely.

MathML Elements {#unbox-mathml}
-------------------------------
Expand Down

0 comments on commit 685ed46

Please sign in to comment.