Bug 1529315 [wpt PR 15474] - Mark shadow trees for style collection update when inserted to document, a=testonly
authorRakina Zata Amni <rakina@chromium.org>
Wed, 06 Mar 2019 10:35:55 +0000
changeset 522511 258fdb4dac181a03048494d63d00784f4066edfe
parent 522510 81ace099679c1783d6711a39e7d9ee6d3585ae7c
child 522512 911198c7a3fcd3f3958fa208173eec2af89df827
push id10871
push usercbrindusan@mozilla.com
push dateMon, 18 Mar 2019 15:49:32 +0000
treeherdermozilla-beta@018abdd16060 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1529315, 15474, 933578, 1477623, 633666
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1529315 [wpt PR 15474] - Mark shadow trees for style collection update when inserted to document, a=testonly Automatic update from web-platform-tests Mark shadow trees for style collection update when inserted to document When we attach shadow trees with non-empty |adoptedStyleSheets|, we should update the active style sheet collection for that tree scope. Otherwise, if there are no other stylesheets for that tree scope, we will never mark the tree scope as dirty and thus have incorrect style calculation for that tree scope. Bug: 933578 Change-Id: Id7229b05440a51ac8e5d55570ed030b8cfb707d2 Reviewed-on: https://chromium-review.googlesource.com/c/1477623 Reviewed-by: Kent Tamura <tkent@chromium.org> Commit-Queue: Rakina Zata Amni <rakina@chromium.org> Cr-Commit-Position: refs/heads/master@{#633666} -- wpt-commits: 7266a4200f24ade6c91608ab05a936770c92e2f0 wpt-pr: 15474
testing/web-platform/tests/css/cssom/CSSStyleSheet-constructable.html
--- a/testing/web-platform/tests/css/cssom/CSSStyleSheet-constructable.html
+++ b/testing/web-platform/tests/css/cssom/CSSStyleSheet-constructable.html
@@ -9,30 +9,31 @@
   <div>
     <span class="green"></span>
     <span class="red"></span>
     <span class="blue"></span>
     <span class="white"></span>
     <span class="yellow"></span>
   </div>
 </section>
-<section id="secondSection"></section>
+<section id="shadowHost"></section>
 <section id="thirdSection"></section>
 
 <script>
 'use strict';
 const greenStyleText = ".green { color: green; }";
 const redStyleTexts = [".red { color: red; }", ".red + span + span { color: red; }"];
 const blueStyleTexts = [".blue { color: blue; }", ".blue + span + span { color: blue; }"];
 const whiteStyleText = "* { color: white; }";
 const yellowStyleText = ".yellow { color: yellow; }";
 
 const firstDiv = document.querySelector('#firstSection > div');
 const secondDiv = firstDiv.cloneNode(true);
-const shadowRoot = document.querySelector('#secondSection').attachShadow({mode: 'open'});
+const shadowHost = document.querySelector('#shadowHost');
+const shadowRoot = shadowHost.attachShadow({mode: 'open'});
 shadowRoot.appendChild(secondDiv);
 
 const greenSpan = firstDiv.children[0];
 const redSpan = firstDiv.children[1];
 const blueSpan = firstDiv.children[2];
 const whiteSpan = firstDiv.children[3];
 const yellowSpan = firstDiv.children[4];
 const greenShadowSpan = secondDiv.children[0];
@@ -205,16 +206,34 @@ promise_test(() => {
     assert_equals(getComputedStyle(redShadowSpan).color, "rgb(255, 0, 0)");
     assert_equals(getComputedStyle(blueShadowSpan).color, "rgb(0, 0, 0)");
     assert_equals(getComputedStyle(whiteShadowSpan).color, "rgb(255, 0, 0)");
     assert_equals(getComputedStyle(yellowShadowSpan).color, "rgb(255, 255, 0)");
   });
 }, 'Constructed style sheets can be applied on shadow root');
 
 promise_test(() => {
+  return Promise.all(createAllSheetsPromise()).then(values => {
+    const greenStyleSheet = values[0];
+    const redStyleSheet = values[1];
+    shadowRoot.adoptedStyleSheets = [greenStyleSheet];
+    assert_equals(getComputedStyle(greenShadowSpan).color, "rgb(0, 128, 0)", "Style applies connected");
+    assert_equals(getComputedStyle(redShadowSpan).color, "rgb(0, 0, 0)", "Style applies when connected");
+    let hostParent = shadowHost.parentNode;
+    hostParent.removeChild(shadowHost);
+    assert_equals(getComputedStyle(greenShadowSpan).color, "", "Style doesn't apply when detached");
+    assert_equals(getComputedStyle(redShadowSpan).color, "", "Style doesn't apply when detached");
+    shadowRoot.adoptedStyleSheets = [redStyleSheet, greenStyleSheet];
+    hostParent.appendChild(shadowHost);
+    assert_equals(getComputedStyle(greenShadowSpan).color, "rgb(0, 128, 0)", "Style applies after reattach");
+    assert_equals(getComputedStyle(redShadowSpan).color, "rgb(255, 0, 0)", "Style applies after reattach");
+  });
+}, 'Re-attaching shadow host with adopted stylesheets work');
+
+promise_test(() => {
   const plainSheet = new CSSStyleSheet();
   const redStyleSheetPromise = plainSheet.replace(redStyleTexts[0]);
   return redStyleSheetPromise.then(function(redStyleSheet) {
     document.adoptedStyleSheets = [redStyleSheet];
     assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");
     assert_equals(getComputedStyle(redSpan).color, "rgb(255, 0, 0)");
     assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");
     assert_equals(getComputedStyle(whiteSpan).color, "rgb(0, 0, 0)");