Add test for lang attribute and shadow trees. (web-platform-tests#42364)

This tests the lang attribute changes in whatwg/html#9796. It replaces the lang attribute tests from web-platform-tests#29820. Co-authored-by: Anne van Kesteren <[email protected]>
Lightning00Blade · Dec 11, 2023 · e5d68cf · e5d68cf
1 parent a620952
commit e5d68cf
Showing 1 changed file with 81 additions and 0 deletions.
diff --git a/html/dom/elements/global-attributes/lang-attribute-shadow.window.js b/html/dom/elements/global-attributes/lang-attribute-shadow.window.js
@@ -0,0 +1,81 @@
+const TESTS = [
+  {
+    title: "lang only on slot",
+    light_tree: `
+      <div id="host" data-expected="en-US"><span data-expected="en-US"></span></div>
+    `,
+    shadow_tree: `
+      <slot lang="en-AU" data-expected="en-AU"></slot>
+    `,
+  },
+  {
+    title: "lang only on host",
+    light_tree: `
+      <div id="host" lang="en-AU" data-expected="en-AU"><span data-expected="en-AU"></span></div>
+    `,
+    shadow_tree: `
+      <slot data-expected="en-AU"></slot>
+    `,
+  },
+  {
+    title: "lang on host and slot",
+    light_tree: `
+      <div id="host" lang="en-AU" data-expected="en-AU"><span data-expected="en-AU"></span></div>
+    `,
+    shadow_tree: `
+      <slot lang="en-GB" data-expected="en-GB"></slot>
+    `,
+  },
+  {
+    title: "lang on host and slotted element",
+    light_tree: `
+      <div id="host" lang="en-AU" data-expected="en-AU"><span lang="en-GB" data-expected="en-GB"></span></div>
+    `,
+    shadow_tree: `
+      <slot data-expected="en-AU"></slot>
+    `,
+  },
+  {
+    title: "lang on host and slot and slotted element",
+    light_tree: `
+      <div id="host" lang="en-AU" data-expected="en-AU"><span lang="en-GB" data-expected="en-GB"></span></div>
+    `,
+    shadow_tree: `
+      <slot lang="en-NZ" data-expected="en-NZ"></slot>
+    `,
+  },
+  {
+    title: "lang on slot inherits from shadow host",
+    light_tree: `
+      <div id="host" lang="en-GB" data-expected="en-GB"><span lang="en-US" data-expected="en-US"></span></div>
+    `,
+    shadow_tree: `
+      <div lang="en-CA" data-expected="en-CA">
+        <slot data-expected="en-GB"></slot>
+      </div>
+    `,
+  },
+];
+
+const container = document.createElement("div");
+document.body.append(container);
+container.lang = "en-US";
+
+for (const obj of TESTS) {
+  test(() => {
+    container.innerHTML = obj.light_tree;
+    let shadow = container.querySelector("#host").attachShadow({mode: "open"});
+    shadow.innerHTML = obj.shadow_tree;
+    for (const element of Array.from(container.querySelectorAll("[data-expected]")).concat(Array.from(shadow.querySelectorAll("[data-expected]")))) {
+      const expected = element.getAttribute("data-expected");
+      assert_true(element.matches(`:lang(${expected})`), `element matches expected language ${expected}`);
+      for (const other_lang of ["en-US", "en-AU", "en-GB", "en-NZ", "en-CA"]) {
+        if (expected != other_lang) {
+          assert_false(element.matches(`:lang(${other_lang})`), `element does not match language ${other_lang}`);
+        }
+      }
+    }
+  }, obj.title);
+}
+
+container.remove();