Bug 1632171 [wpt PR 23168] - [@property] Mark for recalc when removing declarations, a=testonly
authorAnders Hartvoll Ruud <andruud@chromium.org>
Tue, 28 Apr 2020 11:38:58 +0000
changeset 527213 9eaceb35934a3104c58890e409bc5a79891c4994
parent 527212 779273edaf951bb453327d31c839fa0587bfa70e
child 527214 74704c4f3d2dabe554a49cfd96e90116fffcd5c4
push id114648
push userwptsync@mozilla.com
push dateThu, 30 Apr 2020 19:15:02 +0000
treeherderautoland@2545233d9410 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1632171, 23168, 978780, 973830
milestone77.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 1632171 [wpt PR 23168] - [@property] Mark for recalc when removing declarations, a=testonly Automatic update from web-platform-tests [@property] Mark for recalc when removing declarations I forgot to notify StyleEngine when the property registry changes due to declarations being cleared. This meant removals would not take effect correctly/predictably. Since CSS.registerProperty / @property use the pattern of static methods on PropertyRegistration to do some work + notifying StyleEngine, we can follow the same pattern for this case. Also rename CustomPropertyRegistered to PropertyRegistryChanged. Bug: 978780, 973830 Change-Id: I3bd03f548a7783f1270d823501e4bf9b1c0778e6 -- wpt-commits: cd987667984a6d28c51e6335535c3e585c7e4ee1 wpt-pr: 23168
testing/web-platform/tests/css/css-properties-values-api/at-property-stylesheets.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/at-property-stylesheets.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<title>Verify that the correct registration is selected for mutated stylesheets</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#determining-registration">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/utils.js"></script>
+<div id=div></div>
+<script>
+
+test(() => {
+  with_at_property({
+    syntax: '"<length>"',
+    inherits: false,
+    initialValue: '1px'
+  }, (name) => {
+    assert_equals(getComputedStyle(div).getPropertyValue(name), '1px');
+  });
+}, '@property detected when stylesheet appears');
+
+test(() => {
+  let name = generate_name();
+  with_at_property({
+    name: name,
+    syntax: '"<length>"',
+    inherits: false,
+    initialValue: '1px'
+  }, (name) => {
+    assert_equals(getComputedStyle(div).getPropertyValue(name), '1px');
+  });
+  assert_equals(getComputedStyle(div).getPropertyValue(name), '');
+}, '@property removal detected when last @property rule disappears');
+
+test(() => {
+  with_at_property({
+    syntax: '"<length>"',
+    inherits: false,
+    initialValue: '1px'
+  }, (name1) => {
+    with_at_property({
+      syntax: '"<length>"',
+      inherits: false,
+      initialValue: '2px'
+    }, (name2) => {
+      assert_equals(getComputedStyle(div).getPropertyValue(name2), '2px');
+    });
+  });
+}, '@property detected in second stylesheet');
+
+test(() => {
+  let name2 = generate_name();
+  with_at_property({
+    syntax: '"<length>"',
+    inherits: false,
+    initialValue: '1px'
+  }, (name1) => {
+    with_at_property({
+      name2: name2,
+      syntax: '"<length>"',
+      inherits: false,
+      initialValue: '2px'
+    }, (name2) => {
+      assert_equals(getComputedStyle(div).getPropertyValue(name2), '2px');
+    });
+    assert_equals(getComputedStyle(div).getPropertyValue(name2), '');
+  });
+}, '@property removal detected with removal of second stylesheet');
+
+test(() => {
+  let name1 = generate_name();
+  let name2 = generate_name();
+
+  let sheet1 = `
+    @property ${name1} {
+      inherits: false;
+      syntax: "<length>";
+      initial-value: 1px;
+    }
+  `;
+  let sheet2 = `
+    @property ${name2} {
+      inherits: false;
+      syntax: "<length>";
+      initial-value: 2px;
+    }
+  `;
+
+  let node1 = document.createElement('style');
+  let node2 = document.createElement('style');
+
+  node1.textContent = sheet1;
+  node2.textContent = sheet2;
+
+  try {
+    document.body.append(node1, node2);
+    assert_equals(getComputedStyle(div).getPropertyValue(name1), '1px');
+    assert_equals(getComputedStyle(div).getPropertyValue(name2), '2px');
+    node1.remove();
+    assert_equals(getComputedStyle(div).getPropertyValue(name1), '');
+    assert_equals(getComputedStyle(div).getPropertyValue(name2), '2px');
+  } finally {
+    node1.remove();
+    node2.remove();
+  }
+}, '@property removal detected with removal of first stylesheet');
+
+</script>