Add CSSOM support for CSS layers (#31481)

Instead of just crashing.

components/script/dom/cssimportrule.rs

@@ -5,8 +5,11 @@
 use dom_struct::dom_struct;
 use servo_arc::Arc;
 use style::shared_lock::{Locked, ToCssWithGuard};
+use style::stylesheets::import_rule::ImportLayer;
 use style::stylesheets::ImportRule;
+use style_traits::ToCss;
 
+use crate::dom::bindings::codegen::Bindings::CSSImportRuleBinding::CSSImportRuleMethods;
 use crate::dom::bindings::reflector::reflect_dom_object;
 use crate::dom::bindings::root::DomRoot;
 use crate::dom::bindings::str::DOMString;
@@ -60,3 +63,15 @@ impl SpecificCSSRule for CSSImportRule {
             .into()
     }
 }
+
+impl CSSImportRuleMethods for CSSImportRule {
+    /// <https://drafts.csswg.org/cssom-1/#dom-cssimportrule-layername>
+    fn GetLayerName(&self) -> Option<DOMString> {
+        let guard = self.cssrule.shared_lock().read();
+        match &self.import_rule.read_with(&guard).layer {
+            ImportLayer::None => None,
+            ImportLayer::Anonymous => Some(DOMString::new()),
+            ImportLayer::Named(name) => Some(DOMString::from_string(name.to_css_string())),
+        }
+    }
+}

components/script/dom/csslayerblockrule.rs

@@ -0,0 +1,78 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+use dom_struct::dom_struct;
+use servo_arc::Arc;
+use style::shared_lock::ToCssWithGuard;
+use style::stylesheets::LayerBlockRule;
+use style_traits::ToCss;
+
+use crate::dom::bindings::codegen::Bindings::CSSLayerBlockRuleBinding::CSSLayerBlockRuleMethods;
+use crate::dom::bindings::reflector::reflect_dom_object;
+use crate::dom::bindings::root::DomRoot;
+use crate::dom::bindings::str::DOMString;
+use crate::dom::cssgroupingrule::CSSGroupingRule;
+use crate::dom::cssrule::SpecificCSSRule;
+use crate::dom::cssstylesheet::CSSStyleSheet;
+use crate::dom::window::Window;
+
+#[dom_struct]
+pub struct CSSLayerBlockRule {
+    cssgroupingrule: CSSGroupingRule,
+    #[ignore_malloc_size_of = "Arc"]
+    #[no_trace]
+    layerblockrule: Arc<LayerBlockRule>,
+}
+
+impl CSSLayerBlockRule {
+    pub fn new_inherited(
+        parent_stylesheet: &CSSStyleSheet,
+        layerblockrule: Arc<LayerBlockRule>,
+    ) -> CSSLayerBlockRule {
+        CSSLayerBlockRule {
+            cssgroupingrule: CSSGroupingRule::new_inherited(
+                parent_stylesheet,
+                layerblockrule.rules.clone(),
+            ),
+            layerblockrule,
+        }
+    }
+
+    #[allow(crown::unrooted_must_root)]
+    pub fn new(
+        window: &Window,
+        parent_stylesheet: &CSSStyleSheet,
+        layerblockrule: Arc<LayerBlockRule>,
+    ) -> DomRoot<CSSLayerBlockRule> {
+        reflect_dom_object(
+            Box::new(CSSLayerBlockRule::new_inherited(
+                parent_stylesheet,
+                layerblockrule,
+            )),
+            window,
+        )
+    }
+}
+
+impl SpecificCSSRule for CSSLayerBlockRule {
+    fn ty(&self) -> u16 {
+        0
+    }
+
+    fn get_css(&self) -> DOMString {
+        let guard = self.cssgroupingrule.shared_lock().read();
+        self.layerblockrule.to_css_string(&guard).into()
+    }
+}
+
+impl CSSLayerBlockRuleMethods for CSSLayerBlockRule {
+    /// <https://drafts.csswg.org/css-cascade-5/#dom-csslayerblockrule-name>
+    fn Name(&self) -> DOMString {
+        if let Some(name) = &self.layerblockrule.name {
+            DOMString::from_string(name.to_css_string())
+        } else {
+            DOMString::new()
+        }
+    }
+}

components/script/dom/csslayerstatementrule.rs

