blob: 35d28d1534ed3dbf3528afc246164468461a7abf [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;
--my-custom-prop: 100px;
width: var(--my-custom-prop);
}
#parent2 {
width: 500px;
background: blue;
}
#child2 {
background: green;
width: var(--my-custom-prop2);
}
#parent3 {
width: 500px;
background: blue;
}
#child3 {
background: green;
width: var(--my-custom-prop3);
}
#parent4 {
width: 500px;
background: blue;
}
#child4 {
background: green;
width: var(--my-custom-prop3, 300px);
}
#parent5 {
width: 500px;
background: blue;
}
#child5 {
background: green;
width: var(--my-custom-prop2, 300px);
}
</style>
<div>
<p> Specified </p>
<div id="parent1"><div id="child1"><p>100px green</p></div> </div>
<p> Not specified, use initial value </p>
<div id="parent2"><div id="child2"><p>200px green</p></div> </div>
<p> Not specified, but not registered so use initial value for width </p>
<div id="parent3"><div id="child3"><p>500px green</p></div> </div>
<p> Has a fallback for unregistered property </p>
<div id="parent4"><div id="child4"><p>300px green</p></div> </div>
<p> Has a fallback for a registered property </p>
<div id="parent5"><div id="child5"><p>200px green</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: '--my-custom-prop',
syntax: '<length>',
inherits: false,
initialValue: '200px'
})
CSS.registerProperty({
name: '--my-custom-prop2',
syntax: '<length>',
inherits: false,
initialValue: '200px'
})
}, "Registration is successful");
test(function() {
test_prop('child1', 'width', '100px');
test_prop('child1', '--my-custom-prop', '100px');
test_prop('child1', '--my-custom-prop2', '200px');
}, "JS Attributes are valid for element 1");
test(function() {
test_prop('child2', 'width', '200px');
test_prop('child2', '--my-custom-prop', '200px');
test_prop('child2', '--my-custom-prop2', '200px');
}, "JS Attributes are valid for element 2");
test(function() {
test_prop('child3', 'width', '500px');
test_prop('child3', '--my-custom-prop3', '');
test_prop('child3', '--my-custom-prop2', '200px');
}, "JS Attributes are valid for element 3");
test(function() {
test_prop('child4', 'width', '300px');
test_prop('child5', 'width', '200px');
test_prop('child4', '--my-custom-prop2', '200px');
test_prop('child5', '--my-custom-prop2', '200px');
}, "JS Attributes are valid for element 4 and 5");
</script>