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 527590 d3849d6b9c2aff9300e54a91e748641694772fb6
parent 527589 f187ee9a9bd099a30f16d5a8e8d8836b7afcf83a
child 527591 ce9b1e876bbd4136f65d4ca89ee5586792dd2024
push id37368
push userbtara@mozilla.com
push dateFri, 01 May 2020 21:45:51 +0000
treeherdermozilla-central@0f9c5a59e45d [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>