Bug 1631732 [wpt PR 23135] - [@property] Determine the registration, a=testonly
authorAnders Hartvoll Ruud <andruud@chromium.org>
Tue, 28 Apr 2020 11:35:17 +0000
changeset 527546 11570b6989c7dd77a05a42ce1a7af44af0e6fc99
parent 527545 e4651ad8076551d9f051e488bb71d4e68416e931
child 527547 1b2a09e3b4726cb90d9dcfacf7999dd4a1e50d80
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
bugs1631732, 23135, 973830, 2157071, 761075
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 1631732 [wpt PR 23135] - [@property] Determine the registration, a=testonly Automatic update from web-platform-tests [@property] Determine the registration The current behavior for dealing with multiple registrations on the same custom property was highly temporary, and not based on any spec. The spec has since been updated to describe how it should work: in short, registrations originating from CSS.registerProperty are stored independently from those originating from @property, and CSS.registerProperty-registrations (if present) win over @property- registrations. Changes in this CL: - Separates storage for CSS.registerProperty-registrations (registered_properties_) and @property-registrations (declared_properties_). The old code put @property registrations in the same map as CSS.registerProperty-registrations, and only if no registration exited already. (Meaning for example that the first @property seen would win---opposite of how it's spec'd to work now). - Determines the registration [1] correctly. I.e. first checks the the CSS.registerProperty-registrations, and the @property ones. - Adds an iterator which yields the currently active registrations across both registration types. (I wanted to do this separately, but initial values won't work properly without it, and there's a test that relies heavily on that being functional). Note that it's not explicitly stated in the spec that the storage for the two registration types shall be separate, but that _is_ the background for the current spec text on the subject. The rationale is that it makes it easier to reason about which registration is the current one when @property rules can appear and disappear via JS. It's also expected that CSS.unregisterProperty will be added in the future, making the situation even more unstable. [1] https://drafts.css-houdini.org/css-properties-values-api-1/#determining-registration Bug: 973830 Change-Id: I69b48629034b333ebed5d374f943d08b39579334 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2157071 Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/master@{#761075} -- wpt-commits: 7aa1b761a317d924763915d2505f3a500659b47f wpt-pr: 23135
testing/web-platform/tests/css/css-properties-values-api/determine-registration.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/determine-registration.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<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>
+<style>
+@property --a {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 1px;
+}
+
+@property --b {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 2px;
+}
+
+@property --c {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 3px;
+}
+
+@property --d {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 4px;
+}
+
+@property --d {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: red;
+}
+</style>
+<style>
+@property --c {
+  syntax: "<integer>";
+  inherits: false;
+  initial-value: 6;
+}
+</style>
+<div id=div></div>
+<script>
+
+CSS.registerProperty({
+  name: '--b',
+  syntax: '<color>',
+  inherits: false,
+  initialValue: 'green'
+});
+
+CSS.registerProperty({
+  name: '--e',
+  syntax: '<color>',
+  inherits: false,
+  initialValue: 'blue'
+});
+
+test(() => {
+  assert_equals(getComputedStyle(div).getPropertyValue('--a'), '1px');
+}, '@property determines the registration when uncontested');
+
+test(() => {
+  assert_equals(getComputedStyle(div).getPropertyValue('--b'), 'rgb(0, 128, 0)');
+}, 'CSS.registerProperty wins over @property');
+
+test(() => {
+  assert_equals(getComputedStyle(div).getPropertyValue('--c'), '6');
+}, '@property later in document order wins');
+
+test(() => {
+  assert_equals(getComputedStyle(div).getPropertyValue('--d'), 'rgb(255, 0, 0)');
+}, '@property later in stylesheet wins');
+
+test(() => {
+  assert_equals(getComputedStyle(div).getPropertyValue('--e'), 'rgb(0, 0, 255)');
+}, 'CSS.registerProperty determines the registration when uncontested');
+
+</script>