Skip to content

[css-nesting-1][editorial] Added WPTs #13217

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
svgeesus merged 2 commits into from
Dec 15, 2025
+127 −38
Merged

[css-nesting-1][editorial] Added WPTs #13217

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1ff4df4
[css-nesting-1][editorial] Added WPTs
SebastianZ Dec 14, 2025
3307030
[css-viewport-1][editorial] Fixed Bikeshed issues
SebastianZ Dec 14, 2025
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
85 changes: 84 additions & 1 deletion css-nesting-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ Former Editor: Adam Argyle, Google, https://nerdy.dev, w3cid 112669
Abstract: This module introduces the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule. This increases the modularity and maintainability of CSS stylesheets.
Default Highlight: css
Include MDN Panels: no
WPT Path Prefix: css/css-nesting/
WPT Display: open
</pre>

<pre class=link-defaults>
Expand All @@ -36,6 +38,24 @@ Introduction</h2>
This feature allows related styles to be aggregated into a single structure within the CSS document,
improving readability and maintainability.

<wpt title="General tests for nesting">
block-skipping.html
delete-other-rule-crash.html
double-parent-pseudo-in-placeholder-crash.html
has-nesting.html
invalidation-001.html
invalidation-002.html
invalidation-003.html
invalidation-004.html
nested-error-recovery.html
nesting-basic.html
nesting-revert-rule.tentative.html
parent-pseudo-in-placeholder-crash.html
pseudo-part-crash.html
pseudo-where-crash.html
supports-is-consistent.html
</wpt>

<h3 id="placement">
Module Interactions</h3>

