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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
|
function setup_tree(light_tree, shadow_tree) {
let body = document.body;
let old_length = body.childNodes.length;
body.insertAdjacentHTML("beforeend", light_tree.trim());
if (body.childNodes.length != old_length + 1) {
throw "unexpected markup";
}
let result = body.lastChild;
if (shadow_tree) {
let shadow = result.querySelector("#root").attachShadow({mode: "open"});
shadow.innerHTML = shadow_tree.trim();
return [result, shadow];
}
return result;
}
test(t => {
let a = setup_tree(`
<div id="a" dir="auto">
<div id="b"></div>
hello
</div>
`);
let acs = getComputedStyle(a);
assert_true(a.matches(":dir(ltr)"), ":dir(ltr) matches before insertion");
assert_false(a.matches(":dir(rtl)"), ":dir(rtl) does not match before insertion");
assert_equals(acs.direction, "ltr", "CSSdirection before insertion");
b.innerHTML = "\u05D0";
assert_false(a.matches(":dir(ltr)"), ":dir(ltr) does not match after insertion");
assert_true(a.matches(":dir(rtl)"), ":dir(rtl) matches after insertion");
assert_equals(acs.direction, "rtl", "CSSdirection after insertion");
a.remove();
}, "dynamic insertion of RTL text in a child element");
test(() => {
let div_rtlchar = document.createElement("div");
div_rtlchar.innerHTML = "\u05D0";
let container1 = document.createElement("div");
document.body.appendChild(container1);
let container2 = document.createElement("div");
for (let container of [container1, container2]) {
container.dir = "auto";
assert_true(container.matches(":dir(ltr)"));
container.appendChild(div_rtlchar);
assert_false(container.matches(":dir(ltr)"));
div_rtlchar.remove();
assert_true(container.matches(":dir(ltr)"));
}
container1.remove();
}, "dir=auto changes for content insertion and removal, in and out of document");
test(() => {
let tree, shadow;
[tree, shadow] = setup_tree(`
<div>
<div id="root">
<span id="l">A</span>
<span id="r">\u05D0</span>
</div>
</div>
`, `
<slot id="one" name="one" dir="auto">\u05D0</slot>
<slot id="two" dir="auto"></slot>
`);
let one = shadow.getElementById("one");
let two = shadow.getElementById("two");
let l = tree.querySelector("#l");
let r = tree.querySelector("#r");
assert_false(one.matches(":dir(ltr)"), "#one while empty");
assert_true(two.matches(":dir(ltr)"), "#two with both spans");
l.slot = "one";
assert_true(one.matches(":dir(ltr)"), "#one with LTR child span");
assert_false(two.matches(":dir(ltr)"), "#two with RTL child span");
r.slot = "one";
assert_true(one.matches(":dir(ltr)"), "#one with both child spans");
assert_true(two.matches(":dir(ltr)"), "#two while empty");
l.slot = "";
assert_false(one.matches(":dir(ltr)"), "#one with RTL child span");
assert_true(two.matches(":dir(ltr)"), "#two with LTR child span");
tree.remove();
}, "dir=auto changes for slot reassignment");
test(() => {
let tree, shadow;
[tree, shadow] = setup_tree(`
<div dir=auto>
<div id=root>
<div id=text>A</div>
</div>
</div>
`, `
<div dir=ltr>
<slot id=slot dir=auto></slot>
</div>
`);
let text = tree.querySelector("#text");
let slot = shadow.querySelector("#slot");
assert_true(tree.matches(":dir(ltr)"), "node tree ancestor before first text change");
assert_true(slot.matches(":dir(ltr)"), "slot before first text change");
text.innerText = "\u05D0";
assert_false(tree.matches(":dir(ltr)"), "node tree ancestor after first text change");
assert_false(slot.matches(":dir(ltr)"), "slot after first text change");
tree.dir = "rtl";
assert_false(tree.matches(":dir(ltr)"), "node tree ancestor before second text change");
assert_false(slot.matches(":dir(ltr)"), "slot before second text change");
text.innerText = "A";
assert_false(tree.matches(":dir(ltr)"), "node tree ancestor after second text change");
assert_true(slot.matches(":dir(ltr)"), "slot after second text change");
slot.dir = "ltr";
assert_false(tree.matches(":dir(ltr)"), "node tree ancestor before third text change");
assert_true(slot.matches(":dir(ltr)"), "slot before third text change");
text.innerText = "\u05D0";
assert_false(tree.matches(":dir(ltr)"), "node tree ancestor after third text change");
assert_true(slot.matches(":dir(ltr)"), "slot after third text change");
slot.dir = "auto";
tree.dir = "auto";
assert_false(tree.matches(":dir(ltr)"), "node tree ancestor after fourth text change");
assert_false(slot.matches(":dir(ltr)"), "slot after fourth text change");
text.innerText = "A";
assert_true(tree.matches(":dir(ltr)"), "node tree ancestor before fourth text change");
assert_true(slot.matches(":dir(ltr)"), "slot before fourth text change");
slot.dir = "rtl";
assert_true(tree.matches(":dir(ltr)"), "node tree ancestor before fifth text change");
assert_false(slot.matches(":dir(ltr)"), "slot before fifth text change");
text.innerText = "\u05D0";
assert_false(tree.matches(":dir(ltr)"), "node tree ancestor before fifth text change");
assert_false(slot.matches(":dir(ltr)"), "slot before fifth text change");
tree.remove();
}, "text changes affecting both slot and ancestor with dir=auto");
test(() => {
let tree = setup_tree(`
<div dir="auto">
<span id="a1">A</span>
<span id="aleph1">\u05D0</span>
<span id="a2">A</span>
<span id="aleph2">\u05D0</span>
</div>
`);
let a1 = tree.querySelector("#a1");
let aleph1 = tree.querySelector("#aleph1");
assert_true(tree.matches(":dir(ltr)"), "initial state");
assert_false(tree.matches(":dir(rtl)"), "initial state");
a1.dir = "ltr";
assert_false(tree.matches(":dir(ltr)"), "after change 1");
a1.dir = "invalid";
assert_true(tree.matches(":dir(ltr)"), "after change 2");
a1.dir = "rtl";
assert_false(tree.matches(":dir(ltr)"), "after change 3");
a1.removeAttribute("dir");
assert_true(tree.matches(":dir(ltr)"), "after change 4");
a1.dir = "invalid";
assert_true(tree.matches(":dir(ltr)"), "after change 5");
a1.dir = "rtl";
assert_false(tree.matches(":dir(ltr)"), "after change 6");
aleph1.dir = "auto";
assert_true(tree.matches(":dir(ltr)"), "after change 7");
aleph1.dir = "invalid";
assert_false(tree.matches(":dir(ltr)"), "after change 8");
tree.remove();
}, "dynamic changes to subtrees excluded as a result of the dir attribute");
test(() => {
let tree = setup_tree(`
<div dir="auto">
<!-- element goes here -->
</div>
`);
let element = document.createElementNS("namespace", "element");
let text = document.createTextNode("\u05D0");
element.appendChild(text);
tree.prepend(element);
assert_not_equals(element.namespaceURI, tree.namespaceURI);
assert_true(tree.matches(":dir(rtl)"), "initial state");
assert_false(tree.matches(":dir(ltr)"), "initial state");
text.data = "A";
assert_true(tree.matches(":dir(ltr)"), "after dynamic change");
assert_false(tree.matches(":dir(rtl)"), "after dynamic change");
tree.remove();
}, "dynamic changes inside of non-HTML elements");
test(() => {
let tree, shadow;
[tree, shadow] = setup_tree(`
<div dir="auto">
<div id="root">
<element xmlns="namespace">A</element>
\u05D0
</div>
</div>
`, `
<div dir="ltr">
<slot dir="auto">\u05D0</slot>
</div>
`);
let element = tree.querySelector("element");
let slot = shadow.querySelector("slot");
let text = element.firstChild;
assert_true(tree.matches(":dir(ltr)"), "initial state (tree)");
assert_true(element.matches(":dir(ltr)"), "initial state (element)");
assert_true(slot.matches(":dir(ltr)"), "initial state (slot)");
text.data = "\u05D0";
assert_true(tree.matches(":dir(rtl)"), "state after first change (tree)");
assert_true(element.matches(":dir(rtl)"), "state after first change (element)");
assert_true(slot.matches(":dir(rtl)"), "state after first change (slot)");
text.data = "";
assert_true(tree.matches(":dir(rtl)"), "state after second change (tree)");
assert_true(element.matches(":dir(rtl)"), "state after second change (element)");
assert_true(slot.matches(":dir(rtl)"), "state after second change (slot)");
tree.remove();
}, "slotted non-HTML elements");
test(() => {
let tree, shadow;
[tree, shadow] = setup_tree(`
<div>
<div id="root">
<!-- element goes here -->
\u05D0
</div>
</div>
`, `
<div dir="ltr">
<slot></slot>
</div>
`);
let element = document.createElementNS("namespace", "element");
let text = document.createTextNode("A");
element.appendChild(text);
tree.querySelector("#root").prepend(element);
assert_not_equals(element.namespaceURI, tree.namespaceURI);
assert_true(tree.matches(":dir(ltr)"), "initial state (tree)");
assert_true(element.matches(":dir(ltr)"), "initial state (element)");
tree.dir = "auto";
assert_true(tree.matches(":dir(ltr)"), "state after making dir=auto (tree)");
assert_true(element.matches(":dir(ltr)"), "state after making dir=auto (element)");
text.data = "\u05D0";
assert_true(tree.matches(":dir(rtl)"), "state after first change (tree)");
assert_true(element.matches(":dir(rtl)"), "state after first change (element)");
text.data = "";
assert_true(tree.matches(":dir(rtl)"), "state after second change (tree)");
assert_true(element.matches(":dir(rtl)"), "state after second change (element)");
tree.remove();
}, "slotted non-HTML elements after dynamically assigning dir=auto, and dir attribute ignored on non-HTML elements");
|
