1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
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}`);
}
|