Expand Down Expand Up @@ -192,6 +212,13 @@ Nesting Style Rules {#nesting}
which are implicitly relative
to the elements matched by the parent rule.

<wpt>
implicit-nesting.html
implicit-nesting-ident.html
implicit-nesting-ident-recovery.html
implicit-parent-insertion-crash.html
</wpt>

<div class=example>
That is,
a nested style rule like:
Expand Down Expand Up @@ -254,6 +281,10 @@ Nesting Style Rules {#nesting}
</pre>
</div>

<wpt>
nested-rule-cssom-invalidation.html
</wpt>


<!-- Big Text: syntax

Expand Down Expand Up @@ -361,6 +392,11 @@ Syntax {#syntax}
an invalid selector still fails to match anything--
just the serialization of the selector.)

<wpt>
nest-containing-forgiving.html
parsing.html
</wpt>

Issue: The preceding paragraph needs to move to Selectors
when we move ''&'' itself to Selectors;
I'm monkey-patching for convenience here.
Expand Down Expand Up @@ -648,6 +684,13 @@ Nesting Other At-Rules {#conditionals}
* ''@scope''
</div>

<wpt>
conditional-properties.html
conditional-rules.html
invalid-inner-rules.html
supports-rule.html
</wpt>

The meanings and behavior of such [=nested group rules=]
is otherwise unchanged,
unless otherwise specified.
Expand Down Expand Up @@ -757,6 +800,10 @@ Nesting Other At-Rules {#conditionals}
are automatically wrapped in [=nested declarations rules=].
(This is observable in the CSSOM.)

<wpt>
nesting-layer.html
</wpt>

<h4 id=nesting-at-scope>
Nested ''@scope'' Rules</h4>

Expand Down Expand Up @@ -914,6 +961,10 @@ Nesting Selector: the ''&'' selector {#nest-selector}
it represents the same elements as '':scope'' in that context
(unless otherwise defined).

<wpt>
top-level-is-scope.html
</wpt>

<div class="note">
The <a>nesting selector</a> can be desugared
by replacing it with the parent style rule's selector,
Expand Down Expand Up @@ -971,6 +1022,10 @@ Nesting Selector: the ''&'' selector {#nest-selector}
(identical to the behavior of '':is()''),
or zero if no such selector list exists.

<wpt>
top-level-parent-pseudo-specificity.html
</wpt>

<div class="example">
For example, given the following style rules:

Expand Down Expand Up @@ -1098,6 +1153,18 @@ Nesting Selector: the ''&'' selector {#nest-selector}
continues to apply
(that is, ''&amp;div'' is illegal, and must be written ''div&amp;'' instead).

<wpt>
contextually-invalid-selectors-001.html
contextually-invalid-selectors-002.html
contextually-invalid-selectors-003.html
host-nesting-001.html
host-nesting-002.html
host-nesting-003.html
host-nesting-004.html
host-nesting-005.html
nesting-type-selector.html
</wpt>


<!-- Big Text: Nested Decl

Expand Down Expand Up @@ -1271,7 +1338,12 @@ The Nested Declarations Rule</h2>
at <code highlight=js>fooRule.cssRules[1].style</code>.
</div>


<wpt>
mixed-declarations-rules.html
nested-declarations-cssom-whitespace.html
nested-declarations-cssom.html
nested-declarations-matching.html
</wpt>



Expand Down Expand Up @@ -1301,6 +1373,11 @@ with the implied [=nesting selector=] inserted.
will serialize as ''& > .foo''.
</div>

<wpt>
cssom.html
set-selector-text.html
</wpt>

The {{CSSNestedDeclarations}} Interface {#the-cssnestrule}
-----------------------------

Expand Down Expand Up @@ -1334,6 +1411,10 @@ The {{CSSNestedDeclarations}} rule [=serialize a CSS rule|serializes=]
as if its [=CSS declaration block|declaration block=]
had been [=serialize a CSS declaration block|serialized=] directly.

<wpt>
serialize-group-rules-with-decls.html
</wpt>

Note: This means that multiple adjacent [=nested declarations rules=]
(which is possible to create with e.g. {{CSSGroupingRule/insertRule}})
will collapse into a single rule when serialized and parsed again.
Expand Down Expand Up @@ -1380,3 +1461,5 @@ Significant changes since the

* Replaced <code>@nest</code> with [=nested declarations rules=].
(<a href="https://github.com/w3c/csswg-drafts/issues/10234">Issue 10234</a>)

* Added Web Platform Tests coverage.
80 changes: 43 additions & 37 deletions css-viewport-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Former Editor: Ryan Betts, Adobe Systems, rbetts@adobe.com
Former Editor: Øyvind Stenhaug, Opera Software, oyvinds@opera.com
Abstract: This specification provides a way for an author to specify, in CSS, the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.
Issue Tracking: CSSWG GitHub https://github.com/w3c/csswg-drafts/labels/css-viewport-1
Ignored Vars: <viewport-length>
Ignored Vars: document, parameters, <viewport-length>
</pre>

<pre class="anchors">
Expand All @@ -32,8 +32,10 @@ spec: fenced-frames; urlPrefix: https://wicg.github.io/fenced-frame/
</pre>

<pre class=link-defaults>
spec:webdriver2; type:dfn; text:remote end steps
spec:webdriver2; type:dfn; text:error
spec:webdriver2; type:dfn;
text:error
text:remote end steps
text:success
</pre>

<h2 id="intro">
Expand Down Expand Up @@ -90,14 +92,14 @@ The page area can be set through ''@page'' rules.

This specification introduces a way of overriding the size of the viewport
provided by the user agent (UA). Because of this, we need to introduce the
difference between the ''initial viewport'' and the ''actual viewport''.
difference between the [=initial viewport=] and the [=actual viewport=].

<dl>
<dt><dfn>initial viewport</dfn></dt>
<dd>
This refers to the viewport before any UA or author styles have
overridden the viewport given by the window or viewing area of the UA.
Note that the ''initial viewport'' size will change with the
Note that the [=initial viewport=] size will change with the
size of the window or viewing area.</dd>
<dt><dfn>actual viewport</dfn></dt>
<dd>
Expand All @@ -106,25 +108,25 @@ difference between the ''initial viewport'' and the ''actual viewport''.
</dd>
</dl>

ISSUE: Make ''actual viewport'' the layout viewport, define visual viewport.
ISSUE: Make [=actual viewport=] the layout viewport, define visual viewport.

When the ''actual viewport'' cannot fit inside the window or
viewing area, either because the ''actual viewport'' is
larger than the ''initial viewport'' or the zoom factor
causes only parts of the ''actual viewport'' to be visible,
When the [=actual viewport=] cannot fit inside the window or
viewing area, either because the [=actual viewport=] is
larger than the [=initial viewport=] or the zoom factor
causes only parts of the [=actual viewport=] to be visible,
the UA should offer a scrolling or panning mechanism.

It is recommended that initially the upper-left corners of the
''actual viewport'' and the window or viewing area are aligned if the
[=actual viewport=] and the window or viewing area are aligned if the
base direction of the document is ltr. Similarly, that the upper-right
corners are aligned when the base direction is rtl. The base direction
for a document is defined as the computed value of the 'direction'
property for the first <code class=html>&lt;BODY&gt;</code> element of
an HTML or XHTML document. For other document types, it is the
computed 'direction' for the root element.

<h3 id="display-feature"><dfn>Display feature</dfn> definition</h3>
A display feature is a hardware feature that acts as a divider
<h3 id="the-display-feature">Display feature definition</h3>
A <dfn>Display feature</dfn> is a hardware feature that acts as a divider
and creates logically separate region of the viewport called {{segments}}.
It can be a fold area of a device with a foldable screen or a physical
split occupying a logical space within the viewport for example some dual
Expand All @@ -133,10 +135,10 @@ screen models.
Below is an illustration describing the concept of display features and how
they divide the viewport in {{segments}}:

<img src="display_features_general.svg" alt="Two images,
showing two display feature configurations and the respective segments.
One image is showing an vertical display feature, the other is showing
an horizontal display feature" style="width: 70%;height: auto; margin:auto; display: flex;">
<img src="display_features_general.svg" width="560" height="258"
alt="Two images, showing two display feature configurations and the respective segments.
One image is showing an vertical display feature, the other is showing
an horizontal display feature" style="width: 70%;height: auto; margin:auto; display: flex;">


<h2 id="viewport-meta">
Expand Down Expand Up @@ -389,7 +391,7 @@ only the value previously set to it.
An element becomes zoomed when the 'zoom' property has a positive computed value different than 1
(or when a flat tree ancestor has zoom).

To apply zoom, the [=used value=] of a CSS property (including values inside of [=path()=] strings) is pre-multiplied
To apply zoom, the [=used value=] of a CSS property (including values inside of ''path()'' strings) is pre-multiplied
(before any other steps in the [=used value=] stage)
by the [=used value=] of 'zoom' for the element.
It also multiplies the [=natural size=] of all replaced elements,
Expand All @@ -406,7 +408,7 @@ all inherited properties such as 'line-height' and 'font-size'.
Nested values of 'zoom' multiply, resulting in additional scaling of <<length>> values.
The [=used value=] for zoom is always its [=effective zoom=].

The 'zoom' property has no effect on <<length>> property values with computed values that are 'auto' or <<percentage>>.
The 'zoom' property has no effect on <<length>> property values with computed values that are <css>auto</css> or <<percentage>>.

Note: Unlike 'transform',
scaling the 'zoom' property affects layout.
Expand Down Expand Up @@ -480,8 +482,8 @@ Negative values for 'zoom' are illegal.
</pre>

Here is an llustration of the before and after hover state of the message box element:
<img src="css_zoom_hover_example.png" alt="Two images,
showing the zooming effect before and after zoom has applied. The second is 1.5 larger.">
<img src="css_zoom_hover_example.png" width="704" height="270"
alt="Two images showing the zooming effect before and after zoom has applied. The second is 1.5 larger.">
</div>

<div class="example">
Expand Down Expand Up @@ -553,9 +555,7 @@ partial interface Window {
};
</pre>

<h2 id=viewport>Viewport</h2>

<h3 id="the-viewport-interface">The {{Viewport}} Interface</h3>
<h2 id="the-viewport-interface">The {{Viewport}} Interface</h2>

<pre class=idl>
[Exposed=Window]
Expand Down Expand Up @@ -593,23 +593,31 @@ If a viewport of 400px by 400px is split horizontally into two side-by-side segm

</div>

<h2 class=no-num id="privacy">Privacy Considerations</h2>

No new privacy considerations have been reported on this specification.

<h2 class=no-num id="security">Security Considerations</h2>

No new security considerations have been reported on this specification.

<h2 class="no-num" id="changes">Appendix A. Changes</h2>

This appendix is <em>informative</em>.

<h3 class="no-num">Since the
<h3 class="no-num" id="changes-20160329">Since the
<a href="http://www.w3.org/TR/2016/WD-css-device-adapt-1-20160329/">29
March 2016 Working Draft</a>
</h3>

<ul>
<li>Added 'interactive-widgets' property to viewport meta</li>
<li>Removed @viewport rule</li>
<li>Added <css>interactive-widgets</css> property to viewport meta</li>
<li>Removed <css>@viewport</css> rule</li>
<li>Renamed spec from device-adapt to css-viewport</li>
<li>CSSViewportRule exposed to Window</li>
</ul>

<h3 class="no-num">Since the
<h3 class="no-num" id="changes-20110915">Since the
<a href="https://www.w3.org/TR/2011/WD-css-device-adapt-20110915/">15
September 2011 First Public Working Draft</a>.
</h3>
Expand All @@ -622,17 +630,16 @@ This appendix is <em>informative</em>.
<li>Added recommendation for when to respect orientation property.
<li>Dropped support for the resolution descriptor.
<li>Decouple width/height and zoom, introducing ''extend-to-zoom'' value for meta viewport translation.
<li>Made normative rules about interaction of @viewport and @media.
<li>Allow 0 for <<viewport-length>> and '@viewport/zoom' values
<li>Made normative rules about interaction of <css>@viewport</css> and ''@media''.
<li>Allow 0 for <css>&lt;viewport-length&gt;</css> and <css>zoom</css> values
<li>Removed support for device-width/height.
<li>Apply @viewport to top level document only.
<li>Extend [[!CSS3-CONDITIONAL]] rather than CSS21 for nesting in @media.
<li>Removed @viewport
<li>Apply <css>@viewport</css> to top level document only.
<li>Extend [[!CSS3-CONDITIONAL]] rather than CSS21 for nesting in ''@media''.
</ul>

<h2 class="no-num" id="automation">Appendix B. Automation</h2>

<h3>Automation of the {{segments}} property</h3>
<h3 id="automation-segments">Automation of the {{segments}} property</h3>
The {{segments}} property poses a challenge to test authors, as exercising this property
requires access to specific hardware devices. To address this challenge this document defines
[[WEBDRIVER2]] [=extension commands=] that allow users to control how the viewport is split by
Expand Down Expand Up @@ -715,9 +722,8 @@ parameter.

Below is an illustration showing the various properties of a display feature:

<img src="display_features.svg" alt="Two images,
showing the meaning of each display feature attributes. One image is showing an
vertical display feature, the other is showing an horizontal display feature" style="width: 70%;height: auto; margin:auto; display: flex;">
<img src="display_features.svg" width="560" height="258"
alt="Two images showing the meaning of each display feature attributes. One image is showing a vertical display feature, the other is showing an horizontal display feature" style="width: 70%;height: auto; margin:auto; display: flex;">

<div class="example">
To create a [=[[DisplayFeaturesOverride]]=] in the <a spec="WEBDRIVER2">current browsing context</a> of the [=session=] with ID 23,
Expand Down