118 lines
3.5 KiB
HTML
118 lines
3.5 KiB
HTML
<!DOCTYPE html><!-- webkit-test-runner [ CSSCustomPropertiesAndValuesEnabled=true ] -->
|
|
<script src="../resources/testharness.js"></script>
|
|
<script src="../resources/testharnessreport.js"></script>
|
|
|
|
<style>
|
|
#parent1 {
|
|
width: 500px;
|
|
background: blue;
|
|
font-size: 16px;
|
|
--my-custom-prop: calc(10em + 10px);
|
|
}
|
|
#child1 {
|
|
background: green;
|
|
font-size: 32px;
|
|
width: var(--my-custom-prop);
|
|
}
|
|
|
|
#parent2 {
|
|
width: 500px;
|
|
background: blue;
|
|
font-size: 16px;
|
|
--my-custom-prop2: calc(10em + 10px);
|
|
}
|
|
#child2 {
|
|
background: green;
|
|
font-size: 32px;
|
|
width: var(--my-custom-prop2);
|
|
}
|
|
|
|
#parent3 {
|
|
width: 500px;
|
|
background: blue;
|
|
font-size: 16px;
|
|
--my-custom-prop-unreg: calc(10em + 10px);
|
|
}
|
|
#child3 {
|
|
background: green;
|
|
font-size: 32px;
|
|
width: var(--my-custom-prop-unreg);
|
|
}
|
|
|
|
#calcTest {
|
|
--my-custom-prop-unreg: calc(var(--my-custom-prop) + 10px);
|
|
}
|
|
#calcTest2 {
|
|
--my-custom-prop2: calc(var(--my-custom-prop) + 10px);
|
|
}
|
|
#calcTest3 {
|
|
--my-custom-prop2: calc(100px + 10px);
|
|
}
|
|
|
|
#subTest {
|
|
--my-custom-prop-unreg: var(--my-custom-prop);
|
|
}
|
|
</style>
|
|
<div>
|
|
<p> Test calc + inherits, registered, inherits=true</p>
|
|
<div id="parent1"><div id="child1"><p>170px green</p></div> </div>
|
|
<p> Test calc + inherits, registered, inherits=false </p>
|
|
<div id="parent2"><div id="child2"><p>200px green</p></div> </div>
|
|
<p> Test calc + inherits, not registered </p>
|
|
<div id="parent3"><div id="child3"><p>330px green</p></div> </div>
|
|
<div id="calcTest"><p>Calc test with unregistered property</p></div>
|
|
<div id="calcTest2"><p>Calc test with registered property</p></div>
|
|
<div id="calcTest3"><p>Calc test with registered property</p></div>
|
|
<div id="subTest"><p>Substitution 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: '200px'
|
|
})
|
|
|
|
CSS.registerProperty({
|
|
name: '--my-custom-prop2',
|
|
syntax: '<length>',
|
|
inherits: false,
|
|
initialValue: '200px'
|
|
})
|
|
}, "Registration is successful");
|
|
test(function() {
|
|
test_prop('parent1', '--my-custom-prop', '170px');
|
|
test_prop('child1', '--my-custom-prop', '170px');
|
|
test_prop('child1', 'width', '170px');
|
|
test_prop('child1', '--my-custom-prop2', '200px');
|
|
}, "JS Attributes are valid for element 1");
|
|
test(function() {
|
|
test_prop('parent2', '--my-custom-prop2', '170px');
|
|
test_prop('child2', '--my-custom-prop2', '200px');
|
|
test_prop('child2', 'width', '200px');
|
|
}, "JS Attributes are valid for element 2");
|
|
test(function() {
|
|
test_prop('parent3', '--my-custom-prop-unreg', 'calc(10em + 10px)');
|
|
test_prop('child3', '--my-custom-prop-unreg', 'calc(10em + 10px)');
|
|
test_prop('child3', 'width', '330px');
|
|
}, "JS Attributes are valid for element 3");
|
|
test(function() {
|
|
test_prop('calcTest', '--my-custom-prop-unreg', 'calc(200px + 10px)');
|
|
}, "Test that calc is not substituted for unregistered property");
|
|
test(function() {
|
|
test_prop('calcTest2', '--my-custom-prop2', '210px');
|
|
}, "Test that calc is substituted for custom property with length syntax");
|
|
test(function() {
|
|
test_prop('calcTest3', '--my-custom-prop2', '110px');
|
|
}, "Test that calc is substituted for custom property with length syntax 2");
|
|
test(function() {
|
|
test_prop('subTest', '--my-custom-prop-unreg', '200px');
|
|
}, "Test that variables are substituted from JS");
|
|
</script>
|