Bug 1530831 [wpt PR 15513] - Update |active_tree_scopes| etc when shadow root with adoptedStyleSheets is inserted, a=testonly
authorRakina Zata Amni <rakina@chromium.org>
Wed, 06 Mar 2019 12:35:37 +0000
changeset 522560 df46e8c9bc569597d1774836fc8b16deb1a269ff
parent 522559 f80199c17ea799abafe2b9d73d0546367aabcb45
child 522561 70fc9e4d62ddac3e8a8e6c2356f1756b739d502c
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
bugs1530831, 15513, 934340, 1482437, 634624
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 1530831 [wpt PR 15513] - Update |active_tree_scopes| etc when shadow root with adoptedStyleSheets is inserted, a=testonly Automatic update from web-platform-tests Update |active_tree_scopes| etc when shadow root with adoptedStyleSheets is inserted When a shadow root with non-empty |adoptedStyleSheets| is inserted, we should make sure that the |active_tree_scopes_| list is updated and the tree scope is marked dirty so that style invalidation & recalc will work. Bug: 934340 Change-Id: I365936e4bcc0132c938fe4e200e208abac91d3d9 Reviewed-on: https://chromium-review.googlesource.com/c/1482437 Commit-Queue: Rakina Zata Amni <rakina@chromium.org> Reviewed-by: Kent Tamura <tkent@chromium.org> Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/master@{#634624} -- wpt-commits: cf8e7d68a5fe9e40f6492706dbaafa01f8e8bfc9 wpt-pr: 15513
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
@@ -223,16 +223,51 @@ promise_test(() => {
     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');
 
+test(() => {
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(":host { color: red; }");
+  const host = document.createElement("div");
+  let sr = host.attachShadow({mode: "open"});
+  sr.adoptedStyleSheets = [sheet];
+  document.body.appendChild(host);
+  assert_equals(getComputedStyle(host).color, "rgb(255, 0, 0)", "Style applies when connected");
+  sheet.replaceSync(":host { color: blue; }");
+  assert_equals(getComputedStyle(host).color, "rgb(0, 0, 255)", "Style update applies when connected");
+}, 'Attaching a shadow root that already has adopted stylesheets work');
+
+test(() => {
+
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(":host([red]) { color: red; } :host(.blue) { color: blue; }");
+  const host = document.createElement("div");
+  host.toggleAttribute("red");
+  document.body.appendChild(host);
+  assert_equals(getComputedStyle(host).color, "rgb(0, 0, 0)", "No style applies yet");
+
+  let sr = host.attachShadow({mode: "open"});
+  sr.adoptedStyleSheets = [sheet];
+
+  assert_equals(getComputedStyle(host).color, "rgb(255, 0, 0)", "Style applies after adding style");
+  document.body.removeChild(host);
+  document.body.appendChild(host);
+  assert_equals(getComputedStyle(host).color, "rgb(255, 0, 0)", "Style applies after reattachment");
+  host.toggleAttribute("red");
+  assert_equals(getComputedStyle(host).color, "rgb(0, 0, 0)", "Attribute updates to the element after reattachment apply");
+  host.classList.toggle("blue");
+  assert_equals(getComputedStyle(host).color, "rgb(0, 0, 255)", "Class updates to the element after reattachment apply");
+
+}, "Re-attaching shadow host and updating attributes 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)");