@@ -0,0 +1,79 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+use dom_struct::dom_struct;
+use js::jsval::JSVal;
+use servo_arc::Arc;
+use style::shared_lock::ToCssWithGuard;
+use style::stylesheets::LayerStatementRule;
+use style_traits::ToCss;
+
+use crate::dom::bindings::codegen::Bindings::CSSLayerStatementRuleBinding::CSSLayerStatementRuleMethods;
+use crate::dom::bindings::reflector::reflect_dom_object;
+use crate::dom::bindings::root::DomRoot;
+use crate::dom::bindings::str::DOMString;
+use crate::dom::bindings::utils::to_frozen_array;
+use crate::dom::cssrule::{CSSRule, SpecificCSSRule};
+use crate::dom::cssstylesheet::CSSStyleSheet;
+use crate::dom::window::Window;
+use crate::script_runtime::JSContext as SafeJSContext;
+
+#[dom_struct]
+pub struct CSSLayerStatementRule {
+    cssrule: CSSRule,
+    #[ignore_malloc_size_of = "Arc"]
+    #[no_trace]
+    layerstatementrule: Arc<LayerStatementRule>,
+}
+
+impl CSSLayerStatementRule {
+    pub fn new_inherited(
+        parent_stylesheet: &CSSStyleSheet,
+        layerstatementrule: Arc<LayerStatementRule>,
+    ) -> CSSLayerStatementRule {
+        CSSLayerStatementRule {
+            cssrule: CSSRule::new_inherited(parent_stylesheet),
+            layerstatementrule,
+        }
+    }
+
+    #[allow(crown::unrooted_must_root)]
+    pub fn new(
+        window: &Window,
+        parent_stylesheet: &CSSStyleSheet,
+        layerstatementrule: Arc<LayerStatementRule>,
+    ) -> DomRoot<CSSLayerStatementRule> {
+        reflect_dom_object(
+            Box::new(CSSLayerStatementRule::new_inherited(
+                parent_stylesheet,
+                layerstatementrule,
+            )),
+            window,
+        )
+    }
+}
+
+impl SpecificCSSRule for CSSLayerStatementRule {
+    fn ty(&self) -> u16 {
+        0
+    }
+
+    fn get_css(&self) -> DOMString {
+        let guard = self.cssrule.shared_lock().read();
+        self.layerstatementrule.to_css_string(&guard).into()
+    }
+}
+
+impl CSSLayerStatementRuleMethods for CSSLayerStatementRule {
+    /// <https://drafts.csswg.org/css-cascade-5/#dom-csslayerstatementrule-namelist>
+    fn NameList(&self, cx: SafeJSContext) -> JSVal {
+        let names: Vec<DOMString> = self
+            .layerstatementrule
+            .names
+            .iter()
+            .map(|name| DOMString::from_string(name.to_css_string()))
+            .collect();
+        to_frozen_array(names.as_slice(), cx)
+    }
+}

components/script/dom/cssrule.rs

@@ -17,6 +17,8 @@ use crate::dom::cssfontfacerule::CSSFontFaceRule;
 use crate::dom::cssimportrule::CSSImportRule;
 use crate::dom::csskeyframerule::CSSKeyframeRule;
 use crate::dom::csskeyframesrule::CSSKeyframesRule;
+use crate::dom::csslayerblockrule::CSSLayerBlockRule;
+use crate::dom::csslayerstatementrule::CSSLayerStatementRule;
 use crate::dom::cssmediarule::CSSMediaRule;
 use crate::dom::cssnamespacerule::CSSNamespaceRule;
 use crate::dom::cssstylerule::CSSStyleRule;
@@ -62,6 +64,10 @@ impl CSSRule {
             rule as &dyn SpecificCSSRule
         } else if let Some(rule) = self.downcast::<CSSSupportsRule>() {
             rule as &dyn SpecificCSSRule
+        } else if let Some(rule) = self.downcast::<CSSLayerBlockRule>() {
+            rule as &dyn SpecificCSSRule
+        } else if let Some(rule) = self.downcast::<CSSLayerStatementRule>() {
+            rule as &dyn SpecificCSSRule
         } else {
             unreachable!()
         }
@@ -102,8 +108,12 @@ impl CSSRule {
             StyleCssRule::Page(_) => unreachable!(),
             StyleCssRule::Container(_) => unimplemented!(), // TODO
             StyleCssRule::Document(_) => unimplemented!(),  // TODO
-            StyleCssRule::LayerBlock(_) => unimplemented!(), // TODO
-            StyleCssRule::LayerStatement(_) => unimplemented!(), // TODO
+            StyleCssRule::LayerBlock(s) => {
+                DomRoot::upcast(CSSLayerBlockRule::new(window, parent_stylesheet, s))
+            },
+            StyleCssRule::LayerStatement(s) => {
+                DomRoot::upcast(CSSLayerStatementRule::new(window, parent_stylesheet, s))
+            },
             StyleCssRule::FontPaletteValues(_) => unimplemented!(), // TODO
             StyleCssRule::Property(_) => unimplemented!(),          // TODO
         }

