64 lines
2.9 KiB
HTML
64 lines
2.9 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 {
|
|
font-size: var(--foo, 30px);
|
|
--foo: var(--bar, 20px);
|
|
--bar: var(--baz, var(--foo));
|
|
}
|
|
</style>
|
|
<div>
|
|
<h2 id=test1>This is text</h2>
|
|
</div>
|
|
<script>
|
|
var computedStyle = getComputedStyle(test1);
|
|
var inlineStyle = test1.style;
|
|
|
|
test(function() {
|
|
assert_equals(computedStyle.getPropertyValue('--baz'), '');
|
|
assert_equals(computedStyle.getPropertyValue('--foo'), '');
|
|
assert_equals(computedStyle.getPropertyValue('--bar'), '');
|
|
assert_equals(computedStyle.getPropertyValue('font-size'), '30px');
|
|
}, "Fallback is handled correctly, and we don't crash");
|
|
|
|
test(function() {
|
|
inlineStyle.setProperty('--baz', ' 40px');
|
|
assert_equals(computedStyle.getPropertyValue('--baz'), ' 40px');
|
|
assert_equals(computedStyle.getPropertyValue('--foo'), '');
|
|
assert_equals(computedStyle.getPropertyValue('--bar'), '');
|
|
assert_equals(computedStyle.getPropertyValue('--baz'), ' 40px');
|
|
assert_equals(computedStyle.getPropertyValue('font-size'), '30px');
|
|
inlineStyle.removeProperty('--baz');
|
|
assert_equals(computedStyle.getPropertyValue('--baz'), '');
|
|
assert_equals(computedStyle.getPropertyValue('--foo'), '');
|
|
assert_equals(computedStyle.getPropertyValue('--bar'), '');
|
|
assert_equals(computedStyle.getPropertyValue('font-size'), '30px');
|
|
assert_equals(computedStyle.getPropertyValue('--baz'), '');
|
|
}, "Setting the inline style is handled correctly");
|
|
|
|
test(function() {
|
|
CSS.registerProperty({name: '--foo', syntax: '<length>', initialValue: '200px', inherits: true});
|
|
CSS.registerProperty({name: '--bar', syntax: '<length>', initialValue: '200px', inherits: true});
|
|
CSS.registerProperty({name: '--baz', syntax: '<length>', initialValue: '200px', inherits: true});
|
|
}, "CSS.registerProperty");
|
|
|
|
test(function() {
|
|
inlineStyle.setProperty('--baz', ' 40px');
|
|
assert_equals(computedStyle.getPropertyValue('--baz'), '40px');
|
|
assert_equals(computedStyle.getPropertyValue('--foo'), '');
|
|
assert_equals(computedStyle.getPropertyValue('--bar'), '');
|
|
assert_equals(computedStyle.getPropertyValue('--baz'), '40px');
|
|
assert_equals(computedStyle.getPropertyValue('font-size'), '30px');
|
|
inlineStyle.removeProperty('--baz');
|
|
assert_equals(computedStyle.getPropertyValue('--baz'), '200px');
|
|
assert_equals(computedStyle.getPropertyValue('--foo'), '');
|
|
assert_equals(computedStyle.getPropertyValue('--bar'), '');
|
|
assert_equals(computedStyle.getPropertyValue('font-size'), '30px');
|
|
assert_equals(computedStyle.getPropertyValue('--baz'), '200px');
|
|
}, "Setting the inline style is handled correctly when registered");
|
|
|
|
</script>
|