Import WPT tests for css custom properties api
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 25 Sep 2018 00:05:32 +0000 (00:05 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 25 Sep 2018 00:05:32 +0000 (00:05 +0000)
https://bugs.webkit.org/show_bug.cgi?id=189764

Patch by Justin Michaud <justin_michaud@apple.com> on 2018-09-24
Reviewed by Ryosuke Niwa.

LayoutTests/imported/w3c:

* resources/import-expectations.json:
* web-platform-tests/css/css-properties-values-api/META.yml: Added.
* web-platform-tests/css/css-properties-values-api/idlharness-expected.txt: Added.
* web-platform-tests/css/css-properties-values-api/idlharness.html: Added.
* web-platform-tests/css/css-properties-values-api/property-cascade-expected.txt: Added.
* web-platform-tests/css/css-properties-values-api/property-cascade.html: Added.
* web-platform-tests/css/css-properties-values-api/register-property-expected.txt: Added.
* web-platform-tests/css/css-properties-values-api/register-property-syntax-parsing-expected.txt: Added.
* web-platform-tests/css/css-properties-values-api/register-property-syntax-parsing.html: Added.
* web-platform-tests/css/css-properties-values-api/register-property.html: Added.
* web-platform-tests/css/css-properties-values-api/registered-properties-inheritance-expected.txt: Added.
* web-platform-tests/css/css-properties-values-api/registered-properties-inheritance.html: Added.
* web-platform-tests/css/css-properties-values-api/registered-property-computation-expected.txt: Added.
* web-platform-tests/css/css-properties-values-api/registered-property-computation.html: Added.
* web-platform-tests/css/css-properties-values-api/registered-property-cssom-expected.txt: Added.
* web-platform-tests/css/css-properties-values-api/registered-property-cssom.html: Added.
* web-platform-tests/css/css-properties-values-api/registered-property-initial-expected.txt: Added.
* web-platform-tests/css/css-properties-values-api/registered-property-initial.html: Added.
* web-platform-tests/css/css-properties-values-api/support/alt/alt.css: Added.
(#target):
* web-platform-tests/css/css-properties-values-api/support/alt/alt.js: Added.
(reg_url):
* web-platform-tests/css/css-properties-values-api/support/alt/w3c-import.log: Added.
* web-platform-tests/css/css-properties-values-api/support/main/main.css: Added.
(#target):
* web-platform-tests/css/css-properties-values-api/support/main/main.js: Added.
(reg_url):
* web-platform-tests/css/css-properties-values-api/support/main/main.utf16be.css: Added.
* web-platform-tests/css/css-properties-values-api/support/main/w3c-import.log: Added.
* web-platform-tests/css/css-properties-values-api/typedom.tentative-expected.txt: Added.
* web-platform-tests/css/css-properties-values-api/typedom.tentative.html: Added.
* web-platform-tests/css/css-properties-values-api/unit-cycles-expected.txt: Added.
* web-platform-tests/css/css-properties-values-api/unit-cycles.html: Added.
* web-platform-tests/css/css-properties-values-api/url-resolution-expected.txt: Added.
* web-platform-tests/css/css-properties-values-api/url-resolution.html: Added.
* web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-cycles-expected.txt: Added.
* web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-cycles.html: Added.
* web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-expected.txt: Added.
* web-platform-tests/css/css-properties-values-api/var-reference-registered-properties.html: Added.
* web-platform-tests/css/css-properties-values-api/w3c-import.log: Added.

LayoutTests:

* platform/mac-wk1/TestExpectations:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@236444 268f45cc-cd09-0410-ab3c-d52691b4dbfc

39 files changed:
LayoutTests/ChangeLog
LayoutTests/imported/w3c/ChangeLog
LayoutTests/imported/w3c/resources/import-expectations.json
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/META.yml [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/idlharness-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/idlharness.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/property-cascade-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/property-cascade.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/register-property-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/register-property-syntax-parsing-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/register-property-syntax-parsing.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/register-property.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-properties-inheritance-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-properties-inheritance.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-computation-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-computation.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-cssom-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-cssom.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-initial-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-initial.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/alt/alt.css [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/alt/alt.js [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/alt/w3c-import.log [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/main/main.css [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/main/main.js [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/main/main.utf16be.css [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/main/w3c-import.log [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/typedom.tentative-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/typedom.tentative.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/unit-cycles-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/unit-cycles.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/url-resolution-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/url-resolution.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-cycles-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-cycles.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/w3c-import.log [new file with mode: 0644]
LayoutTests/platform/mac-wk1/TestExpectations

index 454da88..4954147 100644 (file)
@@ -1,3 +1,12 @@
+2018-09-24  Justin Michaud  <justin_michaud@apple.com>
+
+        Import WPT tests for css custom properties api
+        https://bugs.webkit.org/show_bug.cgi?id=189764
+
+        Reviewed by Ryosuke Niwa.
+
+        * platform/mac-wk1/TestExpectations:
+
 2018-09-24  Matt Lewis  <jlewis3@apple.com>
 
         Skipped accessibility/mac/focus-setting-selection-syncronizing-not-clearing.html on High Sierra+.
index 0c18ab5..a0d2cd2 100644 (file)
@@ -1,3 +1,51 @@
+2018-09-24  Justin Michaud  <justin_michaud@apple.com>
+
+        Import WPT tests for css custom properties api
+        https://bugs.webkit.org/show_bug.cgi?id=189764
+
+        Reviewed by Ryosuke Niwa.
+
+        * resources/import-expectations.json:
+        * web-platform-tests/css/css-properties-values-api/META.yml: Added.
+        * web-platform-tests/css/css-properties-values-api/idlharness-expected.txt: Added.
+        * web-platform-tests/css/css-properties-values-api/idlharness.html: Added.
+        * web-platform-tests/css/css-properties-values-api/property-cascade-expected.txt: Added.
+        * web-platform-tests/css/css-properties-values-api/property-cascade.html: Added.
+        * web-platform-tests/css/css-properties-values-api/register-property-expected.txt: Added.
+        * web-platform-tests/css/css-properties-values-api/register-property-syntax-parsing-expected.txt: Added.
+        * web-platform-tests/css/css-properties-values-api/register-property-syntax-parsing.html: Added.
+        * web-platform-tests/css/css-properties-values-api/register-property.html: Added.
+        * web-platform-tests/css/css-properties-values-api/registered-properties-inheritance-expected.txt: Added.
+        * web-platform-tests/css/css-properties-values-api/registered-properties-inheritance.html: Added.
+        * web-platform-tests/css/css-properties-values-api/registered-property-computation-expected.txt: Added.
+        * web-platform-tests/css/css-properties-values-api/registered-property-computation.html: Added.
+        * web-platform-tests/css/css-properties-values-api/registered-property-cssom-expected.txt: Added.
+        * web-platform-tests/css/css-properties-values-api/registered-property-cssom.html: Added.
+        * web-platform-tests/css/css-properties-values-api/registered-property-initial-expected.txt: Added.
+        * web-platform-tests/css/css-properties-values-api/registered-property-initial.html: Added.
+        * web-platform-tests/css/css-properties-values-api/support/alt/alt.css: Added.
+        (#target):
+        * web-platform-tests/css/css-properties-values-api/support/alt/alt.js: Added.
+        (reg_url):
+        * web-platform-tests/css/css-properties-values-api/support/alt/w3c-import.log: Added.
+        * web-platform-tests/css/css-properties-values-api/support/main/main.css: Added.
+        (#target):
+        * web-platform-tests/css/css-properties-values-api/support/main/main.js: Added.
+        (reg_url):
+        * web-platform-tests/css/css-properties-values-api/support/main/main.utf16be.css: Added.
+        * web-platform-tests/css/css-properties-values-api/support/main/w3c-import.log: Added.
+        * web-platform-tests/css/css-properties-values-api/typedom.tentative-expected.txt: Added.
+        * web-platform-tests/css/css-properties-values-api/typedom.tentative.html: Added.
+        * web-platform-tests/css/css-properties-values-api/unit-cycles-expected.txt: Added.
+        * web-platform-tests/css/css-properties-values-api/unit-cycles.html: Added.
+        * web-platform-tests/css/css-properties-values-api/url-resolution-expected.txt: Added.
+        * web-platform-tests/css/css-properties-values-api/url-resolution.html: Added.
+        * web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-cycles-expected.txt: Added.
+        * web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-cycles.html: Added.
+        * web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-expected.txt: Added.
+        * web-platform-tests/css/css-properties-values-api/var-reference-registered-properties.html: Added.
+        * web-platform-tests/css/css-properties-values-api/w3c-import.log: Added.
+
 2018-09-24  Chris Dumez  <cdumez@apple.com>
 
         No-op document.open() calls should not have any side effects
index 7a730b1..d2d8279 100644 (file)
@@ -70,6 +70,7 @@
     "web-platform-tests/css/css-grid/grid-definition/": "import", 
     "web-platform-tests/css/css-logical": "import", 
     "web-platform-tests/css/css-multicol": "import", 
+    "web-platform-tests/css/css-properties-values-api": "import", 
     "web-platform-tests/css/css-pseudo": "import", 
     "web-platform-tests/css/css-scoping": "import", 
     "web-platform-tests/css/css-shapes": "import", 
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/META.yml b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/META.yml
new file mode 100644 (file)
index 0000000..38cd166
--- /dev/null
@@ -0,0 +1,4 @@
+spec: https://drafts.css-houdini.org/css-properties-values-api/
+suggested_reviewers:
+  - tabatkins
+  - astearns
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/idlharness-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/idlharness-expected.txt
new file mode 100644 (file)
index 0000000..b65f544
--- /dev/null
@@ -0,0 +1,30 @@
+
+FAIL Test IDL implementation of CSS Properties Values API promise_test: Unhandled rejection with value: object "Got an error before parsing any named definition: Unrecognised tokens, line 1 (tokens: "{\"error\": {\"message\"")
+[
+    {
+        "type": "{",
+        "value": "{",
+        "trivia": ""
+    },
+    {
+        "type": "string",
+        "value": "\"error\"",
+        "trivia": ""
+    },
+    {
+        "type": ":",
+        "value": ":",
+        "trivia": ""
+    },
+    {
+        "type": "{",
+        "value": "{",
+        "trivia": " "
+    },
+    {
+        "type": "string",
+        "value": "\"message\"",
+        "trivia": ""
+    }
+]"
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/idlharness.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/idlharness.html
new file mode 100644 (file)
index 0000000..e57f0f0
--- /dev/null
@@ -0,0 +1,20 @@
+<!doctype html>
+<title>CSS Properties Values API IDL tests</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/WebIDLParser.js"></script>
+<script src="/resources/idlharness.js"></script>
+<script>
+  "use strict";
+
+  promise_test(async () => {
+    const idl = await fetch("/interfaces/css-properties-values-api.idl").then(r => r.text());
+    const cssom = await fetch("/interfaces/cssom.idl").then(r => r.text());
+
+    const idl_array = new IdlArray();
+    idl_array.add_idls(idl);
+    idl_array.add_dependency_idls(cssom);
+    idl_array.test();
+  }, "Test IDL implementation of CSS Properties Values API");
+</script>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/property-cascade-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/property-cascade-expected.txt
new file mode 100644 (file)
index 0000000..4d90f1f
--- /dev/null
@@ -0,0 +1,4 @@
+
+FAIL Registering a property does not affect cascade inner.computedStyleMap is not a function. (In 'inner.computedStyleMap()', 'inner.computedStyleMap' is undefined)
+FAIL Registering a property does not affect parsing element.computedStyleMap is not a function. (In 'element.computedStyleMap()', 'element.computedStyleMap' is undefined)
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/property-cascade.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/property-cascade.html
new file mode 100644 (file)
index 0000000..5f0b7eb
--- /dev/null
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#the-registerproperty-function" />
+<meta name="assert" content="Verifies that registering a propety does not affect the cascade" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+
+#outer { color: rgb(1, 1, 1); }
+#inner {
+    --my-color: rgb(2, 2, 2);
+    --my-color: url(not-a-color);
+    color: var(--my-color);
+}
+
+</style>
+
+<div id=outer>
+    <div id=inner></div>
+</div>
+
+<script>
+
+test(function(){
+    // Because var(--my-color) is invalid, our color declaration should behave
+    // like color:unset, i.e. it should compute to the inherited color.
+    assert_equals(inner.computedStyleMap().get('color').toString(), 'rgb(1, 1, 1)');
+
+    CSS.registerProperty({
+        name: '--my-color',
+        syntax: '<color>',
+        initialValue: 'rgb(3, 3, 3)',
+        inherits: false
+    });
+
+    // After registering, var(--my-color) is still invalid. The important thing
+    // here is that the computed value of color is the initialValue of
+    // --my-color, and not rgb(2, 2, 2).
+    assert_equals(inner.computedStyleMap().get('color').toString(), 'rgb(3, 3, 3)');
+}, 'Registering a property does not affect cascade');
+
+test(function(){
+    CSS.registerProperty({
+        name: '--my-color-2',
+        syntax: '<color>',
+        initialValue: 'rgb(4, 4, 4)',
+        inherits: false
+    });
+
+    let element = document.createElement('div');
+    element.style = `
+        --my-color-2: rgb(2, 2, 2);
+        --my-color-2: url(not-a-color);
+        color: var(--my-color-2);
+    `;
+
+    outer.appendChild(element);
+
+    assert_equals(element.computedStyleMap().get('color').toString(), 'rgb(4, 4, 4)');
+}, 'Registering a property does not affect parsing');
+
+
+</script>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/register-property-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/register-property-expected.txt
new file mode 100644 (file)
index 0000000..567db31
--- /dev/null
@@ -0,0 +1,7 @@
+
+PASS registerProperty requires a Dictionary type 
+FAIL registerProperty requires a name matching <custom-property-name> assert_throws: function "() => CSS.registerProperty({name: 'no-leading-dash', inherits: false})" did not throw
+FAIL registerProperty only allows omitting initialValue if syntax is '*' assert_throws: function "() => CSS.registerProperty({name: '--syntax-test-3', syntax: 'length', inherits: false})" did not throw
+PASS registerProperty fails for an already registered property 
+PASS registerProperty requires inherits 
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/register-property-syntax-parsing-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/register-property-syntax-parsing-expected.txt
new file mode 100644 (file)
index 0000000..db56ca8
--- /dev/null
@@ -0,0 +1,132 @@
+
+PASS syntax:'*', initialValue:'a' is valid 
+PASS syntax:' * ', initialValue:'b' is valid 
+PASS syntax:'<length>', initialValue:'2px' is valid 
+PASS syntax:' <number>', initialValue:'5' is valid 
+PASS syntax:'<percentage> ', initialValue:'10%' is valid 
+PASS syntax:'<color>+', initialValue:'red' is valid 
+PASS syntax:' <length>+ | <percentage>', initialValue:'2px 8px' is valid 
+PASS syntax:'<length>|<percentage>|<length-percentage>', initialValue:'2px' is valid 
+PASS syntax:'<color> | <image> | <url> | <integer> | <angle>', initialValue:'red' is valid 
+PASS syntax:'<time> | <resolution> | <transform-list> | <custom-ident>', initialValue:'red' is valid 
+PASS syntax:'*', initialValue:':> hello' is valid 
+PASS syntax:'*', initialValue:'([ brackets ]) { yay (??)}' is valid 
+PASS syntax:'*', initialValue:'yep 'this is valid too'' is valid 
+PASS syntax:'*', initialValue:'unmatched opening bracket is valid :(' is valid 
+PASS syntax:'*', initialValue:'"' is valid 
+PASS syntax:'<length>', initialValue:'0' is valid 
+PASS syntax:'<length>', initialValue:'10px /*:)*/' is valid 
+PASS syntax:'<length>', initialValue:' calc(-2px)' is valid 
+PASS syntax:'<length>', initialValue:'calc(2px*4 + 10px)' is valid 
+PASS syntax:'<length>', initialValue:'7.1e-4cm' is valid 
+PASS syntax:'<length>', initialValue:'calc(7in - 12px)' is valid 
+PASS syntax:'<length>+', initialValue:'2px 7px calc(8px)' is valid 
+PASS syntax:'<percentage>', initialValue:'-9.3e3%' is valid 
+PASS syntax:'<length-percentage>', initialValue:'-54%' is valid 
+PASS syntax:'<length-percentage>', initialValue:'0' is valid 
+PASS syntax:'<length-percentage>', initialValue:'calc(-11px + 10.4%)' is valid 
+PASS syntax:'<number>', initialValue:'-109' is valid 
+PASS syntax:'<number>', initialValue:'2.3e4' is valid 
+PASS syntax:'<integer>', initialValue:'-109' is valid 
+PASS syntax:'<integer>', initialValue:'19' is valid 
+PASS syntax:'<angle>', initialValue:'10deg' is valid 
+PASS syntax:'<angle>', initialValue:'20.5rad' is valid 
+PASS syntax:'<angle>', initialValue:'calc(50grad + 3.14159rad)' is valid 
+PASS syntax:'<time>', initialValue:'2s' is valid 
+PASS syntax:'<time>', initialValue:'calc(2s - 9ms)' is valid 
+PASS syntax:'<resolution>', initialValue:'10dpi' is valid 
+PASS syntax:'<resolution>', initialValue:'3dPpX' is valid 
+PASS syntax:'<resolution>', initialValue:'-5.3dpcm' is valid 
+PASS syntax:'<transform-function>', initialValue:'translateX(2px)' is valid 
+PASS syntax:'<transform-function>|<integer>', initialValue:'5' is valid 
+PASS syntax:'<transform-function>|<integer>', initialValue:'scale(2)' is valid 
+PASS syntax:'<transform-function>+', initialValue:'translateX(2px) rotate(42deg)' is valid 
+PASS syntax:'<transform-list>', initialValue:'scale(2)' is valid 
+PASS syntax:'<transform-list>', initialValue:'translateX(2px) rotate(20deg)' is valid 
+PASS syntax:'<color>', initialValue:'rgb(12, 34, 56)' is valid 
+PASS syntax:'<color>', initialValue:'lightgoldenrodyellow' is valid 
+PASS syntax:'<image>', initialValue:'url(a)' is valid 
+PASS syntax:'<image>', initialValue:'linear-gradient(yellow, blue)' is valid 
+PASS syntax:'<url>', initialValue:'url(a)' is valid 
+PASS syntax:'banana', initialValue:'banana' is valid 
+PASS syntax:'bAnAnA', initialValue:'bAnAnA' is valid 
+PASS syntax:'ba-na-nya', initialValue:'ba-na-nya' is valid 
+PASS syntax:'banana', initialValue:'banan\61' is valid 
+PASS syntax:'<custom-ident>', initialValue:'banan\61' is valid 
+PASS syntax:'big | bigger | BIGGER', initialValue:'bigger' is valid 
+PASS syntax:'foo+|bar', initialValue:'foo foo foo' is valid 
+PASS syntax:'default', initialValue:'default' is valid 
+PASS syntax:'banana    ', initialValue:'banana' is valid 
+PASS syntax:'
+banana\r
+', initialValue:'banana' is valid 
+PASS syntax:'ba\f
+|      na\r|nya', initialValue:'nya' is valid 
+PASS syntax:'null', initialValue:'null' is valid 
+PASS syntax:'undefined', initialValue:'undefined' is valid 
+PASS syntax:'array', initialValue:'array' is valid 
+FAIL syntax:'banana,nya', initialValue:'banana' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'banan\61', initialValue:'banana' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<\6c ength>', initialValue:'10px' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<banana>', initialValue:'banana' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<Number>', initialValue:'10' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length', initialValue:'10px' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<LENGTH>', initialValue:'10px' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'< length>', initialValue:'10px' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length >', initialValue:'10px' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length> +', initialValue:'10px' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length>++', initialValue:'10px' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length> | *', initialValue:'10px' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'*|banana', initialValue:'banana' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'*+', initialValue:'banana' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'initial', initialValue:'initial' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'inherit', initialValue:'inherit' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'unset', initialValue:'unset' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length>|initial', initialValue:'10px' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length>|INHERIT', initialValue:'10px' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<percentage>|unsEt', initialValue:'2%' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'*', initialValue:'initial' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'*', initialValue:'inherit' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'*', initialValue:'unset' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'*', initialValue:'revert' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<custom-ident>', initialValue:'initial' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<custom-ident>+', initialValue:'foo inherit bar' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'*', initialValue:')' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'*', initialValue:'([)]' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'*', initialValue:'whee!' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'*', initialValue:'"
+' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'*', initialValue:'url(moo '')' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'*', initialValue:'semi;colon' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'*', initialValue:'var(invalid var ref)' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'*', initialValue:'var(--foo)' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'banana', initialValue:'bAnAnA' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length>', initialValue:'var(--moo)' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length>', initialValue:'10' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length>', initialValue:'10%' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length>', initialValue:'calc(5px + 10%)' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length>', initialValue:'calc(5px * 3px / 6px)' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length>', initialValue:'10em' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length>', initialValue:'10vmin' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length>', initialValue:'calc(4px + 3em)' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length>', initialValue:'calc(4px + calc(8 * 2em))' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length>+', initialValue:'calc(2ex + 16px)' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length>+', initialValue:'10px calc(20px + 4rem)' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<percentage> | <length>+', initialValue:'calc(100vh - 10px) 30px' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length>', initialValue:'10px;' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<length-percentage>', initialValue:'calc(2px + 10% + 7ex)' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<percentage>', initialValue:'0' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<integer>', initialValue:'1.0' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<integer>', initialValue:'1e0' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<number>|foo', initialValue:'foo var(--foo, bla)' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<angle>', initialValue:'0' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<angle>', initialValue:'10%' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<time>', initialValue:'2px' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<resolution>', initialValue:'10' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<transform-function>', initialValue:'scale()' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<transform-list>', initialValue:'scale()' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<transform-list>+', initialValue:'translateX(2px) rotate(20deg)' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<color>', initialValue:'fancy-looking' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<image>', initialValue:'banana.png' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+FAIL syntax:'<url>', initialValue:'banana.png' is invalid assert_throws: function "() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false})" did not throw
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/register-property-syntax-parsing.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/register-property-syntax-parsing.html
new file mode 100644 (file)
index 0000000..15a4ab6
--- /dev/null
@@ -0,0 +1,168 @@
+<!DOCTYPE HTML>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#dom-css-registerproperty" />
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#supported-syntax-strings" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+test_count = 0;
+
+function assert_valid(syntax, initialValue) {
+    // No actual assertions, this just shouldn't throw
+    test(function() {
+        var name = '--syntax-test-' + (test_count++);
+        CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false});
+    }, "syntax:'" + syntax + "', initialValue:'" + initialValue + "' is valid");
+}
+
+function assert_invalid(syntax, initialValue) {
+    test(function(){
+        var name = '--syntax-test-' + (test_count++);
+        assert_throws(new SyntaxError(),
+            () => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false}));
+    }, "syntax:'" + syntax + "', initialValue:'" + initialValue + "' is invalid");
+}
+
+assert_valid("*", "a");
+assert_valid(" * ", "b");
+assert_valid("<length>", "2px");
+assert_valid(" <number>", "5");
+assert_valid("<percentage> ", "10%");
+assert_valid("<color>+", "red");
+assert_valid(" <length>+ | <percentage>", "2px 8px");
+assert_valid("<length>|<percentage>|<length-percentage>", "2px"); // Valid but silly
+assert_valid("<color> | <image> | <url> | <integer> | <angle>", "red");
+assert_valid("<time> | <resolution> | <transform-list> | <custom-ident>", "red");
+
+assert_valid("*", ":> hello");
+assert_valid("*", "([ brackets ]) { yay (??)}");
+assert_valid("*", "yep 'this is valid too'");
+assert_valid("*", "unmatched opening bracket is valid :(");
+assert_valid("*", '"');
+
+assert_valid("<length>", "0");
+assert_valid("<length>", "10px /*:)*/");
+assert_valid("<length>", " calc(-2px)");
+assert_valid("<length>", "calc(2px*4 + 10px)");
+assert_valid("<length>", "7.1e-4cm");
+assert_valid("<length>", "calc(7in - 12px)");
+assert_valid("<length>+", "2px 7px calc(8px)");
+assert_valid("<percentage>", "-9.3e3%");
+assert_valid("<length-percentage>", "-54%");
+assert_valid("<length-percentage>", "0");
+assert_valid("<length-percentage>", "calc(-11px + 10.4%)");
+
+assert_valid("<number>", "-109");
+assert_valid("<number>", "2.3e4");
+assert_valid("<integer>", "-109");
+assert_valid("<integer>", "19");
+
+assert_valid("<angle>", "10deg");
+assert_valid("<angle>", "20.5rad");
+assert_valid("<angle>", "calc(50grad + 3.14159rad)");
+assert_valid("<time>", "2s");
+assert_valid("<time>", "calc(2s - 9ms)");
+assert_valid("<resolution>", "10dpi");
+assert_valid("<resolution>", "3dPpX");
+assert_valid("<resolution>", "-5.3dpcm");
+assert_valid("<transform-function>", "translateX(2px)");
+assert_valid("<transform-function>|<integer>", "5");
+assert_valid("<transform-function>|<integer>", "scale(2)");
+assert_valid("<transform-function>+", "translateX(2px) rotate(42deg)");
+assert_valid("<transform-list>", "scale(2)");
+assert_valid("<transform-list>", "translateX(2px) rotate(20deg)");
+
+assert_valid("<color>", "rgb(12, 34, 56)");
+assert_valid("<color>", "lightgoldenrodyellow");
+assert_valid("<image>", "url(a)");
+assert_valid("<image>", "linear-gradient(yellow, blue)");
+assert_valid("<url>", "url(a)");
+
+assert_valid("banana", "banana");
+assert_valid("bAnAnA", "bAnAnA");
+assert_valid("ba-na-nya", "ba-na-nya");
+assert_valid("banana", "banan\\61");
+assert_valid("<custom-ident>", "banan\\61");
+assert_valid("big | bigger | BIGGER", "bigger");
+assert_valid("foo+|bar", "foo foo foo");
+assert_valid("default", "default");
+
+assert_valid("banana\t", "banana");
+assert_valid("\nbanana\r\n", "banana");
+assert_valid("ba\f\n|\tna\r|nya", "nya");
+
+assert_valid(null, "null");
+assert_valid(undefined, "undefined");
+assert_valid(["array"], "array");
+
+// Invalid syntax
+assert_invalid("banana,nya", "banana");
+assert_invalid("banan\\61", "banana");
+assert_invalid("<\\6c ength>", "10px");
+assert_invalid("<banana>", "banana");
+assert_invalid("<Number>", "10");
+assert_invalid("<length", "10px");
+assert_invalid("<LENGTH>", "10px");
+assert_invalid("< length>", "10px");
+assert_invalid("<length >", "10px");
+assert_invalid("<length> +", "10px");
+
+assert_invalid("<length>++", "10px");
+assert_invalid("<length> | *", "10px");
+assert_invalid("*|banana", "banana");
+assert_invalid("*+", "banana");
+
+assert_invalid("initial", "initial");
+assert_invalid("inherit", "inherit");
+assert_invalid("unset", "unset");
+assert_invalid("<length>|initial", "10px");
+assert_invalid("<length>|INHERIT", "10px");
+assert_invalid("<percentage>|unsEt", "2%");
+
+// Invalid initialValue
+assert_invalid("*", "initial");
+assert_invalid("*", "inherit");
+assert_invalid("*", "unset");
+assert_invalid("*", "revert");
+assert_invalid("<custom-ident>", "initial");
+assert_invalid("<custom-ident>+", "foo inherit bar");
+
+assert_invalid("*", ")");
+assert_invalid("*", "([)]");
+assert_invalid("*", "whee!");
+assert_invalid("*", '"\n');
+assert_invalid("*", "url(moo '')");
+assert_invalid("*", "semi;colon");
+assert_invalid("*", "var(invalid var ref)");
+assert_invalid("*", "var(--foo)");
+
+assert_invalid("banana", "bAnAnA");
+assert_invalid("<length>", "var(--moo)");
+assert_invalid("<length>", "10");
+assert_invalid("<length>", "10%");
+assert_invalid("<length>", "calc(5px + 10%)");
+assert_invalid("<length>", "calc(5px * 3px / 6px)");
+assert_invalid("<length>", "10em");
+assert_invalid("<length>", "10vmin");
+assert_invalid("<length>", "calc(4px + 3em)");
+assert_invalid("<length>", "calc(4px + calc(8 * 2em))");
+assert_invalid("<length>+", "calc(2ex + 16px)");
+assert_invalid("<length>+", "10px calc(20px + 4rem)");
+assert_invalid("<percentage> | <length>+", "calc(100vh - 10px) 30px");
+assert_invalid("<length>", "10px;");
+assert_invalid("<length-percentage>", "calc(2px + 10% + 7ex)");
+assert_invalid("<percentage>", "0");
+assert_invalid("<integer>", "1.0");
+assert_invalid("<integer>", "1e0");
+assert_invalid("<number>|foo", "foo var(--foo, bla)");
+
+assert_invalid("<angle>", "0");
+assert_invalid("<angle>", "10%");
+assert_invalid("<time>", "2px");
+assert_invalid("<resolution>", "10");
+assert_invalid("<transform-function>", "scale()");
+assert_invalid("<transform-list>", "scale()");
+assert_invalid("<transform-list>+", "translateX(2px) rotate(20deg)");
+assert_invalid("<color>", "fancy-looking");
+assert_invalid("<image>", "banana.png");
+assert_invalid("<url>", "banana.png");
+</script>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/register-property.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/register-property.html
new file mode 100644 (file)
index 0000000..62ad236
--- /dev/null
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#register-a-custom-property" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+// Tests for error checking during property registration
+
+test(function() {
+    assert_throws(new TypeError(), () => CSS.registerProperty());
+    assert_throws(new TypeError(), () => CSS.registerProperty(undefined));
+    assert_throws(new TypeError(), () => CSS.registerProperty(true));
+    assert_throws(new TypeError(), () => CSS.registerProperty(2));
+    assert_throws(new TypeError(), () => CSS.registerProperty("css"));
+    assert_throws(new TypeError(), () => CSS.registerProperty(null));
+}, "registerProperty requires a Dictionary type");
+
+test(function() {
+    // Valid property names, shouldn't throw
+    CSS.registerProperty({name: '--name1', inherits: false});
+    CSS.registerProperty({name: '--name2, no need for escapes', inherits: false});
+    CSS.registerProperty({name: ['--name', 3], inherits: false});
+
+    // Invalid property names
+    assert_throws(new TypeError(), () => CSS.registerProperty({}));
+    assert_throws(new SyntaxError(), () => CSS.registerProperty({name: 'no-leading-dash', inherits: false}));
+    assert_throws(new SyntaxError(), () => CSS.registerProperty({name: '', inherits: false}));
+    assert_throws(new SyntaxError(), () => CSS.registerProperty({name: '\\--name', inherits: false}));
+}, "registerProperty requires a name matching <custom-property-name>");
+
+test(function() {
+    CSS.registerProperty({name: '--syntax-test-1', syntax: '*', inherits: false});
+    CSS.registerProperty({name: '--syntax-test-2', syntax: ' * ', inherits: false});
+    assert_throws(new SyntaxError(),
+        () => CSS.registerProperty({name: '--syntax-test-3', syntax: 'length', inherits: false}));
+}, "registerProperty only allows omitting initialValue if syntax is '*'");
+
+test(function() {
+    CSS.registerProperty({name: '--re-register', syntax: '<length>', initialValue: '0px', inherits: false});
+    assert_throws({name: 'InvalidModificationError'},
+        () => CSS.registerProperty({name: '--re-register', syntax: '<percentage>', initialValue: '0%', inherits: false}));
+}, "registerProperty fails for an already registered property");
+
+test(function(){
+    CSS.registerProperty({name: '--inherit-test-1', syntax: '<length>', initialValue: '0px', inherits: true});
+    CSS.registerProperty({name: '--inherit-test-2', syntax: '<length>', initialValue: '0px', inherits: false});
+    assert_throws(new TypeError(), () => CSS.registerProperty({name: '--inherit-test-3', syntax: '<length>', initialValue: '0px'}));
+}, "registerProperty requires inherits");
+</script>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-properties-inheritance-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-properties-inheritance-expected.txt
new file mode 100644 (file)
index 0000000..ab06e12
--- /dev/null
@@ -0,0 +1,7 @@
+
+FAIL Registered properties are correctly inherited (or not) depending on the inherits flag. assert_equals: expected "10px" but got " 10px"
+FAIL Explicitly inheriting from a parent with an invalid value results in initial value. assert_equals: expected "0px" but got " notalength"
+FAIL Explicitly inheriting from a parent with no value results in initial value. assert_equals: expected "0px" but got ""
+FAIL Reference to undefined variable results in inherited value assert_equals: expected "42px" but got ""
+FAIL Reference to syntax-incompatible variable results in inherited value assert_equals: expected "42px" but got "  nolength"
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-properties-inheritance.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-properties-inheritance.html
new file mode 100644 (file)
index 0000000..8f9eafe
--- /dev/null
@@ -0,0 +1,75 @@
+<!DOCTYPE HTML>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#dom-propertydescriptor-inherits" />
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#register-a-custom-property" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+#outer {
+    --inherited-length-1: 10px;
+    --inherited-length-2: var(--non-inherited-length-1);
+    --inherited-length-3: 30px;
+    --non-inherited-length-1: 22px;
+    --non-inherited-length-3: calc(var(--non-inherited-length-2) * 10);
+}
+
+#inner {
+    --inherited-length-3: 15px;
+    --non-inherited-length-1: 40px;
+    --non-inherited-length-2: 90px;
+}
+</style>
+<div id=outer><div id=inner></div></div>
+<script>
+test(function() {
+    CSS.registerProperty({name: '--inherited-length-1', syntax: '<length>', initialValue: '1px', inherits: true});
+    CSS.registerProperty({name: '--inherited-length-2', syntax: '<length>', initialValue: '2px', inherits: true});
+    CSS.registerProperty({name: '--inherited-length-3', syntax: '<length>', initialValue: '3px', inherits: true});
+    CSS.registerProperty({name: '--non-inherited-length-1', syntax: '<length>', initialValue: '4px', inherits: false});
+    CSS.registerProperty({name: '--non-inherited-length-2', syntax: '<length>', initialValue: '5px', inherits: false});
+    CSS.registerProperty({name: '--non-inherited-length-3', syntax: '<length>', initialValue: '6px', inherits: false});
+
+    outerComputedStyle = getComputedStyle(outer);
+    assert_equals(outerComputedStyle.getPropertyValue('--inherited-length-1'), '10px');
+    assert_equals(outerComputedStyle.getPropertyValue('--inherited-length-2'), '22px');
+    assert_equals(outerComputedStyle.getPropertyValue('--inherited-length-3'), '30px');
+    assert_equals(outerComputedStyle.getPropertyValue('--non-inherited-length-1'), '22px');
+    assert_equals(outerComputedStyle.getPropertyValue('--non-inherited-length-2'), '5px');
+    assert_equals(outerComputedStyle.getPropertyValue('--non-inherited-length-3'), '50px');
+
+    innerComputedStyle = getComputedStyle(inner);
+    assert_equals(innerComputedStyle.getPropertyValue('--inherited-length-1'), '10px');
+    assert_equals(innerComputedStyle.getPropertyValue('--inherited-length-2'), '22px');
+    assert_equals(innerComputedStyle.getPropertyValue('--inherited-length-3'), '15px');
+    assert_equals(innerComputedStyle.getPropertyValue('--non-inherited-length-1'), '40px');
+    assert_equals(innerComputedStyle.getPropertyValue('--non-inherited-length-2'), '90px');
+    assert_equals(innerComputedStyle.getPropertyValue('--non-inherited-length-3'), '6px');
+}, "Registered properties are correctly inherited (or not) depending on the inherits flag.");
+
+test(function(){
+    CSS.registerProperty({name: '--initial-length-1', syntax: '<length>', initialValue: '0px', inherits: false});
+    outer.style = '--initial-length-1: notalength';
+    inner.style = '--initial-length-1: inherit';
+    assert_equals(getComputedStyle(inner).getPropertyValue('--initial-length-1'), '0px');
+}, "Explicitly inheriting from a parent with an invalid value results in initial value.");
+
+test(function(){
+    CSS.registerProperty({name: '--initial-length-2', syntax: '<length>', initialValue: '0px', inherits: false});
+    inner.style = '--initial-length-2: inherit';
+    assert_equals(getComputedStyle(inner).getPropertyValue('--initial-length-2'), '0px');
+}, "Explicitly inheriting from a parent with no value results in initial value.");
+
+test(function(){
+    CSS.registerProperty({name: '--inherited-length-4', syntax: '<length>', initialValue: '0px', inherits: true});
+    outer.style = '--inherited-length-4: 42px';
+    inner.style = '--inherited-length-4: var(--undefined)';
+    assert_equals(getComputedStyle(inner).getPropertyValue('--inherited-length-4'), '42px');
+}, "Reference to undefined variable results in inherited value");
+
+test(function(){
+    CSS.registerProperty({name: '--inherited-length-5', syntax: '<length>', initialValue: '0px', inherits: true});
+    outer.style = '--inherited-length-5: 42px';
+    inner.style = '--incompatible: nolength; --inherited-length-5: var(--incompatible)';
+    assert_equals(getComputedStyle(inner).getPropertyValue('--inherited-length-5'), '42px');
+}, "Reference to syntax-incompatible variable results in inherited value");
+
+</script>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-computation-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-computation-expected.txt
new file mode 100644 (file)
index 0000000..c918c4d
--- /dev/null
@@ -0,0 +1,17 @@
+
+PASS CSS.registerProperty 
+FAIL <length> values are computed correctly for divWithFontSizeSet assert_equals: expected "12px" but got " 12px"
+FAIL <length-percentage> values are computed correctly for divWithFontSizeSet assert_equals: expected "170px" but got " 17em"
+FAIL <length># values are computed correctly for divWithFontSizeSet assert_equals: expected "10px, 30px" but got " 10px, 3em"
+FAIL <length-percentage># values are computed correctly for divWithFontSizeSet assert_equals: expected "3%, 80px, 22px" but got " 3% , 10vmax , 22px"
+FAIL <length>+ values are computed correctly for divWithFontSizeSet assert_equals: expected "10px 30px" but got " 10px 3em"
+FAIL <length-percentage>+ values are computed correctly for divWithFontSizeSet assert_equals: expected "3% 80px 22px" but got " 3% 10vmax 22px"
+FAIL <transform-function> values are computed correctly for divWithFontSizeSet assert_equals: expected "translateX(2px)" but got " translateX(2px)"
+FAIL <length> values are computed correctly for divWithFontSizeInherited assert_equals: expected "12px" but got " 12px"
+FAIL <length-percentage> values are computed correctly for divWithFontSizeInherited assert_equals: expected "170px" but got " 17em"
+FAIL <length># values are computed correctly for divWithFontSizeInherited assert_equals: expected "10px, 30px" but got " 10px, 3em"
+FAIL <length-percentage># values are computed correctly for divWithFontSizeInherited assert_equals: expected "3%, 80px, 22px" but got " 3% , 10vmax , 22px"
+FAIL <length>+ values are computed correctly for divWithFontSizeInherited assert_equals: expected "10px 30px" but got " 10px 3em"
+FAIL <length-percentage>+ values are computed correctly for divWithFontSizeInherited assert_equals: expected "3% 80px 22px" but got " 3% 10vmax 22px"
+FAIL <transform-function> values are computed correctly for divWithFontSizeInherited assert_equals: expected "translateX(2px)" but got " translateX(2px)"
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-computation.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-computation.html
new file mode 100644 (file)
index 0000000..30d6b4b
--- /dev/null
@@ -0,0 +1,117 @@
+<!DOCTYPE HTML>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#calculation-of-computed-values" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+#divWithFontSizeSet, #parentDiv {
+    font-size: 10px;
+}
+#divWithFontSizeSet, #divWithFontSizeInherited {
+    --length-1: 12px;
+    --length-2: 13vw;
+    --length-3: 14em;
+    --length-4: 15vmin;
+    --length-5: calc(16px - 7em + 10vh);
+    --length-6: var(--length-3);
+    --length-percentage-1: 17em;
+    --length-percentage-2: 18%;
+    --length-percentage-3: calc(19em - 2%);
+    --csv-1: 10px, 3em;
+    --csv-2: 4em ,9px;
+    --csv-3: 8em;
+    --csv-4: 3% , 10vmax  , 22px;
+    --csv-5: calc(50% + 1em), 4px;
+    --csv-6: calc(13% + 37px);
+    --list-1: 10px 3em;
+    --list-2: 4em 9px;
+    --list-3: 3% 10vmax 22px;
+    --list-4: calc(50% + 1em) 4px;
+    --transform-function-1: translateX(2px);
+    --transform-function-2: translateX(10em);
+    --transform-function-3: translateX(calc(11em + 10%));
+    --transform-function-4: translateX(10%) scale(2);
+}
+</style>
+
+<div id=divWithFontSizeSet></div>
+<div id=parentDiv>
+    <div id=divWithFontSizeInherited></div>
+</div>
+
+<script>
+test(() => {
+    CSS.registerProperty({name: '--length-1', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--length-2', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--length-3', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--length-4', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--length-5', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--length-6', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--length-percentage-1', syntax: '<length-percentage>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--length-percentage-2', syntax: '<length-percentage>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--length-percentage-3', syntax: '<length-percentage>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--csv-1', syntax: '<length>#', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--csv-2', syntax: '<length>#', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--csv-3', syntax: '<length>#', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--csv-4', syntax: '<length-percentage>#', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--csv-5', syntax: '<length-percentage>#', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--csv-6', syntax: '<length-percentage>#', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--list-1', syntax: '<length>+', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--list-2', syntax: '<length>+', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--list-3', syntax: '<length-percentage>+', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--list-4', syntax: '<length-percentage>+', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--transform-function-1', syntax: '<transform-function>', initialValue: 'translateX(0px)', inherits: false});
+    CSS.registerProperty({name: '--transform-function-2', syntax: '<transform-function>', initialValue: 'translateX(0px)', inherits: false});
+    CSS.registerProperty({name: '--transform-function-3', syntax: '<transform-function>', initialValue: 'translateX(0px)', inherits: false});
+    CSS.registerProperty({name: '--transform-function-4', syntax: '<transform-function>+', initialValue: 'translateX(0px)', inherits: false});
+}, "CSS.registerProperty");
+
+for (var element of [divWithFontSizeSet, divWithFontSizeInherited]) {
+    var id = element.id;
+    var computedStyle = getComputedStyle(element);
+
+    test(function() {
+        assert_equals(computedStyle.getPropertyValue('--length-1'), '12px');
+        assert_equals(computedStyle.getPropertyValue('--length-2'), '104px');
+        assert_equals(computedStyle.getPropertyValue('--length-3'), '140px');
+        assert_equals(computedStyle.getPropertyValue('--length-4'), '90px');
+        assert_equals(computedStyle.getPropertyValue('--length-5'), '6px');
+        assert_equals(computedStyle.getPropertyValue('--length-6'), '140px');
+    }, "<length> values are computed correctly for " + id);
+
+    test(function() {
+        assert_equals(computedStyle.getPropertyValue('--length-percentage-1'), '170px');
+        assert_equals(computedStyle.getPropertyValue('--length-percentage-2'), '18%');
+        assert_equals(computedStyle.getPropertyValue('--length-percentage-3'), 'calc(190px + -2%)');
+    }, "<length-percentage> values are computed correctly for " + id);
+
+    test(function() {
+        assert_equals(computedStyle.getPropertyValue('--csv-1'), '10px, 30px');
+        assert_equals(computedStyle.getPropertyValue('--csv-2'), '40px, 9px');
+        assert_equals(computedStyle.getPropertyValue('--csv-3'), '80px');
+    }, "<length># values are computed correctly for " + id);
+
+    test(function() {
+        assert_equals(computedStyle.getPropertyValue('--csv-4'), '3%, 80px, 22px');
+        assert_equals(computedStyle.getPropertyValue('--csv-5'), 'calc(10px + 50%), 4px');
+        assert_equals(computedStyle.getPropertyValue('--csv-6'), 'calc(37px + 13%)');
+    }, "<length-percentage># values are computed correctly for " + id);
+
+    test(function() {
+        assert_equals(computedStyle.getPropertyValue('--list-1'), '10px 30px');
+        assert_equals(computedStyle.getPropertyValue('--list-2'), '40px 9px');
+    }, "<length>+ values are computed correctly for " + id);
+
+    test(function() {
+        assert_equals(computedStyle.getPropertyValue('--list-3'), '3% 80px 22px');
+        assert_equals(computedStyle.getPropertyValue('--list-4'), 'calc(10px + 50%) 4px');
+    }, "<length-percentage>+ values are computed correctly for " + id);
+
+    test(function() {
+        assert_equals(computedStyle.getPropertyValue('--transform-function-1'), 'translateX(2px)');
+        assert_equals(computedStyle.getPropertyValue('--transform-function-2'), 'translateX(100px)');
+        assert_equals(computedStyle.getPropertyValue('--transform-function-3'), 'translateX(calc(110px + 10%))');
+        assert_equals(computedStyle.getPropertyValue('--transform-function-4'), 'translateX(10%) scale(2)');
+    }, "<transform-function> values are computed correctly for " + id);
+}
+</script>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-cssom-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-cssom-expected.txt
new file mode 100644 (file)
index 0000000..b009c68
--- /dev/null
@@ -0,0 +1,9 @@
+
+PASS CSSOM setters function as expected for unregistered properties 
+PASS CSS.registerProperty 
+FAIL Formerly valid values are still readable from inline styles but are computed as the unset value assert_equals: expected "0px" but got "5"
+FAIL Values not matching the registered type can't be set assert_equals: expected "5" but got "hi"
+FAIL Values can be removed from inline styles assert_equals: expected "10px" but got " 10px"
+FAIL Stylesheets can be modified by CSSOM assert_equals: expected "10px" but got "banana"
+FAIL Valid values can be set on inline styles assert_equals: expected "blue" but got " blue"
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-cssom.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-cssom.html
new file mode 100644 (file)
index 0000000..019778e
--- /dev/null
@@ -0,0 +1,88 @@
+<!DOCTYPE HTML>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#dom-css-registerproperty" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+#inner {
+  --length: 10px;
+  --color: red;
+}
+#outer {
+  --length: 77px;
+  --color: blue;
+}
+</style>
+
+<div id=outer>
+  <div id=inner></div>
+</div>
+
+<script>
+var computedStyle = getComputedStyle(inner);
+var inlineStyle = inner.style;
+var sheetStyle = document.styleSheets[0].cssRules[0].style;
+
+test(function() {
+  // Nothing registered yet, whatever you specify works
+  assert_equals(computedStyle.getPropertyValue('--length'), ' 10px');
+  assert_equals(computedStyle.getPropertyValue('--color'), ' red');
+
+  inlineStyle.setProperty('--length', '5');
+  inlineStyle.setProperty('--color', 'hello');
+
+  assert_equals(inlineStyle.getPropertyValue('--length'), '5');
+  assert_equals(inlineStyle.getPropertyValue('--color'), 'hello');
+  assert_equals(computedStyle.getPropertyValue('--length'), '5');
+  assert_equals(computedStyle.getPropertyValue('--color'), 'hello');
+}, "CSSOM setters function as expected for unregistered properties");
+
+test(function() {
+  CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: '0px', inherits: false});
+  CSS.registerProperty({name: '--color', syntax: '<color>', initialValue: 'white', inherits: true});
+}, "CSS.registerProperty");
+
+test(function() {
+  assert_equals(inlineStyle.getPropertyValue('--length'), '5');
+  assert_equals(inlineStyle.getPropertyValue('--color'), 'hello');
+  assert_equals(computedStyle.getPropertyValue('--length'), '0px');
+  assert_equals(computedStyle.getPropertyValue('--color'), 'blue');
+}, "Formerly valid values are still readable from inline styles but are computed as the unset value");
+
+test(function() {
+  inlineStyle.setProperty('--length', 'hi');
+  inlineStyle.setProperty('--color', '20');
+  assert_equals(inlineStyle.getPropertyValue('--length'), '5');
+  assert_equals(inlineStyle.getPropertyValue('--color'), 'hello');
+}, "Values not matching the registered type can't be set");
+
+test(function() {
+  inlineStyle.removeProperty('--length');
+  inlineStyle.setProperty('--color', '');
+  assert_equals(inlineStyle.getPropertyValue('--length'), '');
+  assert_equals(inlineStyle.getPropertyValue('--color'), '');
+  assert_equals(computedStyle.getPropertyValue('--length'), '10px');
+  assert_equals(computedStyle.getPropertyValue('--color'), 'red');
+}, "Values can be removed from inline styles");
+
+test(function() {
+  sheetStyle.setProperty('--length', 'banana'); // Invalid, no change
+  assert_equals(computedStyle.getPropertyValue('--length'), '10px');
+  sheetStyle.setProperty('--length', '20px');
+  assert_equals(computedStyle.getPropertyValue('--length'), '20px');
+  sheetStyle.setProperty('--length', 'initial');
+  assert_equals(computedStyle.getPropertyValue('--length'), '0px');
+}, "Stylesheets can be modified by CSSOM");
+
+test(function() {
+  inlineStyle.setProperty('--length', '30px');
+  inlineStyle.setProperty('--color', 'pink');
+  assert_equals(inlineStyle.getPropertyValue('--length'), '30px');
+  assert_equals(inlineStyle.getPropertyValue('--color'), 'pink');
+  assert_equals(computedStyle.getPropertyValue('--length'), '30px');
+  assert_equals(computedStyle.getPropertyValue('--color'), 'pink');
+  inlineStyle.setProperty('--color', 'inherit');
+  assert_equals(inlineStyle.getPropertyValue('--color'), 'inherit');
+  assert_equals(computedStyle.getPropertyValue('--color'), 'blue');
+}, "Valid values can be set on inline styles");
+</script>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-initial-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-initial-expected.txt
new file mode 100644 (file)
index 0000000..99e4461
--- /dev/null
@@ -0,0 +1,3 @@
+
+FAIL Initial values of registered properties can be referenced when no custom properties are explicitly set. assert_equals: expected "25px" but got "calc(10px + 15px)"
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-initial.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-initial.html
new file mode 100644 (file)
index 0000000..d655af6
--- /dev/null
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#dom-propertydescriptor-initialvalue" />
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#register-a-custom-property" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+#target {
+  background: var(--inherited-color);
+  color: var(--non-inherited-color);
+}
+</style>
+<div id=target></div>
+<script>
+test(function() {
+    CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: 'calc(10px + 15px)', inherits: false});
+    CSS.registerProperty({name: '--length-percentage', syntax: '<length-percentage>', initialValue: 'calc(1in + 10% + 4px)', inherits: false});
+    CSS.registerProperty({name: '--inherited-color', syntax: '<color>', initialValue: 'pink', inherits: true});
+    CSS.registerProperty({name: '--non-inherited-color', syntax: '<color>', initialValue: 'purple', inherits: false});
+    CSS.registerProperty({name: '--transform-function', syntax: '<transform-function>', initialValue: 'rotate(42deg)', inherits: false});
+    CSS.registerProperty({name: '--single-transform-list', syntax: '<transform-list>', initialValue: 'scale(calc(2 + 2))', inherits: false});
+    CSS.registerProperty({name: '--multiple-transform-list', syntax: '<transform-list>', initialValue: 'scale(calc(2 + 1)) translateX(calc(3px + 1px))', inherits: false});
+
+    computedStyle = getComputedStyle(target);
+    assert_equals(computedStyle.getPropertyValue('--length'), '25px');
+    assert_equals(computedStyle.getPropertyValue('--length-percentage'), 'calc(100px + 10%)');
+    assert_equals(computedStyle.getPropertyValue('--inherited-color'), 'pink');
+    assert_equals(computedStyle.getPropertyValue('--non-inherited-color'), 'purple');
+    assert_equals(computedStyle.getPropertyValue('--transform-function'), 'rotate(42deg)');
+    assert_equals(computedStyle.getPropertyValue('--single-transform-list'), 'scale(4)');
+    assert_equals(computedStyle.getPropertyValue('--multiple-transform-list'), 'scale(3) translateX(4px)');
+
+    assert_equals(computedStyle.backgroundColor, 'rgb(255, 192, 203)');
+    assert_equals(computedStyle.color, 'rgb(128, 0, 128)');
+}, "Initial values of registered properties can be referenced when no custom properties are explicitly set.");
+</script>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/alt/alt.css b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/alt/alt.css
new file mode 100644 (file)
index 0000000..aeb6ad5
--- /dev/null
@@ -0,0 +1,4 @@
+#target {
+  --reg-alt-non-inherited-url: url(foo.jpg);
+  --reg-alt-non-inherited-func: url("foo.jpg");
+}
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/alt/alt.js b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/alt/alt.js
new file mode 100644 (file)
index 0000000..f25e18b
--- /dev/null
@@ -0,0 +1,11 @@
+function reg_url(name, inherits) {
+    CSS.registerProperty({
+        name: name,
+        syntax: '<url> | none',
+        inherits: inherits,
+        initialValue: 'none'
+    });
+}
+
+reg_url('--reg-alt-non-inherited-url', false);
+reg_url('--reg-alt-non-inherited-func', false);
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/alt/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/alt/w3c-import.log
new file mode 100644 (file)
index 0000000..7f6c8be
--- /dev/null
@@ -0,0 +1,18 @@
+The tests in this directory were imported from the W3C repository.
+Do NOT modify these tests directly in WebKit.
+Instead, create a pull request on the WPT github:
+       https://github.com/web-platform-tests/wpt
+
+Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
+
+Do NOT modify or remove this file.
+
+------------------------------------------------------------------------
+Properties requiring vendor prefixes:
+None
+Property values requiring vendor prefixes:
+None
+------------------------------------------------------------------------
+List of files:
+/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/alt/alt.css
+/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/alt/alt.js
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/main/main.css b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/main/main.css
new file mode 100644 (file)
index 0000000..6b81abd
--- /dev/null
@@ -0,0 +1,22 @@
+#target {
+    --unreg-url: url(foo.jpg);
+    --unreg-func: url("foo.jpg");
+
+    --reg-inherited-url: url(foo.jpg);
+    --reg-non-inherited-url: url(foo.jpg);
+
+    --reg-inherited-func: url("foo.jpg");
+    --reg-non-inherited-func: url("foo.jpg");
+
+    --reg-ref-to-unreg-url: var(--unreg-url);
+    --reg-ref-to-unreg-func: var(--unreg-func);
+
+    --reg-ref-to-reg-url: var(--reg-alt-non-inherited-url);
+    --reg-ref-to-reg-func: var(--reg-alt-non-inherited-func);
+
+    --unreg-ref-to-reg-url: var(--reg-alt-non-inherited-url);
+    --unreg-ref-to-reg-func: var(--reg-alt-non-inherited-func);
+
+    --unreg-multi-ref-to-reg-urls: var(--reg-non-inherited-url), var(--reg-alt-non-inherited-url);
+    --unreg-multi-ref-to-reg-funcs: var(--reg-non-inherited-func), var(--reg-alt-non-inherited-func);
+}
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/main/main.js b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/main/main.js
new file mode 100644 (file)
index 0000000..169ed7b
--- /dev/null
@@ -0,0 +1,25 @@
+function reg_url(name, inherits) {
+    CSS.registerProperty({
+        name: name,
+        syntax: '<url> | none',
+        inherits: inherits,
+        initialValue: 'none'
+    });
+}
+
+reg_url('--reg-non-inherited-url', false);
+reg_url('--reg-non-inherited-func', false);
+
+reg_url('--reg-inherited-url', true);
+reg_url('--reg-inherited-func', true);
+
+reg_url('--reg-ref-to-unreg-url', false);
+reg_url('--reg-ref-to-unreg-func', false);
+
+reg_url('--reg-ref-to-reg-url', false);
+reg_url('--reg-ref-to-reg-func', false);
+
+reg_url('--reg-merged-func', false);
+
+reg_url('--reg-utf16be-url', false);
+reg_url('--reg-utf16be-func', false);
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/main/main.utf16be.css b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/main/main.utf16be.css
new file mode 100644 (file)
index 0000000..26485da
Binary files /dev/null and b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/main/main.utf16be.css differ
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/main/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/main/w3c-import.log
new file mode 100644 (file)
index 0000000..0fce54f
--- /dev/null
@@ -0,0 +1,19 @@
+The tests in this directory were imported from the W3C repository.
+Do NOT modify these tests directly in WebKit.
+Instead, create a pull request on the WPT github:
+       https://github.com/web-platform-tests/wpt
+
+Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
+
+Do NOT modify or remove this file.
+
+------------------------------------------------------------------------
+Properties requiring vendor prefixes:
+None
+Property values requiring vendor prefixes:
+None
+------------------------------------------------------------------------
+List of files:
+/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/main/main.css
+/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/main/main.js
+/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/support/main/main.utf16be.css
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/typedom.tentative-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/typedom.tentative-expected.txt
new file mode 100644 (file)
index 0000000..1213922
--- /dev/null
@@ -0,0 +1,69 @@
+CONSOLE MESSAGE: line 340: ReferenceError: Can't find variable: CSSUnparsedValue
+
+Harness Error (FAIL), message = ReferenceError: Can't find variable: CSSUnparsedValue
+
+FAIL Computed * is reified as CSSUnparsedValue target.computedStyleMap is not a function. (In 'target.computedStyleMap()', 'target.computedStyleMap' is undefined)
+FAIL Computed <angle> is reified as CSSUnitValue Can't find variable: CSSUnitValue
+FAIL Computed <color> is reified as CSSStyleValue Can't find variable: CSSStyleValue
+FAIL Computed <custom-ident> is reified as CSSKeywordValue Can't find variable: CSSKeywordValue
+FAIL Computed <image> [url] is reified as CSSImageValue Can't find variable: CSSImageValue
+FAIL Computed <integer> is reified as CSSUnitValue Can't find variable: CSSUnitValue
+FAIL Computed <length-percentage> [%] is reified as CSSUnitValue Can't find variable: CSSUnitValue
+FAIL Computed <length-percentage> [px] is reified as CSSUnitValue Can't find variable: CSSUnitValue
+FAIL Computed <length-percentage> [px + %] is reified as CSSMathSum Can't find variable: CSSMathSum
+FAIL Computed <length> is reified as CSSUnitValue Can't find variable: CSSUnitValue
+FAIL Computed <number> is reified as CSSUnitValue Can't find variable: CSSUnitValue
+FAIL Computed <percentage> is reified as CSSUnitValue Can't find variable: CSSUnitValue
+FAIL Computed <resolution> is reified as CSSUnitValue Can't find variable: CSSUnitValue
+FAIL Computed <time> is reified as CSSUnitValue Can't find variable: CSSUnitValue
+FAIL Computed <url> is reified as CSSStyleValue Can't find variable: CSSStyleValue
+FAIL Computed ident is reified as CSSKeywordValue Can't find variable: CSSKeywordValue
+FAIL First computed value correctly reified in space-separated list Can't find variable: CSSUnitValue
+FAIL First computed value correctly reified in comma-separated list Can't find variable: CSSUnitValue
+FAIL All computed values correctly reified in space-separated list target.computedStyleMap is not a function. (In 'target.computedStyleMap()', 'target.computedStyleMap' is undefined)
+FAIL All computed values correctly reified in comma-separated list target.computedStyleMap is not a function. (In 'target.computedStyleMap()', 'target.computedStyleMap' is undefined)
+FAIL attributeStyleMap.get returns CSSUnparsedValue for value with var references undefined is not an object (evaluating 'target.attributeStyleMap.clear')
+FAIL styleMap.get returns CSSUnparsedValue for value with var references undefined is not an object (evaluating 'rule.styleMap.clear')
+FAIL attributeStyleMap.get returns CSSUnparsedValue for value with var references in list undefined is not an object (evaluating 'target.attributeStyleMap.clear')
+FAIL styleMap.get returns CSSUnparsedValue for value with var references in list undefined is not an object (evaluating 'rule.styleMap.clear')
+FAIL attributeStyleMap.get returns CSSUnparsedValue for * undefined is not an object (evaluating 'target.attributeStyleMap.clear')
+FAIL styleMap.get returns CSSUnparsedValue for * undefined is not an object (evaluating 'rule.styleMap.clear')
+FAIL attributeStyleMap.get returns CSSUnitValue for <angle> undefined is not an object (evaluating 'target.attributeStyleMap.clear')
+FAIL styleMap.get returns CSSUnitValue for <angle> undefined is not an object (evaluating 'rule.styleMap.clear')
+FAIL attributeStyleMap.get returns CSSStyleValue for <color> undefined is not an object (evaluating 'target.attributeStyleMap.clear')
+FAIL styleMap.get returns CSSStyleValue for <color> undefined is not an object (evaluating 'rule.styleMap.clear')
+FAIL attributeStyleMap.get returns CSSKeywordValue for <custom-ident> undefined is not an object (evaluating 'target.attributeStyleMap.clear')
+FAIL styleMap.get returns CSSKeywordValue for <custom-ident> undefined is not an object (evaluating 'rule.styleMap.clear')
+FAIL attributeStyleMap.get returns CSSImageValue for <image> undefined is not an object (evaluating 'target.attributeStyleMap.clear')
+FAIL styleMap.get returns CSSImageValue for <image> undefined is not an object (evaluating 'rule.styleMap.clear')
+FAIL attributeStyleMap.get returns CSSUnitValue for <integer> undefined is not an object (evaluating 'target.attributeStyleMap.clear')
+FAIL styleMap.get returns CSSUnitValue for <integer> undefined is not an object (evaluating 'rule.styleMap.clear')
+FAIL attributeStyleMap.get returns CSSUnitValue for <length-percentage> [10%] undefined is not an object (evaluating 'target.attributeStyleMap.clear')
+FAIL styleMap.get returns CSSUnitValue for <length-percentage> [10%] undefined is not an object (evaluating 'rule.styleMap.clear')
+FAIL attributeStyleMap.get returns CSSUnitValue for <length-percentage> [10px] undefined is not an object (evaluating 'target.attributeStyleMap.clear')
+FAIL styleMap.get returns CSSUnitValue for <length-percentage> [10px] undefined is not an object (evaluating 'rule.styleMap.clear')
+FAIL attributeStyleMap.get returns CSSMathSum for <length-percentage> [calc(10px + 10%)] undefined is not an object (evaluating 'target.attributeStyleMap.clear')
+FAIL styleMap.get returns CSSMathSum for <length-percentage> [calc(10px + 10%)] undefined is not an object (evaluating 'rule.styleMap.clear')
+FAIL attributeStyleMap.get returns CSSUnitValue for <length> undefined is not an object (evaluating 'target.attributeStyleMap.clear')
+FAIL styleMap.get returns CSSUnitValue for <length> undefined is not an object (evaluating 'rule.styleMap.clear')
+FAIL attributeStyleMap.get returns CSSUnitValue for <number> undefined is not an object (evaluating 'target.attributeStyleMap.clear')
+FAIL styleMap.get returns CSSUnitValue for <number> undefined is not an object (evaluating 'rule.styleMap.clear')
+FAIL attributeStyleMap.get returns CSSUnitValue for <percentage> undefined is not an object (evaluating 'target.attributeStyleMap.clear')
+FAIL styleMap.get returns CSSUnitValue for <percentage> undefined is not an object (evaluating 'rule.styleMap.clear')
+FAIL attributeStyleMap.get returns CSSUnitValue for <resolution> undefined is not an object (evaluating 'target.attributeStyleMap.clear')
+FAIL styleMap.get returns CSSUnitValue for <resolution> undefined is not an object (evaluating 'rule.styleMap.clear')
+FAIL attributeStyleMap.get returns CSSUnitValue for <time> undefined is not an object (evaluating 'target.attributeStyleMap.clear')
+FAIL styleMap.get returns CSSUnitValue for <time> undefined is not an object (evaluating 'rule.styleMap.clear')
+FAIL attributeStyleMap.get returns CSSStyleValue for <url> undefined is not an object (evaluating 'target.attributeStyleMap.clear')
+FAIL styleMap.get returns CSSStyleValue for <url> undefined is not an object (evaluating 'rule.styleMap.clear')
+FAIL attributeStyleMap.get returns CSSKeywordValue for thing1 | THING2 undefined is not an object (evaluating 'target.attributeStyleMap.clear')
+FAIL styleMap.get returns CSSKeywordValue for thing1 | THING2 undefined is not an object (evaluating 'rule.styleMap.clear')
+FAIL attributeStyleMap.get returns CSSUnitValue for <length>+ undefined is not an object (evaluating 'target.attributeStyleMap.clear')
+FAIL styleMap.get returns CSSUnitValue for <length>+ undefined is not an object (evaluating 'rule.styleMap.clear')
+FAIL attributeStyleMap.get returns CSSUnitValue for <length># undefined is not an object (evaluating 'target.attributeStyleMap.clear')
+FAIL styleMap.get returns CSSUnitValue for <length># undefined is not an object (evaluating 'rule.styleMap.clear')
+FAIL attributeStyleMap.getAll returns a list of CSSUnitValues for <length>+ undefined is not an object (evaluating 'target.attributeStyleMap.clear')
+FAIL styleMap.getAll returns a list of CSSUnitValues for <length>+ undefined is not an object (evaluating 'rule.styleMap.clear')
+FAIL attributeStyleMap.getAll returns a list of CSSUnitValues for <length># undefined is not an object (evaluating 'target.attributeStyleMap.clear')
+FAIL styleMap.getAll returns a list of CSSUnitValues for <length># undefined is not an object (evaluating 'rule.styleMap.clear')
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/typedom.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/typedom.tentative.html
new file mode 100644 (file)
index 0000000..4e5eaa7
--- /dev/null
@@ -0,0 +1,540 @@
+<!DOCTYPE html>
+<!--  TODO(andruud): Add Typed OM details to spec and link to it here.  -->
+<link rel="help" href="https://github.com/w3c/css-houdini-drafts/pull/783" />
+<meta name="assert" content="Verifies that registered custom properties interact correctly with CSS Typed OM" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style id=style>
+    div {}
+</style>
+<div id=target></div>
+
+<script>
+
+// Properties are generated on demand, as `--prop-${g_counter}`.
+let g_counter = 1;
+
+// Generate a new property name.
+function gen_name() {
+    let name = `--prop-${g_counter}`;
+    g_counter++;
+    return name;
+}
+
+// Generate a property and return its name.
+function gen_prop(syntax, initialValue) {
+    let name = gen_name();
+    CSS.registerProperty({
+        name: name,
+        syntax: syntax,
+        initialValue: initialValue,
+        inherits: false
+    });
+    return name;
+}
+
+// On the target element, verify that computed value of 'name' is an instance
+// of 'expected' and not an instance of CSSUnparsedValue.
+//
+// If 'value' is non-null, that value is first set on the attributeStyleMap
+// of the target.
+function assert_computed_type(name, value, expected) {
+    if (expected == CSSUnparsedValue) {
+        throw 'CSSUnparsedValue may not be used as expected type';
+    }
+
+    if (value != null) {
+        target.style = `${name}: ${value}`;
+    }
+
+    let computedValue = target.computedStyleMap().get(name);
+
+    assert_false(computedValue instanceof CSSUnparsedValue);
+    assert_true(computedValue instanceof expected);
+
+    if (value != null) {
+        target.style = '';
+    }
+}
+
+function assert_attribute_get_type(styleDecl, propertyMap, syntax, value, expected) {
+    let name = gen_name();
+    styleDecl.setProperty(name, value);
+
+    assert_true(propertyMap.get(name) instanceof CSSUnparsedValue);
+
+    CSS.registerProperty({
+        name: name,
+        syntax: syntax,
+        initialValue: value,
+        inherits: false
+    });
+
+    if (expected == CSSStyleValue) {
+        assert_false(propertyMap.get(name) instanceof CSSUnparsedValue);
+    }
+
+    assert_true(propertyMap.get(name) instanceof expected);
+}
+
+// computedStyleMap
+
+test(function(){
+    let name = gen_prop('*', 'if(){}');
+    assert_true(target.computedStyleMap().get(name) instanceof CSSUnparsedValue);
+
+    target.attributeStyleMap.set(name, 'as{}df');
+    assert_true(target.computedStyleMap().get(name) instanceof CSSUnparsedValue);
+    target.attributeStyleMap.delete(name);
+}, 'Computed * is reified as CSSUnparsedValue');
+
+test(function(){
+    assert_computed_type(gen_prop('<angle>', '42deg'), null, CSSUnitValue);
+    assert_computed_type(gen_prop('<angle> | fail', 'fail'), '42deg', CSSUnitValue);
+}, 'Computed <angle> is reified as CSSUnitValue');
+
+test(function(){
+    assert_computed_type(gen_prop('<color>', '#fefefe'), null, CSSStyleValue);
+    assert_computed_type(gen_prop('<color> | fail', 'fail'), null, CSSStyleValue);
+}, 'Computed <color> is reified as CSSStyleValue');
+
+test(function(){
+    assert_computed_type(gen_prop('<custom-ident>', 'none'), null, CSSKeywordValue);
+    assert_computed_type(gen_prop('<custom-ident> | <length>', '10px'), 'none', CSSKeywordValue);
+}, 'Computed <custom-ident> is reified as CSSKeywordValue');
+
+test(function(){
+    assert_computed_type(gen_prop('<image>', 'url(thing.png)'), null, CSSImageValue);
+    assert_computed_type(gen_prop('<image> | fail', 'fail'), 'url(thing.png)', CSSImageValue);
+}, 'Computed <image> [url] is reified as CSSImageValue');
+
+test(function(){
+    assert_computed_type(gen_prop('<integer>', '100'), null, CSSUnitValue);
+    assert_computed_type(gen_prop('<integer> | fail', 'fail'), '100', CSSUnitValue);
+}, 'Computed <integer> is reified as CSSUnitValue');
+
+test(function(){
+    assert_computed_type(gen_prop('<length-percentage>', '10%'), null, CSSUnitValue);
+    assert_computed_type(gen_prop('<length-percentage> | fail', 'fail'), '10%', CSSUnitValue);
+}, 'Computed <length-percentage> [%] is reified as CSSUnitValue');
+
+test(function(){
+    assert_computed_type(gen_prop('<length-percentage>', '10px'), null, CSSUnitValue);
+    assert_computed_type(gen_prop('<length-percentage> | fail', 'fail'), '10px', CSSUnitValue);
+}, 'Computed <length-percentage> [px] is reified as CSSUnitValue');
+
+test(function(){
+    assert_computed_type(gen_prop('<length-percentage>', 'calc(10px + 10%)'), null, CSSMathSum);
+    assert_computed_type(gen_prop('<length-percentage> | fail', 'fail'), 'calc(10px + 10%)', CSSMathSum);
+}, 'Computed <length-percentage> [px + %] is reified as CSSMathSum');
+
+test(function(){
+    assert_computed_type(gen_prop('<length>', '10px'), null, CSSUnitValue);
+    assert_computed_type(gen_prop('<length> | fail', 'fail'), '10px', CSSUnitValue);
+}, 'Computed <length> is reified as CSSUnitValue');
+
+test(function(){
+    assert_computed_type(gen_prop('<number>', '42'), null, CSSUnitValue);
+    assert_computed_type(gen_prop('<number> | fail', 'fail'), '42', CSSUnitValue);
+}, 'Computed <number> is reified as CSSUnitValue');
+
+test(function(){
+    assert_computed_type(gen_prop('<percentage>', '10%'), null, CSSUnitValue);
+    assert_computed_type(gen_prop('<percentage> | fail', 'fail'), '10%', CSSUnitValue);
+}, 'Computed <percentage> is reified as CSSUnitValue');
+
+test(function(){
+    assert_computed_type(gen_prop('<resolution>', '300dpi'), null, CSSUnitValue);
+    assert_computed_type(gen_prop('<resolution> | fail', 'fail'), '300dpi', CSSUnitValue);
+}, 'Computed <resolution> is reified as CSSUnitValue');
+
+test(function(){
+    assert_computed_type(gen_prop('<time>', '42s'), null, CSSUnitValue);
+    assert_computed_type(gen_prop('<time> | fail', 'fail'), '42s', CSSUnitValue);
+}, 'Computed <time> is reified as CSSUnitValue');
+
+test(function(){
+    assert_computed_type(gen_prop('<url>', 'url(a)'), null, CSSStyleValue);
+    assert_computed_type(gen_prop('<url> | fail', 'fail'), 'url(a)', CSSStyleValue);
+}, 'Computed <url> is reified as CSSStyleValue');
+
+test(function(){
+    assert_computed_type(gen_prop('thing1 | THING2', 'thing1'), null, CSSKeywordValue);
+    assert_computed_type(gen_prop('thing1 | THING2 | <url>', 'url(fail)'), 'THING2', CSSKeywordValue);
+}, 'Computed ident is reified as CSSKeywordValue');
+
+test(function(){
+    assert_computed_type(gen_prop('<length>+', '10px 20px'), null, CSSUnitValue);
+    assert_computed_type(gen_prop('<length>+', '0px 0px'), '10px 20px', CSSUnitValue);
+}, 'First computed value correctly reified in space-separated list');
+
+test(function(){
+    assert_computed_type(gen_prop('<length>#', '10px, 20px'), null, CSSUnitValue);
+    assert_computed_type(gen_prop('<length>#', '0px, 0px'), '10px, 20px', CSSUnitValue);
+}, 'First computed value correctly reified in comma-separated list');
+
+test(function(){
+    let name = gen_prop('<length>+', '10px 20px');
+    assert_equals(target.computedStyleMap().getAll(name).length, 2);
+    assert_true(target.computedStyleMap().getAll(name).every(x => x instanceof CSSUnitValue));
+
+    target.style = `${name}: 10px 20px 30px`;
+    assert_equals(target.computedStyleMap().getAll(name).length, 3);
+    assert_true(target.computedStyleMap().getAll(name).every(x => x instanceof CSSUnitValue));
+}, 'All computed values correctly reified in space-separated list');
+
+test(function(){
+    let name = gen_prop('<length>#', '10px, 20px');
+    assert_equals(target.computedStyleMap().getAll(name).length, 2);
+    assert_true(target.computedStyleMap().getAll(name).every(x => x instanceof CSSUnitValue));
+
+    target.style = `${name}: 10px, 20px, 30px`;
+    assert_equals(target.computedStyleMap().getAll(name).length, 3);
+    assert_true(target.computedStyleMap().getAll(name).every(x => x instanceof CSSUnitValue));
+}, 'All computed values correctly reified in comma-separated list');
+
+// attributeStyleMap.get / styleMap.get
+
+function test_style_property_map_get(test_fn, name_fn) {
+    let rule = style.sheet.rules[0];
+
+    test(function(){
+        target.attributeStyleMap.clear();
+        test_fn(target.style, target.attributeStyleMap);
+    }, name_fn('attributeStyleMap'));
+
+    test(function(){
+        rule.styleMap.clear();
+        test_fn(rule.style, rule.styleMap);
+    }, name_fn('styleMap'));
+}
+
+test_style_property_map_get(function(styleDecl, propertyMap){
+    let name1 = gen_prop('<length>', '100px');
+    let name2 = gen_prop('<length>', '0px');
+    styleDecl.setProperty(name2, `var(${name1})`);
+    assert_true(propertyMap.get(name2) instanceof CSSUnparsedValue);
+}, name => `${name}.get returns CSSUnparsedValue for value with var references`);
+
+test_style_property_map_get(function(styleDecl, propertyMap){
+    let name1 = gen_prop('<length>', '100px');
+    let name2 = gen_prop('<length>#', '0px');
+    styleDecl.setProperty(name2, `1px, var(${name1}), 3px`);
+    assert_true(propertyMap.get(name2) instanceof CSSUnparsedValue);
+}, name => `${name}.get returns CSSUnparsedValue for value with var references in list`);
+
+test_style_property_map_get(function(styleDecl, propertyMap){
+    assert_attribute_get_type(styleDecl, propertyMap, '*', 'if(){}', CSSUnparsedValue);
+}, name => `${name}.get returns CSSUnparsedValue for *`);
+
+test_style_property_map_get(function(styleDecl, propertyMap){
+    assert_attribute_get_type(styleDecl, propertyMap, '<angle>', '42deg', CSSUnitValue);
+}, name => `${name}.get returns CSSUnitValue for <angle>`);
+
+test_style_property_map_get(function(styleDecl, propertyMap){
+    assert_attribute_get_type(styleDecl, propertyMap, '<color>', '#fefefe', CSSStyleValue);
+}, name => `${name}.get returns CSSStyleValue for <color>`);
+
+test_style_property_map_get(function(styleDecl, propertyMap){
+    assert_attribute_get_type(styleDecl, propertyMap, '<custom-ident>', 'none', CSSKeywordValue);
+}, name => `${name}.get returns CSSKeywordValue for <custom-ident>`);
+
+test_style_property_map_get(function(styleDecl, propertyMap){
+    assert_attribute_get_type(styleDecl, propertyMap, '<image>', 'url(thing.png)', CSSImageValue);
+}, name => `${name}.get returns CSSImageValue for <image>`);
+
+test_style_property_map_get(function(styleDecl, propertyMap){
+    assert_attribute_get_type(styleDecl, propertyMap, '<integer>', '100', CSSUnitValue);
+}, name => `${name}.get returns CSSUnitValue for <integer>`);
+
+test_style_property_map_get(function(styleDecl, propertyMap){
+    assert_attribute_get_type(styleDecl, propertyMap, '<length-percentage>', '10%', CSSUnitValue);
+}, name => `${name}.get returns CSSUnitValue for <length-percentage> [10%]`);
+
+test_style_property_map_get(function(styleDecl, propertyMap){
+    assert_attribute_get_type(styleDecl, propertyMap, '<length-percentage>', '10px', CSSUnitValue);
+}, name => `${name}.get returns CSSUnitValue for <length-percentage> [10px]`);
+
+test_style_property_map_get(function(styleDecl, propertyMap){
+    assert_attribute_get_type(styleDecl, propertyMap, '<length-percentage>', 'calc(10px + 10%)', CSSMathSum);
+}, name => `${name}.get returns CSSMathSum for <length-percentage> [calc(10px + 10%)]`);
+
+test_style_property_map_get(function(styleDecl, propertyMap){
+    assert_attribute_get_type(styleDecl, propertyMap, '<length>', '10px', CSSUnitValue);
+}, name => `${name}.get returns CSSUnitValue for <length>`);
+
+test_style_property_map_get(function(styleDecl, propertyMap){
+    assert_attribute_get_type(styleDecl, propertyMap, '<number>', '42', CSSUnitValue);
+}, name => `${name}.get returns CSSUnitValue for <number>`);
+
+test_style_property_map_get(function(styleDecl, propertyMap){
+    assert_attribute_get_type(styleDecl, propertyMap, '<percentage>', '10%', CSSUnitValue);
+}, name => `${name}.get returns CSSUnitValue for <percentage>`);
+
+test_style_property_map_get(function(styleDecl, propertyMap){
+    assert_attribute_get_type(styleDecl, propertyMap, '<resolution>', '300dpi', CSSUnitValue);
+}, name => `${name}.get returns CSSUnitValue for <resolution>`);
+
+test_style_property_map_get(function(styleDecl, propertyMap){
+    assert_attribute_get_type(styleDecl, propertyMap, '<time>', '42s', CSSUnitValue);
+}, name => `${name}.get returns CSSUnitValue for <time>`);
+
+test_style_property_map_get(function(styleDecl, propertyMap){
+    assert_attribute_get_type(styleDecl, propertyMap, '<url>', 'url(a)', CSSStyleValue);
+}, name => `${name}.get returns CSSStyleValue for <url>`);
+
+test_style_property_map_get(function(styleDecl, propertyMap){
+    assert_attribute_get_type(styleDecl, propertyMap, 'thing1 | THING2', 'thing1', CSSKeywordValue);
+}, name => `${name}.get returns CSSKeywordValue for thing1 | THING2`);
+
+test_style_property_map_get(function(styleDecl, propertyMap){
+    assert_attribute_get_type(styleDecl, propertyMap, '<length>+', '10px 20px', CSSUnitValue);
+}, name => `${name}.get returns CSSUnitValue for <length>+`);
+
+test_style_property_map_get(function(styleDecl, propertyMap){
+    assert_attribute_get_type(styleDecl, propertyMap, '<length>#', '10px 20px', CSSUnitValue);
+}, name => `${name}.get returns CSSUnitValue for <length>#`);
+
+// attributeStyleMap.getAll
+
+test_style_property_map_get(function(styleDecl, propertyMap){
+    let name = gen_prop('<length>+', '0px');
+    styleDecl.setProperty(name, '10px 20px 30px');
+    assert_equals(propertyMap.getAll(name).length, 3);
+    assert_true(propertyMap.getAll(name).every(x => x instanceof CSSUnitValue));
+}, name => `${name}.getAll returns a list of CSSUnitValues for <length>+`);
+
+test_style_property_map_get(function(styleDecl, propertyMap){
+    let name = gen_prop('<length>#', '0px');
+    styleDecl.setProperty(name, '10px, 20px, 30px');
+    assert_equals(propertyMap.getAll(name).length, 3);
+    assert_true(propertyMap.getAll(name).every(x => x instanceof CSSUnitValue));
+}, name => `${name}.getAll returns a list of CSSUnitValues for <length>#`);
+
+// StylePropertyMap.set
+
+function test_style_property_map_set_using_property_map(propertyMapName, propertyMap, options) {
+    test(function(){
+        let name = gen_prop(options.syntax, options.initialValue);
+        propertyMap.clear();
+
+        for (let value of options.shouldAccept)
+            propertyMap.set(name, value);
+
+        for (let value of options.shouldReject) {
+            assert_throws(new TypeError(), () => propertyMap.set(name, value));
+        }
+    }, `${propertyMapName}.set accepts correct CSSUnitValues for ${options.syntax}`);
+}
+
+// Verify that the correct CSSStyleValues are accepted/rejected for a registered
+// property with the specified syntax.
+//
+// The same test is performed twice: once for attributeStyleMap, and once
+// for styleMap.
+function test_style_property_map_set(options) {
+    test_style_property_map_set_using_property_map('attributeStyleMap', target.attributeStyleMap, options);
+    test_style_property_map_set_using_property_map('styleMap', style.sheet.rules[0].styleMap, options);
+}
+
+let unparsed = x => new CSSUnparsedValue([x]);
+let keyword = x => new CSSKeywordValue(x);
+let sum = (a, b) => new CSSMathSum(a, b);
+let url_image = x => CSSStyleValue.parse('background-image', x);
+
+test_style_property_map_set({
+    syntax: '*',
+    initialValue: 'none',
+    shouldAccept: [unparsed('thing')],
+    shouldReject: [CSS.px(15), keyword('none')],
+});
+
+test_style_property_map_set({
+    syntax: '<angle>',
+    initialValue: '0deg',
+    shouldAccept: [CSS.deg(42), CSS.turn(2), '42deg'],
+    shouldReject: [unparsed('42deg'), CSS.px(15), '50px'],
+});
+
+test_style_property_map_set({
+    syntax: '<custom-ident>',
+    initialValue: 'none',
+    shouldAccept: [keyword('foo'), 'foo'],
+    shouldReject: [unparsed('foo'), CSS.px(15), '15px'],
+});
+
+test_style_property_map_set({
+    syntax: '<image>',
+    initialValue: 'url(a)',
+    shouldAccept: [url_image('url(b)'), 'url(b)'],
+    shouldReject: [unparsed('url(b)'), CSS.px(100), '50px'],
+});
+
+test_style_property_map_set({
+    syntax: '<integer>',
+    initialValue: '0',
+    shouldAccept: [CSS.number(1), CSS.number(-42), '1', '-42'],
+    shouldReject: [unparsed('42'), CSS.px(100), '50px'],
+});
+
+test_style_property_map_set({
+    syntax: '<length-percentage>',
+    initialValue: '0px',
+    shouldAccept: [CSS.percent(10), CSS.px(1), CSS.em(1), '10px', '10%'],
+    shouldReject: [unparsed('10%'), unparsed('10px'), CSS.dpi(1), 'url(b)'],
+});
+
+test_style_property_map_set({
+    syntax: '<length>',
+    initialValue: '0px',
+    shouldAccept: [CSS.px(10), CSS.em(10), CSS.vh(200), sum(CSS.px(10), CSS.em(20)), '10em', 'calc(10px + 10em)'],
+    shouldReject: [unparsed('10px'), CSS.percent(1), 'url(b)'],
+});
+
+test_style_property_map_set({
+    syntax: '<number>',
+    initialValue: '0',
+    shouldAccept: [CSS.number(1337), CSS.number(-42.5), '1337', '-42.5'],
+    shouldReject: [unparsed('42'), CSS.px(15), '#fef'],
+});
+
+test_style_property_map_set({
+    syntax: '<percentage>',
+    initialValue: '0%',
+    shouldAccept: [CSS.percent(10), '10%'],
+    shouldReject: [unparsed('10%'), CSS.px(1), '#fef'],
+});
+
+test_style_property_map_set({
+    syntax: '<resolution>',
+    initialValue: '0dpi',
+    shouldAccept: [CSS.dpi(100), CSS.dpcm(10), CSS.dppx(50), '100dpi'],
+    shouldReject: [unparsed('42'), CSS.px(15), '#fef'],
+});
+
+test_style_property_map_set({
+    syntax: '<time>',
+    initialValue: '0s',
+    shouldAccept: [CSS.s(42), CSS.ms(16), '16ms'],
+    shouldReject: [unparsed('42s'), CSS.px(15), '#fef'],
+});
+
+test_style_property_map_set({
+    syntax: '<url>',
+    initialValue: 'url(a)',
+    shouldAccept: [url_image('url(b)')],
+    shouldReject: [unparsed('url(b)'), CSS.px(100), '#fef'],
+});
+
+test_style_property_map_set({
+    syntax: '<transform-list>',
+    initialValue: 'translateX(0px)',
+    shouldAccept: [CSSStyleValue.parse('transform', 'translateX(10px)')],
+    shouldReject: [unparsed('transformX(10px'), CSS.px(100), '#fef'],
+});
+
+test_style_property_map_set({
+    syntax: 'none | thing | THING',
+    initialValue: 'none',
+    shouldAccept: [keyword('thing'), keyword('THING'), 'thing'],
+    shouldReject: [unparsed('thing'), CSS.px(15), keyword('notathing'), 'notathing'],
+});
+
+test_style_property_map_set({
+    syntax: '<angle> | <length>',
+    initialValue: '0deg',
+    shouldAccept: [CSS.deg(42), CSS.turn(2), CSS.px(10), CSS.em(10), '10deg', '10px'],
+    shouldReject: [unparsed('42deg'), unparsed('20px'), CSS.s(1), '#fef'],
+});
+
+// CSSStyleValue.parse/parseAll
+
+function assert_parsed_type(prop, value, expected) {
+    let parse_value = CSSStyleValue.parse(prop, value);
+    let parse_all_value = CSSStyleValue.parseAll(prop, value);
+
+    assert_true(parse_value instanceof expected);
+    assert_true(parse_all_value.every(x => x instanceof expected))
+
+    // If CSSStyleValue is expected, the values must be exactly CSSStyleValue.
+    // This is because CSSUnparsedValues are also CSSStyleValues, which would be
+    // wrong in this case.
+    if (expected == CSSStyleValue) {
+        assert_equals(parse_value.constructor, CSSStyleValue);
+        assert_true(parse_all_value.every(x => x.constructor == CSSStyleValue));
+    }
+}
+
+test(function(){
+    assert_parsed_type(gen_prop('*', 'if(){}'), 'while(){}', CSSUnparsedValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for *');
+
+test(function(){
+    assert_parsed_type(gen_prop('<angle> | fail', 'fail'), '42deg', CSSUnitValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnitValue for <angle>');
+
+test(function(){
+    assert_parsed_type(gen_prop('<color> | fail', 'fail'), '#fefefe', CSSStyleValue);
+}, 'CSSStyleValue.parse[All] returns CSSStyleValue for <color>');
+
+test(function(){
+    assert_parsed_type(gen_prop('<custom-ident> | <length>', '10px'), 'none', CSSKeywordValue);
+}, 'CSSStyleValue.parse[All] returns CSSKeywordValue for <custom-ident>');
+
+test(function(){
+    assert_parsed_type(gen_prop('<image> | fail', 'fail'), 'url(thing.png)', CSSImageValue);
+}, 'CSSStyleValue.parse[All] returns CSSImageValue for <image> [url]');
+
+test(function(){
+    assert_parsed_type(gen_prop('<integer> | fail', 'fail'), '100', CSSUnitValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnitValue for <integer>');
+
+test(function(){
+    assert_parsed_type(gen_prop('<length-percentage> | fail', 'fail'), '10%', CSSUnitValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnitValue for <length-percentage> [%]');
+
+test(function(){
+    assert_parsed_type(gen_prop('<length-percentage> | fail', 'fail'), '10px', CSSUnitValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnitValue for <length-percentage> [px]');
+
+test(function(){
+    assert_parsed_type(gen_prop('<length-percentage> | fail', 'fail'), 'calc(10px + 10%)', CSSMathSum);
+}, 'CSSStyleValue.parse[All] returns CSSMathSum for <length-percentage> [px + %]');
+
+test(function(){
+    assert_parsed_type(gen_prop('<length> | fail', 'fail'), '10px', CSSUnitValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnitValue for <length>');
+
+test(function(){
+    assert_parsed_type(gen_prop('<number> | fail', 'fail'), '42', CSSUnitValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnitValue for <number>');
+
+test(function(){
+    assert_parsed_type(gen_prop('<percentage> | fail', 'fail'), '10%', CSSUnitValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnitValue for <percentage>');
+
+test(function(){
+    assert_parsed_type(gen_prop('<resolution> | fail', 'fail'), '300dpi', CSSUnitValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnitValue for <resolution>');
+
+test(function(){
+    assert_parsed_type(gen_prop('<time> | fail', 'fail'), '42s', CSSUnitValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnitValue for <time>');
+
+test(function(){
+    assert_parsed_type(gen_prop('<url> | fail', 'fail'), 'url(a)', CSSStyleValue);
+}, 'CSSStyleValue.parse[All] returns CSSStyleValue for <url>');
+
+test(function(){
+    assert_parsed_type(gen_prop('thing1 | THING2 | <url>', 'url(fail)'), 'THING2', CSSKeywordValue);
+}, 'CSSStyleValue.parse[All] returns CSSKeywordValue for ident');
+
+test(function(){
+    assert_parsed_type(gen_prop('<length>+ | fail', 'fail'), '10px 20px', CSSUnitValue);
+}, 'CSSStyleValue.parse[All] returns list of CSSUnitValues for <length>+');
+
+test(function(){
+    assert_parsed_type(gen_prop('<length># | fail', 'fail'), '10px, 20px', CSSUnitValue);
+}, 'CSSStyleValue.parse[All] returns list of CSSUnitValues for <length>#');
+
+</script>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/unit-cycles-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/unit-cycles-expected.txt
new file mode 100644 (file)
index 0000000..c06da9b
--- /dev/null
@@ -0,0 +1,4 @@
+CONSOLE MESSAGE: line 63: TypeError: undefined is not an object (evaluating 'element.attributeStyleMap.clear')
+
+FAIL Untitled TypeError: undefined is not an object (evaluating 'element.attributeStyleMap.clear')
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/unit-cycles.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/unit-cycles.html
new file mode 100644 (file)
index 0000000..d653485
--- /dev/null
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#dependency-cycles-via-relative-units" />
+<meta name="assert" content="This test verifies that reference cycles via units are detected" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+    function register_length(name) {
+        CSS.registerProperty({
+            name: name,
+            syntax: '<length>',
+            initialValue: '0px',
+            inherits: false
+        });
+    }
+
+    register_length('--font-size-em');
+    register_length('--font-size-rem');
+    register_length('--font-size-ex');
+    register_length('--font-size-ch');
+    register_length('--font-size-px');
+    register_length('--font-size-em-via-var');
+    register_length('--font-size-rem-via-var');
+    register_length('--font-size-ex-via-var');
+    register_length('--font-size-ch-via-var');
+</script>
+<style>
+    :root {
+        --unregistered-em: 10em;
+        --unregistered-rem: 10rem;
+        --unregistered-ex: 10ex;
+        --unregistered-ch: 10ch;
+    }
+
+    :root, #target {
+        --font-size-em: 2em;
+        --font-size-rem: 2rem;
+        --font-size-ex: 2ex;
+        --font-size-ch: 2ch;
+        --font-size-px: 42px;
+        --font-size-em-via-var: var(--unregistered-em);
+        --font-size-rem-via-var: var(--unregistered-rem);
+        --font-size-ex-via-var: var(--unregistered-ex);
+        --font-size-ch-via-var: var(--unregistered-ch);
+    }
+
+    #target {
+        font-size: 11px;
+    }
+</style>
+
+<div id=target></div>
+<div id=ref></div>
+
+<script>
+
+    // Compute a dimension (e.g. 1em) given a certain fontSize.
+    function compute_dimension(dimension, fontSize, element = ref) {
+        try {
+            element.attributeStyleMap.set('font-size', fontSize);
+            element.attributeStyleMap.set('margin-bottom', dimension);
+            return getComputedStyle(element).marginBottom;
+        } finally {
+            element.attributeStyleMap.clear();
+        }
+    }
+
+    function assert_property_equals(name, value, element = target) {
+        var computedStyle = getComputedStyle(element);
+        assert_equals(computedStyle.getPropertyValue(name), value);
+    }
+
+    let unsetFontSize = compute_dimension('1em', 'unset');
+
+    add_result_callback(function(){
+        target.attributeStyleMap.clear();
+        document.documentElement.attributeStyleMap.clear();
+    });
+
+    test(function() {
+        target.style = 'font-size: var(--font-size-px);';
+        assert_property_equals('font-size', '42px');
+        assert_property_equals('--font-size-px', '42px');
+    }, 'Non-font-dependent variables can be used in font-size');
+
+    test(function() {
+        target.style = 'font-size: var(--font-size-em);';
+        assert_property_equals('font-size', unsetFontSize);
+        assert_property_equals('--font-size-em', compute_dimension('2em', 'unset'));
+    }, 'Lengths with em units may not be referenced from font-size');
+
+    test(function() {
+        target.style = 'font-size: var(--font-size-ex);';
+        assert_property_equals('font-size', unsetFontSize);
+        assert_property_equals('--font-size-ex', compute_dimension('2ex', 'unset'));
+    }, 'Lengths with ex units may not be referenced from font-size');
+
+    test(function() {
+        target.style = 'font-size: var(--font-size-ch);';
+        assert_property_equals('font-size', unsetFontSize);
+        assert_property_equals('--font-size-ch', compute_dimension('2ch', 'unset'));
+    }, 'Lengths with ch units may not be referenced from font-size');
+
+    test(function() {
+        target.style = 'font-size: var(--font-size-rem);';
+        let expected = compute_dimension('2rem', 'unset', document.documentElement);
+        assert_property_equals('--font-size-rem', expected);
+        assert_property_equals('font-size', expected);
+    }, 'Lengths with rem units may be referenced from font-size on non-root element');
+
+    test(function() {
+        let root = document.documentElement;
+        let expected1rem = compute_dimension('1rem', 'unset', root);
+        let expected2rem = compute_dimension('2rem', 'unset', root);
+        root.style = 'font-size: var(--font-size-rem);';
+        assert_property_equals('font-size', expected1rem, root);
+        assert_property_equals('--font-size-rem', expected2rem, root);
+    }, 'Lengths with rem units may not be referenced from font-size on root element');
+
+    test(function() {
+        target.style = 'font-size: var(--noexist, var(--font-size-em));';
+        assert_property_equals('font-size', unsetFontSize);
+    }, 'Fallback may not use font-relative units');
+
+    test(function() {
+        target.style = 'font-size: var(--font-size-em, 42px);';
+        assert_property_equals('font-size', '42px');
+    }, 'Fallback triggered when em unit cycle is detected');
+
+    test(function() {
+        target.style = 'font-size: var(--font-size-ex, 42px);';
+        assert_property_equals('font-size', '42px');
+    }, 'Fallback triggered when ex unit cycle is detected');
+
+    test(function() {
+        target.style = 'font-size: var(--font-size-ch, 42px);';
+        assert_property_equals('font-size', '42px');
+    }, 'Fallback triggered when ch unit cycle is detected');
+
+    test(function() {
+        let root = document.documentElement;
+        root.style = 'font-size: var(--font-size-rem, 42px);';
+        assert_property_equals('font-size', '42px', root);
+        root.style = 'font-size: unset;';
+    }, 'Fallback triggered when rem unit cycle is detected on root element');
+
+    test(function() {
+        target.style = 'font-size: var(--font-size-em-via-var);';
+        assert_property_equals('font-size', unsetFontSize);
+        assert_property_equals('--font-size-em-via-var', compute_dimension('10em', 'unset'));
+    }, 'Lengths with em units are detected via var references');
+
+    test(function() {
+        target.style = 'font-size: var(--font-size-ex-via-var);';
+        assert_property_equals('font-size', unsetFontSize);
+        assert_property_equals('--font-size-ex-via-var', compute_dimension('10ex', 'unset'));
+    }, 'Lengths with ex units are detected via var references');
+
+    test(function() {
+        target.style = 'font-size: var(--font-size-ch-via-var);';
+        assert_property_equals('font-size', unsetFontSize);
+        assert_property_equals('--font-size-ch-via-var', compute_dimension('10ch', 'unset'));
+    }, 'Lengths with ch units are detected via var references');
+
+    test(function() {
+        let root = document.documentElement;
+        let expected1rem = compute_dimension('1rem', 'unset', root);
+        let expected10rem = compute_dimension('10rem', 'unset', root);
+        root.style = 'font-size: var(--font-size-rem-via-var);';
+        assert_property_equals('font-size', expected1rem, root);
+        assert_property_equals('--font-size-rem-via-var', expected10rem, root);
+    }, 'Lengths with rem units are detected via var references');
+
+</script>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/url-resolution-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/url-resolution-expected.txt
new file mode 100644 (file)
index 0000000..b3525dc
--- /dev/null
@@ -0,0 +1,20 @@
+
+PASS Unregistered property resolves against document (URL token) 
+PASS Unregistered property resolves against document (URL function) 
+FAIL Registered non-inherited <url> resolves against sheet (URL token) assert_equals: expected "/css/css-properties-values-api/support/main" but got "/css/css-properties-values-api"
+FAIL Registered non-inherited <url> resolves against sheet (URL function) assert_equals: expected "/css/css-properties-values-api/support/main" but got "/css/css-properties-values-api"
+FAIL Registered inherited <url> resolves against sheet (URL token) assert_equals: expected "/css/css-properties-values-api/support/main" but got "/css/css-properties-values-api"
+FAIL Registered inherited <url> resolves against sheet (URL function) assert_equals: expected "/css/css-properties-values-api/support/main" but got "/css/css-properties-values-api"
+FAIL Registered inherited <url> resolves against sheet (Child node, URL token) assert_equals: expected "/css/css-properties-values-api/support/main" but got "/css/css-properties-values-api"
+FAIL Registered inherited <url> resolves against sheet (Child node, URL function) assert_equals: expected "/css/css-properties-values-api/support/main" but got "/css/css-properties-values-api"
+FAIL Registered property with unregistered var reference resolves against sheet (URL token) assert_equals: expected "/css/css-properties-values-api/support/main" but got "/css/css-properties-values-api"
+FAIL Registered property with unregistered var reference resolves against sheet. (URL function) assert_equals: expected "/css/css-properties-values-api/support/main" but got "/css/css-properties-values-api"
+FAIL Registered property with registered var reference resolves against sheet of referenced property (URL token) assert_equals: expected "/css/css-properties-values-api/support/alt" but got "/css/css-properties-values-api"
+FAIL Registered property with registered var reference resolves against sheet of referenced property (URL function) assert_equals: expected "/css/css-properties-values-api/support/alt" but got "/css/css-properties-values-api"
+FAIL Unregistered property with registered var reference resolves against sheet of referenced property (URL token) assert_equals: expected "/css/css-properties-values-api/support/alt" but got "/css/css-properties-values-api"
+FAIL Unregistered property with registered var reference resolves against sheet of referenced property (URL function) assert_equals: expected "/css/css-properties-values-api/support/alt" but got "/css/css-properties-values-api"
+FAIL Multiple (registered) var reference resolve against respective sheets (URL token) assert_equals: expected "/css/css-properties-values-api/support/main" but got "/css/css-properties-values-api"
+FAIL Multiple (registered) var reference resolve against respective sheets (URL function) assert_equals: expected "/css/css-properties-values-api/support/main" but got "/css/css-properties-values-api"
+FAIL Registered UTF16BE-encoded var reference resolve against sheet (URL token) assert_equals: expected "/css/css-properties-values-api/support/main" but got "/css/css-properties-values-api"
+FAIL Registered UTF16BE-encoded var reference resolve against sheet (URL function) assert_equals: expected "/css/css-properties-values-api/support/main" but got "/css/css-properties-values-api"
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/url-resolution.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/url-resolution.html
new file mode 100644 (file)
index 0000000..d932789
--- /dev/null
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#relative-urls" />
+<meta name="assert" content="This test verifies that relative URLs in registered properties resolve correctly" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script src="support/main/main.js"></script>
+<script src="support/alt/alt.js"></script>
+<link id="main" rel="stylesheet" type="text/css" href="support/main/main.css" />
+<link id="main_utf16be" rel="stylesheet" type="text/css" href="support/main/main.utf16be.css" />
+<link id="alt" rel="stylesheet" type="text/css" href="support/alt/alt.css" />
+<div id=target>
+    <div id=inner></div>
+</div>
+<script>
+function parse_url(urlstr) {
+    urlstr = urlstr.trim();
+    if (!urlstr.startsWith('url("') || !urlstr.endsWith('")'))
+        throw 'Unknown url format: ' + urlstr;
+    return urlstr.slice(5, -2);
+}
+
+function get_bg_url(element) {
+    return parse_url(getComputedStyle(element)['background-image']);
+}
+
+function get_bg_urls(element) {
+    return getComputedStyle(element)['background-image']
+            .split(',')
+            .map(x => x.trim())
+            .map(x => parse_url(x));
+}
+
+function assert_base_path_equal(actual, expected) {
+    let actual_base = new URL(actual).pathname.split('/').slice(0, -1);
+    let expected_base = new URL(expected).pathname.split('/').slice(0, -1);
+    assert_equals(actual_base.join('/'), expected_base.join('/'));
+}
+
+function assert_base_paths_equal(actual, expected) {
+    assert_equals(actual.length, expected.length);
+    for (let i = 0; i < actual.length; i++) {
+        assert_base_path_equal(actual[i], expected[i]);
+    }
+}
+
+test(function() {
+    target.style = 'background-image: var(--unreg-url);';
+    assert_base_path_equal(get_bg_url(target), document.baseURI);
+}, 'Unregistered property resolves against document (URL token)');
+
+test(function() {
+    target.style = 'background-image: var(--unreg-func);';
+    assert_base_path_equal(get_bg_url(target), document.baseURI);
+}, 'Unregistered property resolves against document (URL function)');
+
+test(function() {
+    target.style = 'background-image: var(--reg-non-inherited-url);';
+    assert_base_path_equal(get_bg_url(target), main.sheet.href);
+}, 'Registered non-inherited <url> resolves against sheet (URL token)');
+
+test(function() {
+    target.style = 'background-image: var(--reg-non-inherited-func);';
+    assert_base_path_equal(get_bg_url(target), main.sheet.href);
+}, 'Registered non-inherited <url> resolves against sheet (URL function)');
+
+test(function() {
+    target.style = 'background-image: var(--reg-inherited-url);';
+    assert_base_path_equal(get_bg_url(target), main.sheet.href);
+}, 'Registered inherited <url> resolves against sheet (URL token)');
+
+test(function() {
+    target.style = 'background-image: var(--reg-inherited-func);';
+    assert_base_path_equal(get_bg_url(target), main.sheet.href);
+}, 'Registered inherited <url> resolves against sheet (URL function)');
+
+test(function() {
+    inner.style = 'background-image: var(--reg-inherited-url);';
+    assert_base_path_equal(get_bg_url(inner), main.sheet.href);
+}, 'Registered inherited <url> resolves against sheet (Child node, URL token)');
+
+test(function() {
+    inner.style = 'background-image: var(--reg-inherited-func);';
+    assert_base_path_equal(get_bg_url(inner), main.sheet.href);
+}, 'Registered inherited <url> resolves against sheet (Child node, URL function)');
+
+test(function() {
+    target.style = 'background-image: var(--reg-ref-to-unreg-url);';
+    assert_base_path_equal(get_bg_url(target), main.sheet.href);
+}, 'Registered property with unregistered var reference resolves against sheet (URL token)');
+
+test(function() {
+    target.style = 'background-image: var(--reg-ref-to-unreg-func);';
+    assert_base_path_equal(get_bg_url(target), main.sheet.href);
+}, 'Registered property with unregistered var reference resolves against sheet. (URL function)');
+
+test(function() {
+    target.style = 'background-image: var(--reg-ref-to-reg-url);';
+    assert_base_path_equal(get_bg_url(target), alt.sheet.href);
+}, 'Registered property with registered var reference resolves against sheet of referenced property (URL token)');
+
+test(function() {
+    target.style = 'background-image: var(--reg-ref-to-reg-func);';
+    assert_base_path_equal(get_bg_url(target), alt.sheet.href);
+}, 'Registered property with registered var reference resolves against sheet of referenced property (URL function)');
+
+test(function() {
+    target.style = 'background-image: var(--unreg-ref-to-reg-url);';
+    assert_base_path_equal(get_bg_url(target), alt.sheet.href);
+}, 'Unregistered property with registered var reference resolves against sheet of referenced property (URL token)');
+
+test(function() {
+    target.style = 'background-image: var(--unreg-ref-to-reg-func);';
+    assert_base_path_equal(get_bg_url(target), alt.sheet.href);
+}, 'Unregistered property with registered var reference resolves against sheet of referenced property (URL function)');
+
+test(function() {
+    target.style = 'background-image: var(--unreg-multi-ref-to-reg-urls);';
+    assert_base_paths_equal(get_bg_urls(target), [main.sheet.href, alt.sheet.href]);
+}, 'Multiple (registered) var reference resolve against respective sheets (URL token)');
+
+test(function() {
+    target.style = 'background-image: var(--unreg-multi-ref-to-reg-funcs);';
+    assert_base_paths_equal(get_bg_urls(target), [main.sheet.href, alt.sheet.href]);
+}, 'Multiple (registered) var reference resolve against respective sheets (URL function)');
+
+test(function() {
+    target.style = 'background-image: var(--reg-utf16be-url);';
+    assert_base_path_equal(get_bg_url(target), main_utf16be.sheet.href);
+}, 'Registered UTF16BE-encoded var reference resolve against sheet (URL token)');
+
+test(function() {
+    target.style = 'background-image: var(--reg-utf16be-func);';
+    assert_base_path_equal(get_bg_url(target), main_utf16be.sheet.href);
+}, 'Registered UTF16BE-encoded var reference resolve against sheet (URL function)');
+
+</script>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-cycles-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-cycles-expected.txt
new file mode 100644 (file)
index 0000000..a0d5c7b
--- /dev/null
@@ -0,0 +1,6 @@
+
+FAIL A var() cycle between two registered properties is handled correctly. assert_equals: expected "1px" but got ""
+FAIL A var() cycle between a registered properties and an unregistered property is handled correctly. assert_equals: expected "1px" but got ""
+FAIL A var() cycle between a two unregistered properties is handled correctly. assert_equals: expected "30px" but got ""
+FAIL A var() cycle between a syntax:'*' property and an unregistered property is handled correctly. assert_equals: expected "meow" but got ""
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-cycles.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-cycles.html
new file mode 100644 (file)
index 0000000..58d6c84
--- /dev/null
@@ -0,0 +1,145 @@
+<!DOCTYPE HTML>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#dom-css-registerproperty" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+#test1 {
+    --registered-1-a: var(--registered-1-b, 10px);
+    --registered-1-b: var(--registered-1-a, 20px);
+
+    --registered-1-c: var(--registered-1-b, 30px);
+    --registered-1-d: var(--registered-1-b);
+    --unregistered-1-a:var(--registered-1-a,40px);
+    --unregistered-1-a:var(--registered-1-a);
+    left: var(--registered-1-a, 50px);
+    top: var(--registered-1-b, 60px);
+}
+</style>
+<div id=test1></div>
+<script>
+test(function() {
+    CSS.registerProperty({name: '--registered-1-a', syntax: '<length>', initialValue: '1px', inherits: false});
+    CSS.registerProperty({name: '--registered-1-b', syntax: '<length>', initialValue: '2px', inherits: false});
+    CSS.registerProperty({name: '--registered-1-c', syntax: '<length>', initialValue: '3px', inherits: false});
+    CSS.registerProperty({name: '--registered-1-d', syntax: '<length>', initialValue: '4px', inherits: false});
+
+    computedStyle = getComputedStyle(test1);
+    assert_equals(computedStyle.getPropertyValue('--registered-1-a'), '1px');
+    assert_equals(computedStyle.getPropertyValue('--registered-1-b'), '2px');
+
+    assert_equals(computedStyle.getPropertyValue('--registered-1-c'), '2px');
+    assert_equals(computedStyle.getPropertyValue('--registered-1-d'), '2px');
+    assert_equals(computedStyle.getPropertyValue('--unregistered-1-a'), '1px');
+    assert_equals(computedStyle.left, '1px');
+    assert_equals(computedStyle.top, '2px');
+}, "A var() cycle between two registered properties is handled correctly.");
+</script>
+
+<style>
+#test2 {
+    --registered-2-a: var(--unregistered-2-a, 10px);
+    --unregistered-2-a:var(--registered-2-a,20px);
+
+    --registered-2-b: var(--registered-2-a, 30px);
+    --registered-2-c: var(--registered-2-a);
+    --registered-2-d: var(--unregistered-2-a, 40px);
+    --registered-2-e: var(--unregistered-2-a);
+    --unregistered-2-b:var(--registered-2-a,50px);
+    --unregistered-2-c:var(--registered-2-a);
+    --unregistered-2-d:var(--unregistered-2-a,60px);
+    --unregistered-2-e:var(--unregistered-2-a);
+    left: var(--registered-2-a, 70px);
+    top: var(--unregistered-2-a, 80px);
+}
+</style>
+<div id=test2></div>
+<script>
+test(function() {
+    CSS.registerProperty({name: '--registered-2-a', syntax: '<length>', initialValue: '1px', inherits: false});
+    CSS.registerProperty({name: '--registered-2-b', syntax: '<length>', initialValue: '2px', inherits: false});
+    CSS.registerProperty({name: '--registered-2-c', syntax: '<length>', initialValue: '3px', inherits: false});
+    CSS.registerProperty({name: '--registered-2-d', syntax: '<length>', initialValue: '4px', inherits: false});
+    CSS.registerProperty({name: '--registered-2-e', syntax: '<length>', initialValue: '5px', inherits: false});
+
+    computedStyle = getComputedStyle(test2);
+    assert_equals(computedStyle.getPropertyValue('--registered-2-a'), '1px');
+    assert_equals(computedStyle.getPropertyValue('--unregistered-2-a'), '');
+
+    assert_equals(computedStyle.getPropertyValue('--registered-2-b'), '1px');
+    assert_equals(computedStyle.getPropertyValue('--registered-2-c'), '1px');
+    assert_equals(computedStyle.getPropertyValue('--registered-2-d'), '40px');
+    assert_equals(computedStyle.getPropertyValue('--registered-2-e'), '5px');
+    assert_equals(computedStyle.getPropertyValue('--unregistered-2-b'), '1px');
+    assert_equals(computedStyle.getPropertyValue('--unregistered-2-c'), '1px');
+    assert_equals(computedStyle.getPropertyValue('--unregistered-2-d'), '60px');
+    assert_equals(computedStyle.getPropertyValue('--unregistered-2-e'), '');
+    assert_equals(computedStyle.left, '1px');
+    assert_equals(computedStyle.top, '80px');
+}, "A var() cycle between a registered properties and an unregistered property is handled correctly.");
+</script>
+
+<style>
+#test3 {
+    --unregistered-3-a:var(--unregistered-3-b,10px);
+    --unregistered-3-b:var(--unregistered-3-a,20px);
+
+    --registered-3-a: var(--unregistered-3-a, 30px);
+    --registered-3-b: var(--unregistered-3-a);
+    --registered-3-c: var(--unregistered-3-b, 40px);
+    --registered-3-d: var(--registered-3-c, 50px);
+    left: var(--registered-3-d, 60px);
+    top: var(--registered-3-b, 70px);
+}
+</style>
+<div id=test3></div>
+<script>
+test(function() {
+    CSS.registerProperty({name: '--registered-3-a', syntax: '<length>', initialValue: '1px', inherits: false});
+    CSS.registerProperty({name: '--registered-3-b', syntax: '<length>', initialValue: '2px', inherits: false});
+    CSS.registerProperty({name: '--registered-3-c', syntax: '<length>', initialValue: '3px', inherits: false});
+    CSS.registerProperty({name: '--registered-3-d', syntax: '<length>', initialValue: '4px', inherits: false});
+
+    computedStyle = getComputedStyle(test3);
+    assert_equals(computedStyle.getPropertyValue('--unregistered-3-a'), '');
+    assert_equals(computedStyle.getPropertyValue('--unregistered-3-b'), '');
+
+    assert_equals(computedStyle.getPropertyValue('--registered-3-a'), '30px');
+    assert_equals(computedStyle.getPropertyValue('--registered-3-b'), '2px');
+    assert_equals(computedStyle.getPropertyValue('--registered-3-c'), '40px');
+    assert_equals(computedStyle.getPropertyValue('--registered-3-d'), '40px');
+    assert_equals(computedStyle.left, '40px');
+    assert_equals(computedStyle.top, '2px');
+}, "A var() cycle between a two unregistered properties is handled correctly.");
+</script>
+
+<style>
+#test4 {
+    --registered-4-a:var(--unregistered-4-a,hello);
+    --unregistered-4-a:var(--registered-4-a,world);
+
+    --registered-4-b:var(--unregistered-4-a,meow);
+    --registered-4-c:var(--unregistered-4-a);
+    --unregistered-4-b:var(--unregistered-4-a,woof);
+    --unregistered-4-c:var(--unregistered-4-a);
+    transition-property: var(--registered-4-a, water);
+}
+</style>
+<div id=test4></div>
+<script>
+test(function() {
+    CSS.registerProperty({name: '--registered-4-a', syntax: '*', inherits: false});
+    CSS.registerProperty({name: '--registered-4-b', syntax: '*', initialValue: 'moo', inherits: false});
+    CSS.registerProperty({name: '--registered-4-c', syntax: '*', initialValue: 'circle', inherits: false});
+
+    computedStyle = getComputedStyle(test4);
+    assert_equals(computedStyle.getPropertyValue('--registered-4-a'), '');
+    assert_equals(computedStyle.getPropertyValue('--unregistered-4-a'), '');
+
+    assert_equals(computedStyle.getPropertyValue('--registered-4-b'), 'meow');
+    assert_equals(computedStyle.getPropertyValue('--registered-4-c'), 'circle');
+    assert_equals(computedStyle.getPropertyValue('--unregistered-4-b'), 'woof');
+    assert_equals(computedStyle.getPropertyValue('--unregistered-4-c'), '');
+    assert_equals(computedStyle.transitionProperty, 'water');
+}, "A var() cycle between a syntax:'*' property and an unregistered property is handled correctly.");
+</script>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-expected.txt
new file mode 100644 (file)
index 0000000..9c17c4e
--- /dev/null
@@ -0,0 +1,6 @@
+
+FAIL var() references work with registered properties assert_equals: expected "10px" but got " 10px"
+FAIL References to registered var()-properties work in registered lists assert_equals: expected "1px, 10px, 2px" but got " 1px,  10px, 2px"
+FAIL References to mixed registered and unregistered var()-properties work in registered lists assert_equals: expected "1px, 20px, 10px, 2px" but got " 1px,  20px,  10px, 2px"
+FAIL Registered lists may be concatenated assert_equals: expected "1px, 10px, 2px, 1px, 20px, 10px, 2px" but got "  1px,  10px, 2px,  1px,  20px,  10px, 2px"
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties.html
new file mode 100644 (file)
index 0000000..d8a8315
--- /dev/null
@@ -0,0 +1,100 @@
+<!DOCTYPE HTML>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#dom-css-registerproperty" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+div {
+    --registered-length-1: 10px;
+    --registered-length-2: var(--registered-length-1);
+    --registered-length-3: var(--length-1);
+    --registered-length-4: calc(var(--length-1) + 40px);
+    --registered-length-5: var(--invalid, 70px);
+    --registered-length-6: calc(var(--registered-length-3)*4);
+    --registered-length-7: var(--123px, 6px);
+
+    --length-1: 20px;
+    --length-2: var(--registered-length-1);
+    --length-3: calc(var(--123px, 6px) + var(--123px));
+
+    --percentage: 10%;
+    --registered-length-invalid: var(--percentage);
+
+    --registered-token-stream-1:var(--invalid);
+    --registered-token-stream-2:var(--invalid,fallback);
+    --token-stream-1:var(--registered-token-stream-1,moo);
+
+    --registered-length-list-1: 1px, var(--registered-length-1), 2px;
+    --registered-length-list-2: 1px, var(--length-1), var(--registered-length-1), 2px;
+    --registered-length-list-3: var(--registered-length-list-1), var(--registered-length-list-2);
+}
+</style>
+<div id=element></div>
+<script>
+test(function() {
+    CSS.registerProperty({name: '--123px', syntax: '<length>', initialValue: '123px', inherits: false});
+
+    CSS.registerProperty({name: '--registered-length-1', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--registered-length-2', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--registered-length-3', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--registered-length-4', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--registered-length-5', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--registered-length-6', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--registered-length-7', syntax: '<length>', initialValue: '0px', inherits: false});
+    CSS.registerProperty({name: '--registered-length-invalid', syntax: '<length>', initialValue: '15px', inherits: false});
+
+    CSS.registerProperty({name: '--registered-token-stream-1', syntax: '*', inherits: false});
+    CSS.registerProperty({name: '--registered-token-stream-2', syntax: '*', inherits: false});
+
+    computedStyle = getComputedStyle(element);
+    assert_equals(computedStyle.getPropertyValue('--registered-length-1'), '10px');
+    assert_equals(computedStyle.getPropertyValue('--registered-length-2'), '10px');
+    assert_equals(computedStyle.getPropertyValue('--registered-length-3'), '20px');
+    assert_equals(computedStyle.getPropertyValue('--registered-length-4'), '60px');
+    assert_equals(computedStyle.getPropertyValue('--registered-length-5'), '70px');
+    assert_equals(computedStyle.getPropertyValue('--registered-length-6'), '80px');
+    assert_equals(computedStyle.getPropertyValue('--registered-length-7'), '123px');
+    assert_equals(computedStyle.getPropertyValue('--length-1'), ' 20px');
+    assert_equals(computedStyle.getPropertyValue('--length-2'), '  10px');
+    assert_equals(computedStyle.getPropertyValue('--length-3'), ' calc(123px + 123px)');
+    assert_equals(computedStyle.getPropertyValue('--registered-length-invalid'), '15px');
+
+    assert_equals(computedStyle.getPropertyValue('--registered-token-stream-1'), '');
+    assert_equals(computedStyle.getPropertyValue('--registered-token-stream-2'), 'fallback');
+    assert_equals(computedStyle.getPropertyValue('--token-stream-1'), 'moo');
+}, "var() references work with registered properties");
+
+test(function(){
+    CSS.registerProperty({
+        name: '--registered-length-list-1',
+        syntax: '<length>#',
+        initialValue: '0px',
+        inherits: false
+    });
+    let computedStyle = getComputedStyle(element);
+    assert_equals(computedStyle.getPropertyValue('--registered-length-list-1'), '1px, 10px, 2px');
+}, 'References to registered var()-properties work in registered lists');
+
+test(function(){
+    CSS.registerProperty({
+        name: '--registered-length-list-2',
+        syntax: '<length>#',
+        initialValue: '0px',
+        inherits: false
+    });
+    let computedStyle = getComputedStyle(element);
+    assert_equals(computedStyle.getPropertyValue('--registered-length-list-2'), '1px, 20px, 10px, 2px');
+}, 'References to mixed registered and unregistered var()-properties work in registered lists');
+
+test(function(){
+    CSS.registerProperty({
+        name: '--registered-length-list-3',
+        syntax: '<length>#',
+        initialValue: '0px',
+        inherits: false
+    });
+    let computedStyle = getComputedStyle(element);
+    assert_equals(computedStyle.getPropertyValue('--registered-length-list-3'), '1px, 10px, 2px, 1px, 20px, 10px, 2px');
+}, 'Registered lists may be concatenated');
+
+
+</script>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/w3c-import.log
new file mode 100644 (file)
index 0000000..86cd8dd
--- /dev/null
@@ -0,0 +1,30 @@
+The tests in this directory were imported from the W3C repository.
+Do NOT modify these tests directly in WebKit.
+Instead, create a pull request on the WPT github:
+       https://github.com/web-platform-tests/wpt
+
+Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
+
+Do NOT modify or remove this file.
+
+------------------------------------------------------------------------
+Properties requiring vendor prefixes:
+None
+Property values requiring vendor prefixes:
+None
+------------------------------------------------------------------------
+List of files:
+/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/META.yml
+/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/idlharness.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/property-cascade.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/register-property-syntax-parsing.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/register-property.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-properties-inheritance.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-computation.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-cssom.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-property-initial.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/typedom.tentative.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/unit-cycles.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/url-resolution.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-cycles.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties.html
index 02f7a30..ed9184e 100644 (file)
@@ -627,4 +627,5 @@ webkit.org/b/189594 imported/w3c/web-platform-tests/css/css-animations/pending-s
 webkit.org/b/188070 imported/w3c/web-platform-tests/streams/piping/error-propagation-backward.html [ Pass Failure ]
 
 # Not supported on WK1
+imported/w3c/web-platform-tests/css/css-properties-values-api/ [ Skip ]
 css-custom-properties-api [ Skip ]