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

SebastianZ · web-flow · commit e92ed2044340 · 2025-12-14T20:10:33.000-05:00
* [css-nesting-1][editorial] Added WPTs

* [css-viewport-1][editorial] Fixed Bikeshed issues
diff --git a/css-nesting-1/Overview.bs b/css-nesting-1/Overview.bs
@@ -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>
@@ -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>
 
@@ -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:
@@ -254,6 +281,10 @@ Nesting Style Rules {#nesting}
 		</pre>
 	</div>
 
+	<wpt>
+		nested-rule-cssom-invalidation.html
+	</wpt>
+
 
 <!-- Big Text: syntax
 
@@ -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.
@@ -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.
@@ -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>
 
@@ -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,
@@ -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:
 
@@ -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
 
@@ -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>
 
 
 
@@ -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}
 -----------------------------
 
@@ -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.
@@ -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.
diff --git a/css-viewport-1/Overview.bs b/css-viewport-1/Overview.bs
@@ -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">
@@ -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">
@@ -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>
@@ -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
@@ -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">
@@ -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,
@@ -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.
@@ -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">
@@ -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]
@@ -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>
@@ -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
@@ -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,
