| <!DOCTYPE html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <body> |
| <div id="host"></div> |
| <div id="bodyChild"></div> |
| </body> |
| <script> |
| function colorFor(elem) { |
| return document.defaultView.getComputedStyle(elem, '').color; |
| } |
| |
| async_test((test) => { |
| let link = document.createElement('link'); |
| link.setAttribute('rel', 'stylesheet'); |
| link.setAttribute('href', 'data:text/css,div { color: green }'); |
| link.addEventListener("load", test.step_func_done(() => { |
| assert_equals(colorFor(bodyChild), 'rgb(0, 0, 0)', 'An element in a document tree should not be styled.'); |
| assert_equals(colorFor(shadowChild), 'rgb(0, 128, 0)', 'An element in a shadow tree should be styled.'); |
| })); |
| let sr = host.attachShadow({ mode: 'open' }); |
| let shadowChild = document.createElement('div'); |
| sr.appendChild(shadowChild); |
| sr.appendChild(link); |
| }, '<link rel=stylesheet> should load a stylesheet in a connected shadow tree.'); |
| </script> |
