Bug 1632410 [wpt PR 23198] - [@property] Add tests for @property and CSS Typed OM, a=testonly
authorAnders Hartvoll Ruud <andruud@chromium.org>
Tue, 28 Apr 2020 11:42:02 +0000
changeset 527646 f3c6734efd734202ab48c484a2a43a9e1a633c41
parent 527645 569cb14c4063d8b7df1cf6f5f9df44dc338b60a2
child 527647 106181ff2589329484656815eb04febed2b97296
push id114723
push userarchaeopteryx@coole-files.de
push dateFri, 01 May 2020 14:54:07 +0000
treeherderautoland@8f743729a39b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1632410, 23198, 973830, 2160894, 762081
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 1632410 [wpt PR 23198] - [@property] Add tests for @property and CSS Typed OM, a=testonly Automatic update from web-platform-tests [@property] Add tests for @property and CSS Typed OM The @property rule is relevant for CSS Typed OM, because the syntax of a registered custom property can now be changed several times, or even revert back to unregistered. This affects how values should reify. Bug: 973830 Change-Id: I0ad5ba843b89d9153657e8b3f464e2dd33659cd2 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2160894 Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/master@{#762081} -- wpt-commits: 37df62b2f9df04ad5202db498f9a6fe1d891a106 wpt-pr: 23198
testing/web-platform/tests/css/css-properties-values-api/at-property-typedom.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/at-property-typedom.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#css-style-value-reification">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/utils.js"></script>
+<div id=div></div>
+<script>
+
+test(() => {
+  let name = generate_name();
+  with_style_node(`div { ${name}: 100px; }`, () => {
+    // Before registering the property, ${name} should reify as a
+    // a token sequence.
+    assert_equals(div.computedStyleMap().get(name).constructor.name, 'CSSUnparsedValue');
+    assert_equals(div.computedStyleMap().get(name).toString(), ' 100px');
+
+    with_at_property({
+      name: name,
+      syntax: '"<length>"',
+      inherits: false,
+      initialValue: '0px'
+    }, () => {
+      // After registering, it should reify as a <length>.
+      assert_equals(div.computedStyleMap().get(name).constructor.name, 'CSSUnitValue');
+      assert_equals(div.computedStyleMap().get(name).value, 100);
+      assert_equals(div.computedStyleMap().get(name).unit, 'px');
+    });
+
+    // After @property is removed, the computed value is once again a token
+    // sequence.
+    assert_equals(div.computedStyleMap().get(name).constructor.name, 'CSSUnparsedValue');
+    assert_equals(div.computedStyleMap().get(name).toString(), ' 100px');
+  });
+}, 'Properties declared with @property reify correctly');
+
+test(() => {
+  let name = generate_name();
+  // 0 is valid as a both <length> and <integer>, which reify differently.
+  with_style_node(`div { ${name}: 0; }`, () => {
+    with_at_property({
+      name: name,
+      syntax: '"<length>"',
+      inherits: false,
+      initialValue: '1000px'
+    }, () => {
+      assert_equals(div.computedStyleMap().get(name).constructor.name, 'CSSUnitValue');
+      assert_equals(div.computedStyleMap().get(name).value, 0);
+      assert_equals(div.computedStyleMap().get(name).unit, 'px');
+
+      with_at_property({
+        name: name,
+        syntax: '"<integer>"',
+        inherits: false,
+        initialValue: '1000'
+      }, () => {
+        assert_equals(div.computedStyleMap().get(name).constructor.name, 'CSSUnitValue');
+        assert_equals(div.computedStyleMap().get(name).value, 0);
+        assert_equals(div.computedStyleMap().get(name).unit, 'number');
+      });
+    });
+  });
+}, 'Re-declaring a property with a different type affects reification');
+
+</script>