| <!DOCTYPE html> |
| <html dir="rtl"> |
| <body> |
| <div id="element" dir="ltr" class="box"></div><div id="host" dir="ltr"></div> |
| <style> |
| body { text-align: left; } |
| .box { width: 50px; height: 100px; background: green; display: inline-block; } |
| .box:dir(ltr) { background: red; } |
| #host { display: inline-block; } |
| </style> |
| <script> |
| host.attachShadow({mode: 'closed'}).innerHTML = '<div class="box"></div><style>.box { width: 50px; height: 100px; background: green; } .box:dir(ltr) { background: red; }</style>'; |
| element.getBoundingClientRect(); |
| element.removeAttribute('dir'); |
| host.removeAttribute('dir'); |
| </script> |
| </body> |
| </html> |
