131 lines
3.5 KiB
HTML
131 lines
3.5 KiB
HTML
<!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>
|