blob: 5ccbaef46f742b62eea6ca8662e8feafdbf6407f [file] [log] [blame]
<!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>