OLD | NEW |
1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
2 <script src="../resources/testharness.js"></script> | 2 <script src="../resources/testharness.js"></script> |
3 <script src="../resources/testharnessreport.js"></script> | 3 <script src="../resources/testharnessreport.js"></script> |
4 <style> | 4 <style> |
5 div { | 5 div { |
6 --registered-length-1: 10px; | 6 --registered-length-1: 10px; |
7 --registered-length-2: var(--registered-length-1); | 7 --registered-length-2: var(--registered-length-1); |
8 --registered-length-3: var(--length-1); | 8 --registered-length-3: var(--length-1); |
9 --registered-length-4: calc(var(--length-1) + 40px); | 9 --registered-length-4: calc(var(--length-1) + 40px); |
10 --registered-length-5: var(--invalid, 70px); | 10 --registered-length-5: var(--invalid, 70px); |
11 --registered-length-6: calc(var(--registered-length-3)*4); | 11 --registered-length-6: calc(var(--registered-length-3)*4); |
| 12 --registered-length-7: var(--123px, 6px); |
12 | 13 |
13 --length-1: 20px; | 14 --length-1: 20px; |
14 --length-2: var(--registered-length-1); | 15 --length-2: var(--registered-length-1); |
| 16 --length-3: calc(var(--123px, 6px) + var(--123px)); |
15 | 17 |
16 --percentage: 10%; | 18 --percentage: 10%; |
17 --registered-length-invalid: var(--percentage); | 19 --registered-length-invalid: var(--percentage); |
| 20 |
| 21 --registered-token-stream-1:var(--invalid); |
| 22 --registered-token-stream-2:var(--invalid,fallback); |
| 23 --token-stream-1:var(--registered-token-stream-1,moo); |
18 } | 24 } |
19 </style> | 25 </style> |
20 <div id=element></div> | 26 <div id=element></div> |
21 <script> | 27 <script> |
| 28 CSS.registerProperty({name: '--123px', syntax: '<length>', initialValue: '123px'
}); |
| 29 |
22 CSS.registerProperty({name: '--registered-length-1', syntax: '<length>', initial
Value: '0px'}); | 30 CSS.registerProperty({name: '--registered-length-1', syntax: '<length>', initial
Value: '0px'}); |
23 CSS.registerProperty({name: '--registered-length-2', syntax: '<length>', initial
Value: '0px'}); | 31 CSS.registerProperty({name: '--registered-length-2', syntax: '<length>', initial
Value: '0px'}); |
24 CSS.registerProperty({name: '--registered-length-3', syntax: '<length>', initial
Value: '0px'}); | 32 CSS.registerProperty({name: '--registered-length-3', syntax: '<length>', initial
Value: '0px'}); |
25 CSS.registerProperty({name: '--registered-length-4', syntax: '<length>', initial
Value: '0px'}); | 33 CSS.registerProperty({name: '--registered-length-4', syntax: '<length>', initial
Value: '0px'}); |
26 CSS.registerProperty({name: '--registered-length-5', syntax: '<length>', initial
Value: '0px'}); | 34 CSS.registerProperty({name: '--registered-length-5', syntax: '<length>', initial
Value: '0px'}); |
27 CSS.registerProperty({name: '--registered-length-6', syntax: '<length>', initial
Value: '0px'}); | 35 CSS.registerProperty({name: '--registered-length-6', syntax: '<length>', initial
Value: '0px'}); |
| 36 CSS.registerProperty({name: '--registered-length-7', syntax: '<length>', initial
Value: '0px'}); |
28 CSS.registerProperty({name: '--registered-length-invalid', syntax: '<length>', i
nitialValue: '15px'}); | 37 CSS.registerProperty({name: '--registered-length-invalid', syntax: '<length>', i
nitialValue: '15px'}); |
29 | 38 |
| 39 CSS.registerProperty({name: '--registered-token-stream-1', syntax: '*'}); |
| 40 CSS.registerProperty({name: '--registered-token-stream-2', syntax: '*'}); |
| 41 |
30 test(function() { | 42 test(function() { |
31 computedStyle = getComputedStyle(element); | 43 computedStyle = getComputedStyle(element); |
32 assert_equals(computedStyle.getPropertyValue('--registered-length-1'), '10px
'); | 44 assert_equals(computedStyle.getPropertyValue('--registered-length-1'), '10px
'); |
33 assert_equals(computedStyle.getPropertyValue('--registered-length-2'), '10px
'); | 45 assert_equals(computedStyle.getPropertyValue('--registered-length-2'), '10px
'); |
34 assert_equals(computedStyle.getPropertyValue('--registered-length-3'), '20px
'); | 46 assert_equals(computedStyle.getPropertyValue('--registered-length-3'), '20px
'); |
35 assert_equals(computedStyle.getPropertyValue('--registered-length-4'), '60px
'); | 47 assert_equals(computedStyle.getPropertyValue('--registered-length-4'), '60px
'); |
36 assert_equals(computedStyle.getPropertyValue('--registered-length-5'), '70px
'); | 48 assert_equals(computedStyle.getPropertyValue('--registered-length-5'), '70px
'); |
37 assert_equals(computedStyle.getPropertyValue('--registered-length-6'), '80px
'); | 49 assert_equals(computedStyle.getPropertyValue('--registered-length-6'), '80px
'); |
| 50 assert_equals(computedStyle.getPropertyValue('--registered-length-7'), '123p
x'); |
38 assert_equals(computedStyle.getPropertyValue('--length-1'), ' 20px'); | 51 assert_equals(computedStyle.getPropertyValue('--length-1'), ' 20px'); |
39 assert_equals(computedStyle.getPropertyValue('--length-2'), ' 10px'); | 52 assert_equals(computedStyle.getPropertyValue('--length-2'), ' 10px'); |
| 53 assert_equals(computedStyle.getPropertyValue('--length-3'), ' calc(123px + 1
23px)'); |
40 assert_equals(computedStyle.getPropertyValue('--registered-length-invalid'),
'15px'); | 54 assert_equals(computedStyle.getPropertyValue('--registered-length-invalid'),
'15px'); |
| 55 |
| 56 assert_equals(computedStyle.getPropertyValue('--registered-token-stream-1'),
''); |
| 57 assert_equals(computedStyle.getPropertyValue('--registered-token-stream-2'),
'fallback'); |
| 58 assert_equals(computedStyle.getPropertyValue('--token-stream-1'), 'moo'); |
41 }, "var() references work with registered properties"); | 59 }, "var() references work with registered properties"); |
42 </script> | 60 </script> |
OLD | NEW |