Chromium Code Reviews Chromium Code Reviews
Issue 2266353004:
Make Document::styleForElementIgnoringPendingStyleSheets() be aware of a flat tree structure (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| Index: third_party/WebKit/LayoutTests/shadow-dom/css-style-inherit.html |
| diff --git a/third_party/WebKit/LayoutTests/shadow-dom/css-style-inherit.html b/third_party/WebKit/LayoutTests/shadow-dom/css-style-inherit.html |
| index ec3fc1c4ee57e242d9cd8e8ef54916561af0b4a3..62f7721d3db62a9288e3b848ca7c455690a79095 100644 |
| --- a/third_party/WebKit/LayoutTests/shadow-dom/css-style-inherit.html |
| +++ b/third_party/WebKit/LayoutTests/shadow-dom/css-style-inherit.html |
| @@ -1,16 +1,43 @@ |
| <!DOCTYPE html> |
| -<script src="../resources/js-test.js"></script> |
| +<!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"> |
| - <div slot="s1">This text should be green</div> |
| + <template data-mode="open"> |
| + <style> |
| + div { |
| + color: green; |
| + } |
| + div.p1 { |
| + color: blue; |
| + } |
| + </style> |
| + <div> |
| + <slot name="s1"></slot> |
| + </div> |
| + </template> |
| + <div slot="no-assign"><span id="span0"></span></div> |
| + <div slot="s1"><span id="span1"></span></div> |
| </div> |
| <script> |
| - description("A changed inherited property on a slot parent should propagate down to slotted elements."); |
| +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, 0, 0)', |
| + 'A slot should not inherit a style from the parent because Blink does not support "slots in the flat tree".'); |
| - var root = host.attachShadow({mode:"open"}); |
| - root.innerHTML = '<style>.p1 { color: green }</style><div id="p1"><slot name="s1"></slot></div>'; |
| - var p1 = root.querySelector("#p1"); |
| - var s1 = host.querySelector("[slot]"); |
| - shouldBeEqualToString("getComputedStyle(s1).color", "rgb(0, 0, 0)"); |
| - p1.className = "p1"; |
| - shouldBeEqualToString("getComputedStyle(s1).color", "rgb(0, 128, 0)"); |
| + assert_equals(getComputedStyle(span1).color, 'rgb(0, 128, 0)', |
| + 'An element which is assigned to a slot should inherit a style from the slot.'); |
|
rune
2016/08/23 12:36:12
Here, the span gets the green color from the light
hayato
2016/08/24 03:34:58
It gets the green color from the parent of the slo
rune
2016/08/24 12:38:44
Doesn't #span1 inherit from <div slot="s1"> ?
hayato
2016/08/25 02:01:19
Yeah, it actually inherits from <div slot="s1"> in
rune
2016/08/25 07:49:39
No, my point is that <div slot="s1"> is #span1's p
|
| + 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> |