components/script/dom/mod.rs

@@ -263,6 +263,8 @@ pub mod cssgroupingrule;
 pub mod cssimportrule;
 pub mod csskeyframerule;
 pub mod csskeyframesrule;
+pub mod csslayerblockrule;
+pub mod csslayerstatementrule;
 pub mod cssmediarule;
 pub mod cssnamespacerule;
 pub mod cssrule;

components/script/dom/webidls/CSSImportRule.webidl

@@ -8,4 +8,5 @@ interface CSSImportRule : CSSRule {
   // readonly attribute DOMString href;
   // [SameObject, PutForwards=mediaText] readonly attribute MediaList media;
   // [SameObject] readonly attribute CSSStyleSheet styleSheet;
+  readonly attribute DOMString? layerName;
 };

components/script/dom/webidls/CSSLayerBlockRule.webidl

@@ -0,0 +1,9 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+// https://drafts.csswg.org/css-cascade-5/#the-csslayerblockrule-interface
+[Exposed=Window]
+interface CSSLayerBlockRule : CSSGroupingRule {
+  readonly attribute DOMString name;
+};

components/script/dom/webidls/CSSLayerStatementRule.webidl

@@ -0,0 +1,9 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+// https://drafts.csswg.org/css-cascade-5/#the-csslayerstatementrule-interface
+[Exposed=Window]
+interface CSSLayerStatementRule : CSSRule {
+  readonly attribute /*FrozenArray<ResizeObserverSize>*/any nameList;
+};

tests/wpt/meta-legacy-layout/css/css-cascade/all-prop-revert-layer.html.ini

@@ -1,2 +1,2 @@
 [all-prop-revert-layer.html]
-  expected: CRASH
+  expected: TIMEOUT

tests/wpt/meta-legacy-layout/css/css-cascade/idlharness.html.ini

@@ -1,2 +1,33 @@
 [idlharness.html]
