Skip to content

Display contents svg #2599

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tabatkins merged 3 commits into from
Apr 20, 2018
Merged

Display contents svg #2599

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
685ed46
[css-display] Describe SVG unboxing with element categories
AmeliaBR Apr 9, 2018
573ad1b
[css-display] Clarify impact of display: contents on SVG attributes
AmeliaBR Apr 9, 2018
124396a
[css-display] Add an issue re SVG attributes & display: contents
AmeliaBR Apr 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 62 additions & 17 deletions css-display-3/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,14 @@ 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
text: presentation attribute
</pre>

<h2 id="intro">
Expand Down Expand Up @@ -1160,34 +1168,71 @@ 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''.

When an element is stripped from the formatting tree,
then any SVG attributes on that element
that control the layout and formatting of its child content
(or shadow DOM content)
are ignored when rendering the contents.
However, SVG [=presentation attributes=]
continue to affect CSS property inheritance,
the same as CSS styles set in any other way.

Issue(w3c/csswg-drafts#2502):
Is this description clear enough to identify
the SVG attributes affected by ''display: contents''?


<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