blob: 1f1bed5d66d51c6c56de380b2e780749d429e545 [file] [log] [blame]
<!DOCTYPE html><!-- webkit-test-runner [ CSSCustomPropertiesAndValuesEnabled=true ] -->
<!-- https://chromium.googlesource.com/chromium/src/+/01ce431409e3a019858677626a983c55168da6dc/third_party/WebKit/LayoutTests/custom-properties/register-property.html -->
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
#parent1 {
width: 500px;
background: blue;
}
#child1 {
background: green;
font-size: 10px;
--a: 10em;
width: var(--a);
}
#parent2 {
width: 500px;
background: blue;
--a: 10em;
font-size: calc( var(--a) + -150px);
}
#child2 {
background: green;
width: var(--a);
}
#parent3 {
width: 500px;
background: blue;
--b: 10em;
font-size: calc( var(--b) + -150px);
}
#child3 {
background: green;
width: var(--b);
}
#parent4 {
width: 500px;
background: blue;
--b: 10em;
font-size: calc( var(--b) + -150px);
}
#child4 {
background: green;
--a: var(--b);
font-size: var(--a);
width: var(--a);
}
#parent5 {
width: 500px;
background: blue;
--b: 5em;
font-size: calc( var(--b) + -70px);
}
#child5 {
background: green;
--c: var(--b);
font-size: var(--c);
width: var(--c);
}
</style>
<div>
<div id="parent1"><div id="child1"><p>test</p></div></div>
<div id="parent2"><div id="child2"><p>test</p></div></div>
<div id="parent3"><div id="child3"><p>test</p></div></div>
<div id="parent4"><div id="child4"><p>test</p></div></div>
<div id="parent5"><div id="child5"><p>test</p></div></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: '--a',
syntax: '<length>',
inherits: true,
initialValue: '200px'
})
}, "Registration is successful");
test(function() {
test_prop('child1', 'width', '100px');
test_prop('child1', '--a', '100px');
test_prop('child1', '--b', '');
test_prop('parent1', '--a', '200px');
test_prop('parent1', '--b', '');
}, "JS Attributes are valid for element 1");
test(function() {
test_prop('child2', 'width', '160px');
test_prop('child2', '--a', '160px');
test_prop('child2', '--b', '');
test_prop('child2', 'font-size', '16px');
test_prop('parent2', '--a', '160px');
test_prop('parent2', '--b', '');
test_prop('parent2', 'font-size', '16px');
}, "JS Attributes are valid for element 2");
test(function() {
test_prop('child3', 'width', '100px');
test_prop('child3', '--a', '200px');
test_prop('child3', '--b', '10em');
test_prop('child3', 'font-size', '10px');
test_prop('parent3', '--a', '200px');
test_prop('parent3', '--b', '10em');
test_prop('parent3', 'font-size', '10px');
}, "JS Attributes are valid for element 3");
test(function() {
test_prop('child4', 'width', '100px');
test_prop('child4', '--a', '100px');
test_prop('child4', '--b', '10em');
test_prop('child4', 'font-size', '10px');
test_prop('parent4', '--a', '200px');
test_prop('parent4', '--b', '10em');
test_prop('parent4', 'font-size', '10px');
}, "JS Attributes are valid for element 4");
test(function() {
test_prop('child5', 'width', '250px');
test_prop('child5', '--c', '5em');
test_prop('child5', '--b', '5em');
test_prop('child5', 'font-size', '50px');
test_prop('parent5', '--a', '200px');
test_prop('parent5', '--b', '5em');
test_prop('parent5', 'font-size', '10px');
}, "JS Attributes are valid for element 5");
</script>