slot-direction.window.js (1850B)
1 // https://html.spec.whatwg.org/multipage/rendering.html#bidi-rendering 2 // https://github.com/whatwg/html/pull/9796 3 // https://github.com/whatwg/html/pull/9880 4 5 for (let t of [ 6 { 7 description: "<slot> inherits direction from parent", 8 shadow_tree: ` 9 <div dir=ltr data-expected="ltr"> 10 <slot data-expected="ltr"></slot> 11 </div> 12 `, 13 host_dir: "rtl", 14 }, 15 { 16 description: "<slot> inherits CSS direction from parent", 17 shadow_tree: ` 18 <div style="direction: ltr" data-expected="ltr"> 19 <slot data-expected="ltr"></slot> 20 </div> 21 `, 22 host_dir: "rtl", 23 }, 24 { 25 description: "<slot dir=ltr>", 26 shadow_tree: ` 27 <slot dir="ltr" data-expected="ltr"></slot> 28 `, 29 host_dir: "rtl", 30 }, 31 { 32 description: "<slot dir=rtl>", 33 shadow_tree: ` 34 <slot dir="rtl" data-expected="rtl"></slot> 35 `, 36 host_dir: "ltr", 37 }, 38 { 39 description: "<slot dir=auto> resolving to LTR", 40 shadow_tree: ` 41 <slot dir="ltr" data-expected="ltr"></slot> 42 `, 43 host_dir: "rtl", 44 host_contents: "A", 45 }, 46 { 47 description: "<slot dir=auto> resolving to RTL", 48 shadow_tree: ` 49 <slot dir="rtl" data-expected="rtl"></slot> 50 `, 51 host_dir: "ltr", 52 host_contents: "\u0627", 53 }, 54 ]) { 55 test(() => { 56 let host = document.createElement("div"); 57 document.body.appendChild(host); 58 host.dir = t.host_dir; 59 if ("host_contents" in t) { 60 host.innerHTML = t.host_contents; 61 } 62 63 let root = host.attachShadow({mode: "open"}); 64 root.innerHTML = t.shadow_tree; 65 66 for (let e of Array.from(root.querySelectorAll("[data-expected]"))) { 67 assert_equals(getComputedStyle(e).direction, e.getAttribute("data-expected"), `direction of ${e.nodeName}`); 68 } 69 70 host.remove(); 71 }, `<slot> element sets CSS direction property: ${t.description}`); 72 }