Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /html/rendering/bidi-rendering/slot-direction.window.html - WPT Dashboard Interop Dashboard
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}`);
}