[@layer] Implement CSSLayerBlockRule and CSSLayerStatementRule API

Bug: 1095765 Change-Id: I108721fa4f6cfdf750cf70226cca00b96e2b32dd Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3299588 Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org> Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Philip Jägenstedt <foolip@chromium.org> Cr-Commit-Position: refs/heads/main@{#946795}
web-platform-tests · Dec 1, 2021 · e643bea · e643bea
1 parent cc531b7
commit e643bea
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 0 deletions.
diff --git a/css/css-cascade/idlharness.html b/css/css-cascade/idlharness.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<title>CSS Cascade Layers IDL tests</title>
+<link rel="help" href="https://drafts.csswg.org/css-cascade-5/#layer-apis">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/WebIDLParser.js"></script>
+<script src="/resources/idlharness.js"></script>
+
+<style>
+@layer foo { }
+@layer bar, baz;
+</style>
+
+<script>
+  'use strict';
+  idl_test(
+    ['css-cascade-5'],
+    ['cssom'],
+    idl_array => {
+      try {
+        self.block = document.styleSheets[0].cssRules.item(0);
+        self.statement = document.styleSheets[0].cssRules.item(1);
+      } catch (e) {
+        // Will be surfaced when block or statement is undefined below.
+      }
+
+      idl_array.add_objects({
+        CSSLayerBlockRule: ['block'],
+        CSSLayerStatementRule: ['statement'],
+      });
+    }
+  );
+</script>
diff --git a/css/css-cascade/layer-rules-cssom.html b/css/css-cascade/layer-rules-cssom.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<title>The CSSOM API for @layer Rules</title>
+<link rel="help" href="https://drafts.csswg.org/css-cascade-5/#the-csslayerblockrule-interface">
+<link rel="help" href="https://drafts.csswg.org/css-cascade-5/#the-csslayerstatementrule-interface">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+const testCases = [
+  {
+    style: `@layer foo { }`,
+    expectedNames: ['foo'],
+    title: 'Basic layer block name',
+  },
+  {
+    style: `@layer { }`,
+    expectedNames: [''],
+    title: 'Anonymous layer block name',
+  },
+  {
+    style: `
+      @layer foo;
+    `,
+    expectedNames: [['foo']],
+    title: 'Basic layer statement name',
+  },
+  {
+    style: `
+      @layer foo, bar;
+    `,
+    expectedNames: [['foo', 'bar']],
+    title: 'Layer statement with multiple names',
+  },
+  {
+    style: `
+      @layer outer {
+        @layer foo.bar { }
+      }
+      @layer outer.foo.bar { }
+    `,
+    expectedNames: ['outer', 'foo.bar', 'outer.foo.bar'],
+    title: 'Nested layer block names',
+  },
+  {
+    style: `
+      @layer outer {
+        @layer foo.bar, baz;
+      }
+      @layer outer.foo.bar, outer.baz;
+    `,
+    expectedNames: ['outer', ['foo.bar', 'baz'], ['outer.foo.bar', 'outer.baz']],
+    title: 'Nested layer statement name lists',
+  },
+];
+
+for (let testCase of testCases) {
+  const style = document.createElement('style');
+  style.appendChild(document.createTextNode(testCase.style));
+  document.head.appendChild(style);
+
+  test(function () {
+    assert_implements(window.CSSLayerBlockRule);
+    assert_implements(window.CSSLayerStatementRule);
+
+    let index = 0;
+    function compareNames(ruleOrSheet) {
+      if (ruleOrSheet instanceof CSSLayerBlockRule)
+        assert_equals(ruleOrSheet.name, testCase.expectedNames[index++]);
+      else if (ruleOrSheet instanceof CSSLayerStatementRule)
+        assert_array_equals(ruleOrSheet.nameList, testCase.expectedNames[index++]);
+      if (ruleOrSheet.cssRules) {
+        for (let i = 0; i < ruleOrSheet.cssRules.length; ++i)
+          compareNames(ruleOrSheet.cssRules.item(i));
+      }
+    }
+    compareNames(style.sheet);
+    assert_equals(index, testCase.expectedNames.length);
+  }, testCase.title);
+
+  style.remove();
+}
+</script>
diff --git a/interfaces/css-cascade-5.idl b/interfaces/css-cascade-5.idl
@@ -0,0 +1,11 @@
+// Source: CSS Cascading and Inheritance Level 5 (https://drafts.csswg.org/css-cascade-5/)
+
+[Exposed=Window]
+interface CSSLayerBlockRule : CSSGroupingRule {
+  readonly attribute CSSOMString name;
+};
+
+[Exposed=Window]
+interface CSSLayerStatementRule : CSSRule {
+  readonly attribute FrozenArray<CSSOMString> nameList;
+};