| <!DOCTYPE html> |
| <html> |
| <body> |
| <p>Test passes if you see a single 100px by 100px green box below.</p> |
| <style> |
| |
| div { |
| width: 100px; |
| height: 25px; |
| background: red; |
| } |
| |
| </style> |
| <script> |
| |
| function appendShadowHost(container, template, callback) { |
| var host = document.createElement('div'); |
| container.appendChild(host); |
| var shadow = host.attachShadow({mode: 'closed'}); |
| shadow.innerHTML = template; |
| callback(shadow); |
| return host; |
| } |
| |
| appendShadowHost(document.body, ` |
| <style></style> |
| <div>FAIL</div> |
| `, function (shadow) { |
| var style = shadow.querySelector('style'); |
| style.sheet.insertRule('div { width: 100%; height: 100%; background: green; color: green; }', 0); |
| }); |
| appendShadowHost(document.body, ` |
| <style media="aural"> div { width: 100%; height: 100%; color: green; background: green; } </style> |
| <div>FAIL</div> |
| `, function (shadow) { |
| var style = shadow.querySelector('style'); |
| style.removeAttribute('media'); |
| }); |
| appendShadowHost(document.body, ` |
| <style> div { width: 100%; height: 100%; color: green; background: green; } </style> |
| <style> div { color: black; background: red; } </style> |
| <div>FAIL</div> |
| `, function (shadow) { |
| var style = shadow.querySelectorAll('style')[1]; |
| style.disabled = true; |
| }); |
| appendShadowHost(document.body, ` |
| <style> div { width: 100%; height: 100%; color: green; background: green; } </style> |
| <style> div { color: black; background: red; } </style> |
| <div>FAIL</div> |
| `, function (shadow) { |
| shadow.querySelectorAll('style')[1].remove(); |
| }); |
| |
| </script> |
| </body> |
| </html> |
