121 lines
5.3 KiB
HTML
121 lines
5.3 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>
|
|
#test1 {
|
|
--a: 10em;
|
|
--b: 10em;
|
|
}
|
|
</style>
|
|
<div>
|
|
<div id=test1><p>test</p></div>
|
|
</div>
|
|
<script>
|
|
|
|
var computedStyle = getComputedStyle(test1);
|
|
var inlineStyle = test1.style;
|
|
var sheetStyle = document.styleSheets[0].cssRules[0].style;
|
|
|
|
test(function() {
|
|
// Nothing registered yet, whatever you specify works
|
|
assert_equals(computedStyle.getPropertyValue('--a'), '10em');
|
|
assert_equals(computedStyle.getPropertyValue('--b'), '10em');
|
|
|
|
inlineStyle.setProperty('--a', 'hello');
|
|
inlineStyle.setProperty('--b', 'bonjour');
|
|
|
|
assert_equals(inlineStyle.getPropertyValue('--a'), 'hello');
|
|
assert_equals(inlineStyle.getPropertyValue('--b'), 'bonjour');
|
|
assert_equals(computedStyle.getPropertyValue('--a'), 'hello');
|
|
assert_equals(computedStyle.getPropertyValue('--b'), 'bonjour');
|
|
}, "CSSOM setters function as expected for unregistered properties");
|
|
|
|
test(function() {
|
|
CSS.registerProperty({name: '--a', syntax: '<length>', initialValue: '0px', inherits: false});
|
|
CSS.registerProperty({name: '--registered', syntax: '<length>', initialValue: '0px', inherits: false});
|
|
}, "CSS.registerProperty");
|
|
|
|
test(function() {
|
|
assert_equals(inlineStyle.getPropertyValue('--a'), 'hello');
|
|
assert_equals(inlineStyle.getPropertyValue('--b'), 'bonjour');
|
|
assert_equals(computedStyle.getPropertyValue('--a'), '0px');
|
|
assert_equals(computedStyle.getPropertyValue('--b'), 'bonjour');
|
|
}, "Formerly valid values are still readable from inline styles but are computed as the unset value");
|
|
|
|
test(function() {
|
|
inlineStyle.setProperty('--a', 'hi');
|
|
inlineStyle.setProperty('--b', 'hi');
|
|
assert_equals(inlineStyle.getPropertyValue('--a'), 'hello');
|
|
assert_equals(inlineStyle.getPropertyValue('--b'), 'hi');
|
|
}, "Values not matching the registered type can't be set");
|
|
|
|
test(function() {
|
|
inlineStyle.removeProperty('--a');
|
|
inlineStyle.setProperty('--b', '');
|
|
assert_equals(inlineStyle.getPropertyValue('--a'), '');
|
|
assert_equals(inlineStyle.getPropertyValue('--b'), '');
|
|
assert_equals(computedStyle.getPropertyValue('--a'), '160px');
|
|
assert_equals(computedStyle.getPropertyValue('--b'), '10em');
|
|
}, "Values can be removed from inline styles");
|
|
|
|
test(function() {
|
|
sheetStyle.setProperty('--a', 'banana'); // Invalid, no change
|
|
assert_equals(computedStyle.getPropertyValue('--a'), '160px');
|
|
sheetStyle.setProperty('--a', '20px');
|
|
assert_equals(computedStyle.getPropertyValue('--a'), '20px');
|
|
sheetStyle.setProperty('--a', 'initial');
|
|
assert_equals(computedStyle.getPropertyValue('--a'), '0px');
|
|
}, "Stylesheets can be modified by CSSOM");
|
|
|
|
test(function() {
|
|
inlineStyle.setProperty('--a', '30em');
|
|
inlineStyle.setProperty('--b', '20em');
|
|
assert_equals(inlineStyle.getPropertyValue('--a'), '30em');
|
|
assert_equals(inlineStyle.getPropertyValue('--b'), '20em');
|
|
assert_equals(computedStyle.getPropertyValue('--a'), '480px');
|
|
assert_equals(computedStyle.getPropertyValue('--b'), '20em');
|
|
inlineStyle.setProperty('--a', 'inherit');
|
|
assert_equals(inlineStyle.getPropertyValue('--a'), 'inherit');
|
|
assert_equals(computedStyle.getPropertyValue('--a'), '0px');
|
|
}, "Valid values can be set on inline styles");
|
|
|
|
test(function() {
|
|
inlineStyle.setProperty('--b', ' 20px');
|
|
inlineStyle.setProperty('--a', 'calc(var(--b) + 10px)');
|
|
assert_equals(inlineStyle.getPropertyValue('--b'), ' 20px');
|
|
assert_equals(inlineStyle.getPropertyValue('--a'), 'calc(var(--b) + 10px)');
|
|
assert_equals(computedStyle.getPropertyValue('--b'), ' 20px');
|
|
assert_equals(computedStyle.getPropertyValue('--a'), '30px');
|
|
}, "Var values are accepted");
|
|
|
|
test(function() {
|
|
inlineStyle.setProperty('--b', 'hello');
|
|
inlineStyle.setProperty('--a', 'calc(var(--b) + 15px)');
|
|
assert_equals(inlineStyle.getPropertyValue('--b'), 'hello');
|
|
assert_equals(inlineStyle.getPropertyValue('--a'), 'calc(var(--b) + 15px)');
|
|
assert_equals(computedStyle.getPropertyValue('--b'), 'hello');
|
|
assert_equals(computedStyle.getPropertyValue('--a'), '0px');
|
|
}, "Var values are accepted without validation");
|
|
|
|
test(function() {
|
|
inlineStyle.setProperty('--b', 'hello');
|
|
inlineStyle.setProperty('--a', 'calc(var(--b) 15px)');
|
|
assert_equals(inlineStyle.getPropertyValue('--b'), 'hello');
|
|
assert_equals(inlineStyle.getPropertyValue('--a'), 'calc(var(--b) 15px)');
|
|
assert_equals(computedStyle.getPropertyValue('--b'), 'hello');
|
|
assert_equals(computedStyle.getPropertyValue('--a'), '0px');
|
|
}, "Var values are accepted without validation, even when it is obvious they will not parse");
|
|
|
|
test(function() {
|
|
inlineStyle.setProperty('--b', 'hello');
|
|
inlineStyle.setProperty('--a', 'calc(var(--registered) 15px)');
|
|
assert_equals(inlineStyle.getPropertyValue('--b'), 'hello');
|
|
assert_equals(inlineStyle.getPropertyValue('--a'), 'calc(var(--registered) 15px)');
|
|
assert_equals(computedStyle.getPropertyValue('--b'), 'hello');
|
|
assert_equals(computedStyle.getPropertyValue('--a'), '0px');
|
|
}, "Var values are accepted without validation, even when it is obvious they will not parse (typed)");
|
|
|
|
</script>
|