Index: third_party/WebKit/LayoutTests/custom-properties/var-reference-registered-properties.html |
diff --git a/third_party/WebKit/LayoutTests/custom-properties/var-reference-registered-properties.html b/third_party/WebKit/LayoutTests/custom-properties/var-reference-registered-properties.html |
index 5ccbaef46f742b62eea6ca8662e8feafdbf6407f..6e08ff8674533b87331a5988aee899d843671183 100644 |
--- a/third_party/WebKit/LayoutTests/custom-properties/var-reference-registered-properties.html |
+++ b/third_party/WebKit/LayoutTests/custom-properties/var-reference-registered-properties.html |
@@ -9,24 +9,36 @@ div { |
--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); |
} |
</style> |
<div id=element></div> |
<script> |
+CSS.registerProperty({name: '--123px', syntax: '<length>', initialValue: '123px'}); |
+ |
CSS.registerProperty({name: '--registered-length-1', syntax: '<length>', initialValue: '0px'}); |
CSS.registerProperty({name: '--registered-length-2', syntax: '<length>', initialValue: '0px'}); |
CSS.registerProperty({name: '--registered-length-3', syntax: '<length>', initialValue: '0px'}); |
CSS.registerProperty({name: '--registered-length-4', syntax: '<length>', initialValue: '0px'}); |
CSS.registerProperty({name: '--registered-length-5', syntax: '<length>', initialValue: '0px'}); |
CSS.registerProperty({name: '--registered-length-6', syntax: '<length>', initialValue: '0px'}); |
+CSS.registerProperty({name: '--registered-length-7', syntax: '<length>', initialValue: '0px'}); |
CSS.registerProperty({name: '--registered-length-invalid', syntax: '<length>', initialValue: '15px'}); |
+CSS.registerProperty({name: '--registered-token-stream-1', syntax: '*'}); |
+CSS.registerProperty({name: '--registered-token-stream-2', syntax: '*'}); |
+ |
test(function() { |
computedStyle = getComputedStyle(element); |
assert_equals(computedStyle.getPropertyValue('--registered-length-1'), '10px'); |
@@ -35,8 +47,14 @@ test(function() { |
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"); |
</script> |