dir-slots-directionality.html (7744B)
1 <!doctype html> 2 <title>HTML Test: dir=auto|rtl with slots, and direction should be RTL</title> 3 <meta charset="UTF-8"> 4 <meta name="author" title="Miyoung Shin" href="mailto:myid.shin@igalia.com"> 5 <meta name="author" title="L. David Baron" href="mailto:dbaron@chromium.org"> 6 <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute"/> 7 <link rel="help" href="https://github.com/whatwg/html/issues/3699"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="dir-shadow-utils.js"></script> 11 12 <div></div> 13 14 <script> 15 16 test(() => { 17 let [tree, shadow] = setup_tree(` 18 <div> 19 <div id="root"> 20 <span></span> 21 </div> 22 </div> 23 `,` 24 <slot dir="rtl"></slot> 25 `); 26 let span = tree.querySelector("span"); 27 assert_equals(getComputedStyle(span).direction, "rtl"); 28 assert_equals(html_direction(span), "ltr"); 29 tree.remove(); 30 }, 'Slots: Directionality: dir=rtl on slot'); 31 32 test(() => { 33 let [tree, shadow] = setup_tree(` 34 <div> 35 <div id="root" dir="rtl"></div> 36 </div> 37 `,` 38 <span></span> 39 `); 40 let span = shadow.querySelector("span"); 41 assert_equals(getComputedStyle(span).direction, "rtl"); 42 assert_equals(html_direction(span), "rtl"); 43 tree.remove(); 44 }, 'Slots: Directionality: dir=rtl on host'); 45 46 test(() => { 47 let [tree, shadow] = setup_tree(` 48 <div> 49 <span id="root" dir="auto"></span> 50 </div> 51 `,` 52 اختبر 53 `); 54 let span = tree.querySelector("span"); 55 assert_equals(getComputedStyle(span).direction, "ltr"); 56 assert_equals(html_direction(span), "ltr"); 57 tree.remove(); 58 }, 'Slots: Directionality: dir=auto on host with Arabic shadow tree content'); 59 60 test(() => { 61 let [tree, shadow] = setup_tree(` 62 <div> 63 <div id="root"> 64 اختبر 65 </div> 66 </div> 67 `,` 68 <span dir="auto"> 69 <slot></slot> 70 </span> 71 `); 72 let span = shadow.querySelector("span"); 73 assert_equals(getComputedStyle(span).direction, "ltr"); 74 assert_equals(html_direction(span), "ltr"); 75 tree.remove(); 76 }, 'Slots: Directionality: dir=auto in shadow tree with Arabic light tree content'); 77 78 test(() => { 79 let [tree, shadow] = setup_tree(` 80 <div> 81 <div id="root"></div> 82 </div> 83 `,` 84 <span dir="auto"> 85 <slot> 86 اختبر 87 </slot> 88 </span> 89 `); 90 let span = shadow.querySelector("span"); 91 assert_equals(getComputedStyle(span).direction, "ltr"); 92 assert_equals(html_direction(span), "ltr"); 93 tree.remove(); 94 }, 'Slots: Directionality: dir=auto in shadow tree with Arabic shadow tree content'); 95 96 test(() => { 97 let [tree, shadow] = setup_tree(` 98 <div> 99 <div id="root"> 100 اختبر 101 </div> 102 </div> 103 `,` 104 <slot dir="auto"></slot> 105 `); 106 let slot = shadow.querySelector("slot"); 107 assert_equals(getComputedStyle(slot).direction, "rtl"); 108 assert_equals(html_direction(slot), "rtl"); 109 tree.remove(); 110 }, 'Slots: Directionality: dir=auto on slot with Arabic light tree content'); 111 112 test(() => { 113 let [tree, shadow] = setup_tree(` 114 <div> 115 <div id="root" dir="rtl"></div> 116 </div> 117 `,` 118 <section dir="ltr"> 119 <div dir="auto"> 120 <slot></slot> 121 A 122 </div> 123 </section> 124 `); 125 let div = shadow.querySelector("div"); 126 assert_equals(html_direction(div), "rtl"); 127 tree.remove(); 128 }, 'slot provides its directionality (from host) to a dir=auto container'); 129 130 test(() => { 131 let [tree, shadow] = setup_tree(` 132 <div> 133 <div id="root"></div> 134 </div> 135 `,` 136 <div dir="auto"> 137 <span dir="ltr"> 138 A 139 </span> 140 \u05D0 141 </div> 142 <slot></slot> 143 `); 144 let div = shadow.querySelector("div"); 145 assert_equals(html_direction(div), "rtl"); 146 tree.remove(); 147 }, 'children with dir attribute are skipped by dir=auto'); 148 149 test(() => { 150 let [tree, shadow] = setup_tree(` 151 <div> 152 <div id="root"></div> 153 </div> 154 `,` 155 <div dir="auto"><slot dir="ltr"></slot>\u05D0</div> 156 `); 157 let div = shadow.querySelector("div"); 158 assert_equals(html_direction(div), "rtl"); 159 tree.remove(); 160 }, 'slot with dir attribute is skipped by dir=auto'); 161 162 test(() => { 163 let [tree, shadow] = setup_tree(` 164 <div> 165 <div id="root" dir="auto"> 166 <div dir="ltr">اختبر</div> 167 <span>Text</span> 168 </div> 169 </div> 170 `,` 171 <slot dir="auto"></slot> 172 `); 173 let div = tree.querySelector("#root"); 174 assert_equals(html_direction(div), "ltr"); 175 let slot = shadow.querySelector("slot"); 176 assert_equals(html_direction(slot), "ltr"); 177 tree.remove(); 178 }, 'dir=auto slot ignores assigned nodes with dir attribute'); 179 180 test(() => { 181 let [tree, shadow] = setup_tree(` 182 <div> 183 <div id="root"> 184 <bdi class="name">اختبر</bdi> 185 </div> 186 </div> 187 `, ` 188 <slot dir="auto"></slot> 189 `); 190 let slot = shadow.querySelector("slot"); 191 assert_equals(html_direction(slot), "ltr"); 192 tree.remove(); 193 }, 'dir=auto slot ignores text in bdi assigned nodes'); 194 195 test(() => { 196 let [tree, shadow] = setup_tree(` 197 <div> 198 <div id=root> 199 <input value="اختبر"> 200 </div> 201 </div> 202 `,` 203 <slot dir=auto></slot> 204 `); 205 let inp = tree.querySelector("input"); 206 assert_equals(html_direction(inp), "ltr"); 207 let slot = shadow.querySelector("slot"); 208 assert_equals(html_direction(slot), "ltr"); 209 tree.remove(); 210 211 [tree, shadow] = setup_tree(` 212 <div> 213 <div id=root> 214 <input value="a"> 215 اختبر 216 </div> 217 </div> 218 `,` 219 <slot dir=auto></slot> 220 `); 221 inp = tree.querySelector("input"); 222 assert_equals(html_direction(inp), "ltr"); 223 slot = shadow.querySelector("slot"); 224 assert_equals(html_direction(slot), "rtl"); 225 tree.remove(); 226 }, 'dir=auto slot ignores text in value of input element children'); 227 228 test(() => { 229 let [tree, shadow] = setup_tree(` 230 <div> 231 <div id=root> 232 <input value="اختبر"> 233 <input type=text value="اختبر"> 234 <input type=submit value="اختبر"> 235 abc 236 </div> 237 </div> 238 `,` 239 <slot dir=auto></slot> 240 `); 241 let slot = shadow.querySelector("slot"); 242 assert_equals(html_direction(slot), "ltr"); 243 tree.remove(); 244 }, 'dir=auto slot is not affected by value of auto-directionality form associated elements'); 245 246 test(() => { 247 let [tree, shadow] = setup_tree(` 248 <div> 249 <div id=root><div slot="inner">اختبر</div></div> 250 </div> 251 `,` 252 <slot name="outer"> 253 <slot name="inner" dir="auto"></slot> 254 </slot> 255 `); 256 let slot = shadow.querySelector("slot[name='inner']"); 257 assert_equals(html_direction(slot), "rtl"); 258 tree.remove(); 259 }, 'inner slot is given directionality from slotted content'); 260 261 test(() => { 262 let [tree, shadow] = setup_tree(` 263 <div> 264 <div id=root><div slot="inner">اختبر</div></div> 265 </div> 266 `,` 267 <slot name="outer" dir=auto> 268 </slot> 269 `); 270 let slot = shadow.querySelector("slot[name='outer']"); 271 slot.innerHTML = "<slot name='inner'></slot>"; 272 assert_equals(html_direction(slot), "ltr"); 273 tree.remove(); 274 }, 'dir=auto slot is not affected by content inside inner slot (version 1)'); 275 276 // version 2 of the test is simpler, but initially exposed assertion failures 277 // (maybe crashes?) in Chromium, so was added later. 278 test(() => { 279 let [tree, shadow] = setup_tree(` 280 <div> 281 <div id=root><div slot="inner">اختبر</div></div> 282 </div> 283 `,` 284 <slot name="outer" dir=auto> 285 <slot name="inner"></slot> 286 </slot> 287 `); 288 let slot = shadow.querySelector("slot[name='outer']"); 289 assert_equals(html_direction(slot), "ltr"); 290 // do an extra intermediate removal to make sure it doesn't crash/assert: 291 tree.querySelector("div[slot='inner']").remove(); 292 tree.remove(); 293 }, 'dir=auto slot is not affected by content inside inner slot (version 2)'); 294 295 </script>