Add tests for direction and bidi isolation behavior of <slot> element.

These tests are based on the tests previously in https://crrev.com/c/4800075 and https://crrev.com/c/4973701, but are revised to reflect that the HTML spec changes that those changes were implementing have been reverted in whatwg/html#9880 Bug: 576815 Change-Id: Id4536cb39691c2d234113f891f96d7100c7eeea4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5233352 Reviewed-by: Di Zhang <[email protected]> Auto-Submit: David Baron <[email protected]> Commit-Queue: Di Zhang <[email protected]> Cr-Commit-Position: refs/heads/main@{#1251783}
web-platform-tests · Jan 25, 2024 · 41bbcfc · 41bbcfc
1 parent f48dea8
commit 41bbcfc
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 0 deletions.
diff --git a/html/rendering/bidi-rendering/slot-direction.window.js b/html/rendering/bidi-rendering/slot-direction.window.js
@@ -0,0 +1,72 @@
+// https://html.spec.whatwg.org/multipage/rendering.html#bidi-rendering
+// https://github.com/whatwg/html/pull/9796
+// https://github.com/whatwg/html/pull/9880
+
+for (let t of [
+  {
+    description: "<slot> inherits direction from parent",
+    shadow_tree: `
+      <div dir=ltr data-expected="ltr">
+        <slot data-expected="ltr"></slot>
+      </div>
+    `,
+    host_dir: "rtl",
+  },
+  {
+    description: "<slot> inherits CSS direction from parent",
+    shadow_tree: `
+      <div style="direction: ltr" data-expected="ltr">
+        <slot data-expected="ltr"></slot>
+      </div>
+    `,
+    host_dir: "rtl",
+  },
+  {
+    description: "<slot dir=ltr>",
+    shadow_tree: `
+      <slot dir="ltr" data-expected="ltr"></slot>
+    `,
+    host_dir: "rtl",
+  },
+  {
+    description: "<slot dir=rtl>",
+    shadow_tree: `
+      <slot dir="rtl" data-expected="rtl"></slot>
+    `,
+    host_dir: "ltr",
+  },
+  {
+    description: "<slot dir=auto> resolving to LTR",
+    shadow_tree: `
+      <slot dir="ltr" data-expected="ltr"></slot>
+    `,
+    host_dir: "rtl",
+    host_contents: "A",
+  },
+  {
+    description: "<slot dir=auto> resolving to RTL",
+    shadow_tree: `
+      <slot dir="rtl" data-expected="rtl"></slot>
+    `,
+    host_dir: "ltr",
+    host_contents: "\u0627",
+  },
+]) {
+  test(() => {
+    let host = document.createElement("div");
+    document.body.appendChild(host);
+    host.dir = t.host_dir;
+    if ("host_contents" in t) {
+      host.innerHTML = t.host_contents;
+    }
+
+    let root = host.attachShadow({mode: "open"});
+    root.innerHTML = t.shadow_tree;
+
+    for (let e of Array.from(root.querySelectorAll("[data-expected]"))) {
+      assert_equals(getComputedStyle(e).direction, e.getAttribute("data-expected"), `direction of ${e.nodeName}`);
+    }
+
+    host.remove();
+  }, `<slot> element sets CSS direction property: ${t.description}`);
+}
diff --git a/html/rendering/bidi-rendering/slot-no-isolate-001-ref.html b/html/rendering/bidi-rendering/slot-no-isolate-001-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<title>HTML Rendering: slot element has unicode-bidi: isolate</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Google" href="http://www.google.com/">
+
+<div style="unicode-bidi: bidi-override; direction: ltr;">&#x5D1;-&#x5D0;</div>
+
+<div>normal</div>
diff --git a/html/rendering/bidi-rendering/slot-no-isolate-001.html b/html/rendering/bidi-rendering/slot-no-isolate-001.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>HTML Rendering: slot element has unicode-bidi: isolate</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Google" href="http://www.google.com/">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#bidi-rendering">
+<link rel="help" href="https://github.com/whatwg/html/pull/9880">
+<link rel="match" href="slot-no-isolate-001-ref.html">
+
+<div>&#x5D0;-<span id="e">&#x5D1;</span></div>
+
+<div id="v"></div>
+
+<script>
+
+let e = document.getElementById("e");
+let root = e.attachShadow({mode: "open"});
+// use display:inline to override default display:contents
+root.innerHTML = "<slot style='display:inline'>\u05D2</slot>";
+let val = getComputedStyle(root.querySelector("slot")).unicodeBidi;
+document.getElementById("v").innerText = val;
+
+</script>