| <!DOCTYPE HTML> |
| <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); |
| |
| --length-1: 20px; |
| --length-2: var(--registered-length-1); |
| |
| --percentage: 10%; |
| --registered-length-invalid: var(--percentage); |
| } |
| </style> |
| <div id=element></div> |
| <script> |
| 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-invalid', syntax: '<length>', initialValue: '15px'}); |
| |
| test(function() { |
| 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('--length-1'), ' 20px'); |
| assert_equals(computedStyle.getPropertyValue('--length-2'), ' 10px'); |
| assert_equals(computedStyle.getPropertyValue('--registered-length-invalid'), '15px'); |
| }, "var() references work with registered properties"); |
| </script> |