57 lines
1.7 KiB
HTML
57 lines
1.7 KiB
HTML
<!DOCTYPE html><!-- webkit-test-runner [ CSSCustomPropertiesAndValuesEnabled=true ] -->
|
|
<script src="../resources/testharness.js"></script>
|
|
<script src="../resources/testharnessreport.js"></script>
|
|
|
|
<style>
|
|
#test1 {
|
|
font-size: 10px;
|
|
--my-custom-prop: 10em;
|
|
width: var(--my-custom-prop);
|
|
}
|
|
#test2 {
|
|
font-size: 10px;
|
|
--my-custom-prop: 10ex;
|
|
width: var(--my-custom-prop);
|
|
}
|
|
#test3 {
|
|
--my-custom-prop: 10px;
|
|
font-size: calc(var(--my-custom-prop) + 10px);
|
|
width: calc(var(--my-custom-prop) + 10em);
|
|
}
|
|
</style>
|
|
<div>
|
|
<div id="test1"><p>test</p></div>
|
|
<div id="test2"><p>test</p></div>
|
|
<div id="test3"><p>test</p></div>
|
|
</div>
|
|
<script>
|
|
|
|
function test_prop(id, prop, expected) {
|
|
assert_equals(window.getComputedStyle(document.getElementById(id)).getPropertyValue(prop).trim(), expected);
|
|
}
|
|
|
|
test(function() {
|
|
CSS.registerProperty({
|
|
name: '--my-custom-prop',
|
|
syntax: '<length>',
|
|
inherits: true,
|
|
initialValue: '0px'
|
|
})
|
|
}, "Registration is successful");
|
|
test(function() {
|
|
test_prop('test1', '--my-custom-prop', '100px');
|
|
test_prop('test1', 'width', '100px');
|
|
}, "Test 1");
|
|
test(function() {
|
|
const floatA = parseFloat(window.getComputedStyle(document.getElementById('test2')).getPropertyValue('--my-custom-prop').trim().replace(/px/gi, ''));
|
|
const floatB = parseFloat(window.getComputedStyle(document.getElementById('test2')).getPropertyValue('width').trim().replace(/px/gi, ''));
|
|
assert_true(Math.abs(floatA - 44.8) < 0.1);
|
|
assert_true(Math.abs(floatB - 44.8) < 0.1);
|
|
}, "Test 2");
|
|
test(function() {
|
|
test_prop('test3', '--my-custom-prop', '10px');
|
|
test_prop('test3', 'font-size', '20px');
|
|
test_prop('test3', 'width', '210px');
|
|
}, "Test 3");
|
|
</script>
|