-  expected: CRASH
+  [CSSScopeRule interface: existence and properties of interface object]
+    expected: FAIL
+
+  [CSSScopeRule interface object length]
+    expected: FAIL
+
+  [CSSScopeRule interface object name]
+    expected: FAIL
+
+  [CSSScopeRule interface: existence and properties of interface prototype object]
+    expected: FAIL
+
+  [CSSScopeRule interface: existence and properties of interface prototype object's "constructor" property]
+    expected: FAIL
+
+  [CSSScopeRule interface: existence and properties of interface prototype object's @@unscopables property]
+    expected: FAIL
+
+  [CSSScopeRule interface: attribute start]
+    expected: FAIL
+
+  [CSSScopeRule interface: attribute end]
+    expected: FAIL
+
+  [Stringification of scope]
+    expected: FAIL
+
+  [CSSScopeRule interface: scope must inherit property "start" with the proper type]
+    expected: FAIL
+
+  [CSSScopeRule interface: scope must inherit property "end" with the proper type]
+    expected: FAIL

tests/wpt/meta-legacy-layout/css/css-cascade/layer-cssom-order-reverse-at-property.html.ini

@@ -1,2 +1,6 @@
 [layer-cssom-order-reverse-at-property.html]
-  expected: CRASH
+  [Insert layer invalidates @property]
+    expected: FAIL
+
+  [Delete layer invalidates @property]
+    expected: FAIL

tests/wpt/meta-legacy-layout/css/css-cascade/layer-cssom-order-reverse.html.ini

@@ -1,2 +1,6 @@
 [layer-cssom-order-reverse.html]
-  expected: CRASH
+  [Insert layer invalidates @font-face]
+    expected: FAIL
+
+  [Delete layer invalidates @font-face]
+    expected: FAIL

tests/wpt/meta-legacy-layout/css/css-cascade/layer-rules-cssom.html.ini

@@ -1,27 +0,0 @@
-[layer-rules-cssom.html]
-  [Basic layer block name]
-    expected: FAIL
-
-  [Anonymous layer block name]
-    expected: FAIL
-
-  [Basic layer statement name]
-    expected: FAIL
-
-  [Layer statement with multiple names]
-    expected: FAIL
-
-  [Nested layer block names]
-    expected: FAIL
-
-  [Nested layer statement name lists]
-    expected: FAIL
-
-  [Import into anonymous layer]
-    expected: FAIL
-
-  [Import into named layer]
-    expected: FAIL
-
-  [Import without layer]
-    expected: FAIL

tests/wpt/meta-legacy-layout/css/css-cascade/layer-statement-before-import.html.ini

@@ -1,2 +1,3 @@
 [layer-statement-before-import.html]
-  expected: CRASH
+  [insert other rules before the first layer statement without imports]
+    expected: FAIL

tests/wpt/meta-legacy-layout/css/css-cascade/parsing/layer.html.ini

@@ -1,2 +0,0 @@
-[layer.html]
-  expected: CRASH

tests/wpt/meta-legacy-layout/css/cssom/idlharness.html.ini

@@ -536,9 +536,6 @@
   [ShadowRoot interface: attribute adoptedStyleSheets]
     expected: FAIL
 
-  [CSSImportRule interface: attribute layerName]
-    expected: FAIL
-
   [CSSImportRule interface: attribute supportsText]
     expected: FAIL
 

tests/wpt/meta/css/css-cascade/all-prop-revert-layer.html.ini

@@ -1,2 +1,2 @@
 [all-prop-revert-layer.html]
-  expected: CRASH
+  expected: TIMEOUT

tests/wpt/meta/css/css-cascade/idlharness.html.ini

@@ -1,2 +1,33 @@
 [idlharness.html]
-  expected: CRASH
+  [CSSScopeRule interface: existence and properties of interface object]
+    expected: FAIL
+
+  [CSSScopeRule interface object length]
+    expected: FAIL
+
+  [CSSScopeRule interface object name]
+    expected: FAIL
+
+  [CSSScopeRule interface: existence and properties of interface prototype object]
+    expected: FAIL
+
+  [CSSScopeRule interface: existence and properties of interface prototype object's "constructor" property]
+    expected: FAIL
+
+  [CSSScopeRule interface: existence and properties of interface prototype object's @@unscopables property]
+    expected: FAIL
+
+  [CSSScopeRule interface: attribute start]
+    expected: FAIL
+
+  [CSSScopeRule interface: attribute end]
+    expected: FAIL
+
+  [Stringification of scope]
+    expected: FAIL
+
+  [CSSScopeRule interface: scope must inherit property "start" with the proper type]
+    expected: FAIL
+
+  [CSSScopeRule interface: scope must inherit property "end" with the proper type]
+    expected: FAIL

tests/wpt/meta/css/css-cascade/layer-cssom-order-reverse-at-property.html.ini

@@ -1,2 +1,6 @@
 [layer-cssom-order-reverse-at-property.html]
-  expected: CRASH
+  [Insert layer invalidates @property]
+    expected: FAIL
+
+  [Delete layer invalidates @property]
+    expected: FAIL

tests/wpt/meta/css/css-cascade/layer-cssom-order-reverse.html.ini

@@ -1,2 +1,6 @@
 [layer-cssom-order-reverse.html]
-  expected: CRASH
+  [Insert layer invalidates @font-face]
+    expected: FAIL
+
+  [Delete layer invalidates @font-face]
+    expected: FAIL

tests/wpt/meta/css/css-cascade/layer-rules-cssom.html.ini

@@ -1,27 +0,0 @@
-[layer-rules-cssom.html]
-  [Basic layer block name]
-    expected: FAIL
-
-  [Anonymous layer block name]
-    expected: FAIL
-
-  [Basic layer statement name]
-    expected: FAIL
-
-  [Layer statement with multiple names]
-    expected: FAIL
-
-  [Nested layer block names]
-    expected: FAIL
-
-  [Nested layer statement name lists]
-    expected: FAIL
-
-  [Import into anonymous layer]
-    expected: FAIL
-
-  [Import into named layer]
-    expected: FAIL
-
-  [Import without layer]
-    expected: FAIL

tests/wpt/meta/css/css-cascade/layer-statement-before-import.html.ini

@@ -1,2 +1,3 @@
 [layer-statement-before-import.html]
-  expected: CRASH
+  [insert other rules before the first layer statement without imports]
+    expected: FAIL

tests/wpt/meta/css/css-cascade/parsing/layer.html.ini

@@ -1,2 +0,0 @@
-[layer.html]
-  expected: CRASH

tests/wpt/meta/css/cssom/idlharness.html.ini

@@ -491,9 +491,6 @@
   [ShadowRoot interface: attribute adoptedStyleSheets]
     expected: FAIL
 
-  [CSSImportRule interface: attribute layerName]
-    expected: FAIL
-
   [CSSImportRule interface: attribute supportsText]
     expected: FAIL
 

tests/wpt/mozilla/tests/mozilla/interfaces.html

@@ -46,6 +46,8 @@ test_interfaces([
   "CSSImportRule",
   "CSSKeyframeRule",
   "CSSKeyframesRule",
+  "CSSLayerBlockRule",
+  "CSSLayerStatementRule",
   "CSSMediaRule",
   "CSSNamespaceRule",
   "CSSRule",