Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-06 06:00:15 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision b704e37ec97fe90b3a3d59c10f78c21907b5b576

Browse source
This commit is contained in:
WPT Sync Bot 2018-10-30 21:33:00 -04:00
parent cc0ac89e1a
commit 9f516d3717
70 changed files with 1688 additions and 806 deletions
Download patch file Download diff file Expand all files Collapse all files

62
tests/wpt/web-platform-tests/css/css-properties-values-api/registered-property-initial.html
View file

@ -1,35 +1,45 @@
<!DOCTYPE HTML>
<!DOCTYPE html>
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#dom-propertydescriptor-initialvalue" />
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#register-a-custom-property" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#target {
background: var(--inherited-color);
color: var(--non-inherited-color);
}
</style>
<script src="./resources/utils.js"></script>
<div id=target></div>
<script>
test(function() {
CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: 'calc(10px + 15px)', inherits: false});
CSS.registerProperty({name: '--length-percentage', syntax: '<length-percentage>', initialValue: 'calc(1in + 10% + 4px)', inherits: false});
CSS.registerProperty({name: '--inherited-color', syntax: '<color>', initialValue: 'pink', inherits: true});
CSS.registerProperty({name: '--non-inherited-color', syntax: '<color>', initialValue: 'purple', inherits: false});
CSS.registerProperty({name: '--transform-function', syntax: '<transform-function>', initialValue: 'rotate(42deg)', inherits: false});
CSS.registerProperty({name: '--single-transform-list', syntax: '<transform-list>', initialValue: 'scale(calc(2 + 2))', inherits: false});
CSS.registerProperty({name: '--multiple-transform-list', syntax: '<transform-list>', initialValue: 'scale(calc(2 + 1)) translateX(calc(3px + 1px))', inherits: false});
computedStyle = getComputedStyle(target);
assert_equals(computedStyle.getPropertyValue('--length'), '25px');
assert_equals(computedStyle.getPropertyValue('--length-percentage'), 'calc(100px + 10%)');
assert_equals(computedStyle.getPropertyValue('--inherited-color'), 'rgb(255, 192, 203)');
assert_equals(computedStyle.getPropertyValue('--non-inherited-color'), 'rgb(128, 0, 128)');
assert_equals(computedStyle.getPropertyValue('--transform-function'), 'rotate(42deg)');
assert_equals(computedStyle.getPropertyValue('--single-transform-list'), 'scale(4)');
assert_equals(computedStyle.getPropertyValue('--multiple-transform-list'), 'scale(3) translateX(4px)');
function test_initial_value(reg, expected) {
let suffix = reg.inherits === true ? ', inherits' : '';
test(function(){
let name = generate_property(reg);
let actual = getComputedStyle(target).getPropertyValue(name);
assert_equals(actual, expected);
}, `Initial value for ${reg.syntax} correctly computed [${reg.initialValue}${suffix}]`);
}
test_initial_value({ syntax: '<length>', initialValue: 'calc(10px + 15px)' }, '25px');
test_initial_value({ syntax: '<length-percentage>', initialValue: 'calc(1in + 10% + 4px)' }, 'calc(100px + 10%)');
test_initial_value({ syntax: '<color>', initialValue: 'pink', inherits: true }, 'rgb(255, 192, 203)');
test_initial_value({ syntax: '<color>', initialValue: 'purple' }, 'rgb(128, 0, 128)');
test_initial_value({ syntax: '<transform-function>', initialValue: 'rotate(42deg)' }, 'rotate(42deg)');
test_initial_value({ syntax: '<transform-list>', initialValue: 'scale(calc(2 + 2))' }, 'scale(4)');
test_initial_value({ syntax: '<transform-list>', initialValue: 'scale(calc(2 + 1)) translateX(calc(3px + 1px))' }, 'scale(3) translateX(4px)');
// Test that the initial value of the custom property 'reg' is successfully
// substituted into 'property'.
function test_substituted_value(reg, property, expected) {
let inherits_text = reg.inherits === true ? 'inherited' : 'non-inherited';
test(function(){
try {
let name = generate_property(reg);
target.style = `${property}:var(${name});`;
assert_equals(getComputedStyle(target).getPropertyValue(property), expected);
} finally {
target.style = '';
}
}, `Initial ${inherits_text} value can be substituted [${reg.initialValue}, ${property}]`);
}
test_substituted_value({ syntax: '<color>', initialValue: 'purple', inherits: true }, 'color', 'rgb(128, 0, 128)');
test_substituted_value({ syntax: '<color>', initialValue: 'pink' }, 'background-color', 'rgb(255, 192, 203)');
assert_equals(computedStyle.backgroundColor, 'rgb(255, 192, 203)');
assert_equals(computedStyle.color, 'rgb(128, 0, 128)');
}, "Initial values of registered properties can be referenced when no custom properties are explicitly set.");
</script>