| <!DOCTYPE html> |
| <!DOCTYPE html> |
| <script src='../resources/testharness.js'></script> |
| <script src='../resources/testharnessreport.js'></script> |
| <script src='resources/shadow-dom.js'></script> |
| <style> |
| #host { |
| color: red; |
| } |
| </style> |
| <div id="host"> |
| <template data-mode="open"> |
| <style> |
| div { |
| color: green; |
| } |
| div.p1 { |
| color: blue; |
| } |
| </style> |
| <div> |
| <slot name="s1"></slot> |
| </div> |
| </template> |
| <span id="span0" slot="unassigned"></span> |
| <span id="span1" slot="s1"></span> |
| </div> |
| <script> |
| test(() => { |
| convertTemplatesToShadowRootsWithin(host); |
| |
| assert_equals(getComputedStyle(span0).color, 'rgb(0, 0, 0)', |
| 'An element which is not assigned to any slot should not inherit a style from the parent.'); |
| assert_equals(getComputedStyle(host.shadowRoot.querySelector('slot')).color, 'rgb(0, 128, 0)', |
| 'A slot should inherit style from the parent.'); |
| |
| assert_equals(getComputedStyle(span1).color, 'rgb(0, 128, 0)', |
| 'An element which is assigned to a slot should inherit a style from the slot.'); |
| host.shadowRoot.querySelector('div').className = 'p1'; |
| assert_equals(getComputedStyle(span1).color, 'rgb(0, 0, 255)', |
| 'The style change should propagate down to a slotted element.'); |
| }, 'CSS inheritance tests for assigned nodes, not-assigned nodes, and slots'); |
| </script> |
