file_bug1100912.html (5541B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1100912 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test for Bug 1100912</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 11 <style> 12 td { 13 border-right: 1px solid black; 14 } 15 </style> 16 </head> 17 <body> 18 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1100912">Mozilla Bug 1100912</a> 19 <p id="display"></p> 20 <div id="content" style="display: none"> 21 </div> 22 <pre id="test"> 23 </pre> 24 <!-- The table is here just to make the web page easier to read --> 25 <table> 26 <tr> 27 <td> </td> 28 <td> </td> 29 <td> </td> 30 <td> </td> 31 </tr> 32 33 <tr><td>1.</td><td> 34 <div id="host1" dir="rtl"><span> 3 4 </span></div> 35 </td><td></td><td>rtl on host</td></tr> 36 37 <tr><td>2.</td><td> 38 <div id="host2" dir="rtl"><span> 3 4 </span></div> 39 </td><td></td><td>rtl on host, ltr slot's parent</td></tr> 40 41 <tr><td>3.</td><td> 42 <div id="host3" dir="rtl"><span> 3 4 </span></div> 43 </td><td></td><td>rtl on host, ltr on slot</td></tr> 44 45 <tr><td>4.</td><td> 46 <div id="host4" dir="auto"><span> 1 2 </span></div> 47 </td><td></td><td>auto host, rtl in shadow</td></tr> 48 49 <tr><td>5.</td><td> 50 <div id="host5" dir="auto"><span> أخبار </span></div> 51 </td><td></td><td>auto host, rtl in host (in assigned node)</td></tr> 52 53 <tr><td>6.</td><td> 54 <div id="host6" dir="auto"><span> أخبار </span></div> 55 </td><td></td><td>auto host, rtl in host, no assigned node</td></tr> 56 57 <tr><td>7.</td><td> 58 <div id="host7" dir="auto"><span> أخبار </span></div> 59 </td><td></td><td>auto host, rtl in host, explicit ltr in shadow</td></tr> 60 61 <tr><td>8.</td><td> 62 <div id="host8" dir="auto"><span slot="second">‎1 2 </span><span slot="first"> أخبار </span></div> 63 </td><td></td><td>auto host, ltr in host, rtl in host, reverse order in slots</td></tr> 64 65 <tr><td>9.</td><td> 66 <div id="host9" dir="auto">أخبار</div> 67 </td><td></td><td>auto host, rtl in host (in assigned text node)</td></tr> 68 69 <tr><td>10.</td><td> 70 <div id="host10" dir="auto"> 1 2</div> 71 </td><td></td><td>auto host, 1 2 in host (in assigned text node)</td></tr> 72 73 </table> 74 <script> 75 76 function ltrExpected(element) { 77 opener.is(element.parentNode.querySelector(":dir(ltr)"), element, 78 "Should have got an ltr element."); 79 } 80 81 function rtlExpected(element) { 82 opener.is(element.parentNode.querySelector(":dir(rtl)"), element, 83 "Should have got an rtl element."); 84 } 85 86 const shadowRoot1 = host1.attachShadow({mode: 'closed'}); 87 shadowRoot1.innerHTML = '<div> 1 2 <span><slot></slot></span></div>'; 88 rtlExpected(host1); 89 rtlExpected(host1.firstChild); 90 rtlExpected(shadowRoot1.firstChild.lastChild); // span in the Shadow DOM 91 92 const shadowRoot2 = host2.attachShadow({mode: 'closed'}); 93 shadowRoot2.innerHTML = '<div> 1 2 <span dir="ltr"><slot></slot></span></div>'; 94 rtlExpected(host2); 95 rtlExpected(host2.firstChild); 96 97 // This is weird case, and we have similar behavior as Blink. dir= on <slot> 98 // doesn't affect to UI since slot has display: contents by default. 99 const shadowRoot3 = host3.attachShadow({mode: 'closed'}); 100 shadowRoot3.innerHTML = '<div> 1 2 <span><slot dir="ltr"></slot></span></div>'; 101 rtlExpected(host3); 102 103 const shadowRoot4 = host4.attachShadow({mode: 'closed'}); 104 shadowRoot4.innerHTML = '<div> أخبار <span><slot></slot></span></div>'; 105 ltrExpected(host4); 106 ltrExpected(host4.firstChild); 107 ltrExpected(shadowRoot4.firstChild.lastChild); 108 109 const shadowRoot5 = host5.attachShadow({mode: 'closed'}); 110 shadowRoot5.innerHTML = '<div> 1 2 <span><slot></slot></span></div>'; 111 rtlExpected(host5); 112 rtlExpected(host5.firstChild); 113 rtlExpected(shadowRoot5.firstChild.lastChild); 114 115 const shadowRoot6 = host6.attachShadow({mode: 'closed'}); 116 shadowRoot6.innerHTML = '<div> 1 2 <span></span></div>'; 117 rtlExpected(host6); 118 rtlExpected(host6.firstChild); 119 rtlExpected(shadowRoot6.firstChild.lastChild); 120 121 const shadowRoot7 = host7.attachShadow({mode: 'closed'}); 122 shadowRoot7.innerHTML = '<div> ‎1 2 <span><slot></slot></span></div>'; 123 rtlExpected(host7); 124 rtlExpected(host7.firstChild); 125 rtlExpected(shadowRoot7.firstChild.lastChild); 126 127 const shadowRoot8 = host8.attachShadow({mode: 'closed'}); 128 shadowRoot8.innerHTML = '<div><slot name="first"></slot><slot name="second"></slot></div>'; 129 ltrExpected(host8); 130 ltrExpected(host8.firstChild); 131 ltrExpected(shadowRoot8.firstChild.firstChild); 132 133 const shadowRoot9 = host9.attachShadow({mode: 'closed'}); 134 shadowRoot9.innerHTML = '<div> 1 2 <span><slot></slot></span></div>'; 135 rtlExpected(host9); 136 rtlExpected(shadowRoot9.firstChild.lastChild); 137 138 const shadowRoot10 = host10.attachShadow({mode: 'closed'}); 139 shadowRoot10.innerHTML = '<div> أخبار <span><slot></slot></span></div>'; 140 ltrExpected(host10); 141 ltrExpected(shadowRoot10.firstChild.lastChild); 142 143 opener.didRunTests(); 144 window.close(); 145 </script> 146 </body> 147 </html>