| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"/> |
| <title>[dir] and shadow slots: dir=auto and text in a slot in the shadow tree, text in the light tree</title> |
| <link rel="author" title="Eric Meyer" href="mailto:emeyer@igalia.com"> |
| <link rel="help" href="https://html.spec.whatwg.org/multipage/C#the-dir-attribute"> |
| <link rel="help" href="https://github.com/whatwg/html/issues/3699"> |
| <link rel="help" href="https://github.com/whatwg/html/pull/9796"> |
| <link rel="match" href="dir-shadow-36-ref.html"> |
| <style type="text/css"> |
| body {width: 600px;} |
| div {border: 1px solid gray; margin: 1em; padding: 0.25em;} |
| span {border: 1px solid silver;} |
| |
| </style> |
| <script src="dir-shadow-utils.js"></script> |
| </head> |
| <body> |
| |
| <p>`dir=auto` and text in a slot in the shadow tree, text in the light tree</p> |
| <div id="host">English.</div> |
| <p id="result">The HTML direction / computed CSS `direction` value for the light tree text is: </p> |
| |
| <script type="text/javascript"> |
| let root = host.attachShadow({mode:"open"}); |
| root.innerHTML = `<slot dir=auto>اختبر</slot>`; |
| result.innerHTML += html_direction(root.firstChild) + " / " + getComputedStyle(root.firstChild).direction + " (on the " + root.firstChild.localName + ') and ' + html_direction(host) + " / " + getComputedStyle(host).direction + ' (on the ' + host.id + ').'; |
| </script> |
| |
| </body> |
| </html> |