Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-05 13:40:08 +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

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

@ -18,134 +18,147 @@
<script>
for (let element of [divWithFontSizeSet, divWithFontSizeInherited]) {
let id = element.id;
// Generate a property and temporarily set its value. Then call 'fn' with
// the name of the generated property.
function with_custom_property(element, reg, value, fn) {
if (element.id.length == 0)
throw 'The specified element must have an ID';
// Generate a property and temporarily set its value. Then call 'fn' with
// the name of the generated property.
function with_custom_property(reg, value, fn) {
let name = generate_property(reg);
let name = generate_property(reg);
// Because we want to include the parsing step, insert a stylesheet
// node with textContent.
let node = document.createElement('style');
node.textContent = `#${id} { ${name}:${value}; }`;
document.body.append(node);
// Because we want to include the parsing step, insert a stylesheet
// node with textContent.
let node = document.createElement('style');
node.textContent = `#${element.id} { ${name}:${value}; }`;
document.body.append(node);
try {
fn(name);
} finally {
node.remove();
}
try {
fn(name);
} finally {
node.remove();
}
function assert_computed_value(syntax, value, expected) {
with_custom_property(syntax, value, (name) => {
let actual = getComputedStyle(element).getPropertyValue(name);
assert_equals(actual, expected);
});
}
// Computes an absolute reference value for some length.
//
// E.g. to figure out how many pixels '10vh' is, do length_ref('10vh').
function length_ref(value, refnode = ref) {
try {
// The reference property 'min-height' is chosen arbitrarily, but
// avoid properties with "resolved value is used value"-behavior
// [1], as it may affect rounding, and custom properties do not
// have this behavior.
//
// [1] https://drafts.csswg.org/cssom/#resolved-values
const ref_property = 'min-height';
refnode.style = `${ref_property}: ${value}`;
return getComputedStyle(refnode).getPropertyValue(ref_property);
} finally {
refnode.style = '';
}
}
test(function() {
assert_computed_value('<length>', '12px', '12px');
assert_computed_value('<length>', '13vw', length_ref('13vw'));
assert_computed_value('<length>', '14em', '140px');
assert_computed_value('<length>', '15vmin', length_ref('15vmin'));
assert_computed_value('<length>', 'calc(16px - 7em + 10vh)', length_ref('calc(10vh - 54px)'));
with_custom_property('<length>', '14em', (name) => {
assert_computed_value('<length>', `var(${name})`, '140px');
});
}, "<length> values are computed correctly for " + id);
test(function() {
assert_computed_value('<length-percentage>', '17em', '170px');
assert_computed_value('<length-percentage>', '18%', '18%');
assert_computed_value('<length-percentage>', 'calc(19em - 2%)', 'calc(190px + -2%)');
}, "<length-percentage> values are computed correctly for " + id);
test(function() {
assert_computed_value('<length>#', '10px, 3em', '10px, 30px');
assert_computed_value('<length>#', '10px, 3em', '10px, 30px');
assert_computed_value('<length>#', '4em ,9px', '40px, 9px');
assert_computed_value('<length>#', '8em', '80px');
}, "<length># values are computed correctly for " + id);
test(function() {
assert_computed_value('<length-percentage>#', '3% , 10vmax , 22px', ['3%', length_ref('10vmax'), '22px'].join(', '));
assert_computed_value('<length-percentage>#', 'calc(50% + 1em), 4px', 'calc(10px + 50%), 4px');
assert_computed_value('<length-percentage>#', 'calc(13% + 37px)', 'calc(37px + 13%)');
}, "<length-percentage># values are computed correctly for " + id);
test(function() {
assert_computed_value('<length>+', '10px 3em', '10px 30px');
assert_computed_value('<length>+', '4em 9px', '40px 9px');
}, "<length>+ values are computed correctly for " + id);
test(function() {
assert_computed_value('<length-percentage>+', '3% 10vmax 22px', ['3%', length_ref('10vmax'), '22px'].join(' '));
assert_computed_value('<length-percentage>+', 'calc(50% + 1em) 4px', 'calc(10px + 50%) 4px');
}, "<length-percentage>+ values are computed correctly for " + id);
test(function() {
assert_computed_value('<transform-function>', 'translateX(2px)', 'translateX(2px)');
assert_computed_value('<transform-function>', 'translateX(10em)', 'translateX(100px)');
assert_computed_value('<transform-function>', 'translateX(calc(11em + 10%))', 'translateX(calc(110px + 10%))');
assert_computed_value('<transform-function>+', 'translateX(10%) scale(2)', 'translateX(10%) scale(2)');
}, "<transform-function> values are computed correctly for " + id);
test(function() {
assert_computed_value('<integer>', '15', '15');
assert_computed_value('<integer>', 'calc(15 + 15)', '30');
assert_computed_value('<integer>', 'calc(2.4)', '2');
assert_computed_value('<integer>', 'calc(2.6)', '3');
assert_computed_value('<integer>', 'calc(2.6 + 3.1)', '6');
}, "<integer> values are computed correctly for " + id);
test(function() {
assert_computed_value('<integer>+', '15 calc(2.4) calc(2.6)', '15 2 3');
}, "<integer>+ values are computed correctly for " + id);
test(function() {
assert_computed_value('<color>', '#ff0000', 'rgb(255, 0, 0)');
assert_computed_value('<color>', '#000f00', 'rgb(0, 15, 0)');
assert_computed_value('<color>', '#00000a', 'rgb(0, 0, 10)');
assert_computed_value('<color>', '#badbee', 'rgb(186, 219, 238)');
assert_computed_value('<color>', '#badbee33', 'rgba(186, 219, 238, 0.2)');
assert_computed_value('<color>', 'tomato', 'rgb(255, 99, 71)');
assert_computed_value('<color>', 'plum', 'rgb(221, 160, 221)');
assert_computed_value('<color>', 'currentcolor', 'currentcolor');
}, "<color> values are computed correctly for " + id);
test(function() {
assert_computed_value('*', 'tomato', 'tomato');
assert_computed_value('tomato | plum', 'plum', 'plum');
assert_computed_value('tomato | plum | <color>', 'plum', 'plum');
}, "ident values that look like color keywords are not converted to colors" + id);
test(function() {
assert_computed_value('*', '-50grad', '-50grad');
assert_computed_value('<angle>', '180deg', '180deg');
assert_computed_value('<angle>', '400grad', '360deg');
assert_computed_value('<angle>', 'calc(360deg + 400grad)', '720deg');
}, "<angle> values computed correctly for " + id);
}
function assert_computed_value(element, syntax, value, expected) {
with_custom_property(element, syntax, value, (name) => {
let actual = getComputedStyle(element).getPropertyValue(name);
assert_equals(actual, expected);
});
}
// Computes an absolute reference value for some length.
//
// E.g. to figure out how many pixels '10vh' is, do length_ref('10vh').
function length_ref(value, refnode = ref) {
try {
// The reference property 'min-height' is chosen arbitrarily, but
// avoid properties with "resolved value is used value"-behavior
// [1], as it may affect rounding, and custom properties do not
// have this behavior.
//
// [1] https://drafts.csswg.org/cssom/#resolved-values
const ref_property = 'min-height';
refnode.style = `${ref_property}: ${value}`;
return getComputedStyle(refnode).getPropertyValue(ref_property);
} finally {
refnode.style = '';
}
}
function test_computed_value(syntax, value, expected) {
test(function() {
assert_computed_value(divWithFontSizeSet, syntax, value, expected);
}, `${syntax} values are computed correctly [${value}]`);
}
test(function(){
const element = divWithFontSizeSet;
with_custom_property(element, '<length>', '14em', (name) => {
assert_computed_value(element, '<length>', `var(${name})`, '140px');
});
}, '<length> values computed are correctly via var()-reference');
test(function(){
const element = divWithFontSizeInherited;
with_custom_property(element, '<length>', '14em', (name) => {
assert_computed_value(element, '<length>', `var(${name})`, '140px');
});
}, '<length> values computed are correctly via var()-reference when font-size is inherited');
test(function(){
const element = divWithFontSizeInherited;
assert_computed_value(element, '<length>', '14em', '140px');
}, '<length> values are computed correctly when font-size is inherited [14em]');
test(function(){
const element = divWithFontSizeInherited;
assert_computed_value(element, '<length>', 'calc(14em + 10px)', '150px');
}, '<length> values are computed correctly when font-size is inherited [calc(14em + 10px)]');
test_computed_value('<length>', '12px', '12px');
test_computed_value('<length>', '13vw', length_ref('13vw'));
test_computed_value('<length>', '14em', '140px');
test_computed_value('<length>', '15vmin', length_ref('15vmin'));
test_computed_value('<length>', 'calc(16px - 7em + 10vh)', length_ref('calc(10vh - 54px)'));
test_computed_value('<length-percentage>', '17em', '170px');
test_computed_value('<length-percentage>', '18%', '18%');
test_computed_value('<length-percentage>', 'calc(19em - 2%)', 'calc(190px + -2%)');
test_computed_value('<length>#', '10px, 3em', '10px, 30px');
test_computed_value('<length>#', '4em ,9px', '40px, 9px');
test_computed_value('<length>#', '8em', '80px');
test_computed_value('<length-percentage>#', '3% , 10vmax , 22px', ['3%', length_ref('10vmax'), '22px'].join(', '));
test_computed_value('<length-percentage>#', 'calc(50% + 1em), 4px', 'calc(10px + 50%), 4px');
test_computed_value('<length-percentage>#', 'calc(13% + 37px)', 'calc(37px + 13%)');
test_computed_value('<length>+', '10px 3em', '10px 30px');
test_computed_value('<length>+', '4em 9px', '40px 9px');
test_computed_value('<length-percentage>+', '3% 10vmax 22px', ['3%', length_ref('10vmax'), '22px'].join(' '));
test_computed_value('<length-percentage>+', 'calc(50% + 1em) 4px', 'calc(10px + 50%) 4px');
test_computed_value('<transform-function>', 'translateX(2px)', 'translateX(2px)');
test_computed_value('<transform-function>', 'translateX(10em)', 'translateX(100px)');
test_computed_value('<transform-function>', 'translateX(calc(11em + 10%))', 'translateX(calc(110px + 10%))');
test_computed_value('<transform-function>+', 'translateX(10%) scale(2)', 'translateX(10%) scale(2)');
test_computed_value('<integer>', '15', '15');
test_computed_value('<integer>', 'calc(15 + 15)', '30');
test_computed_value('<integer>', 'calc(2.4)', '2');
test_computed_value('<integer>', 'calc(2.6)', '3');
test_computed_value('<integer>', 'calc(2.6 + 3.1)', '6');
test_computed_value('<integer>+', '15 calc(2.4) calc(2.6)', '15 2 3');
test_computed_value('<color>', '#ff0000', 'rgb(255, 0, 0)');
test_computed_value('<color>', '#000f00', 'rgb(0, 15, 0)');
test_computed_value('<color>', '#00000a', 'rgb(0, 0, 10)');
test_computed_value('<color>', '#badbee', 'rgb(186, 219, 238)');
test_computed_value('<color>', '#badbee33', 'rgba(186, 219, 238, 0.2)');
test_computed_value('<color>', 'tomato', 'rgb(255, 99, 71)');
test_computed_value('<color>', 'plum', 'rgb(221, 160, 221)');
test_computed_value('<color>', 'currentcolor', 'currentcolor');
// Custom ident values that look like color keywords should not be converted.
test_computed_value('*', 'tomato', 'tomato');
test_computed_value('tomato | plum', 'plum', 'plum');
test_computed_value('tomato | plum | <color>', 'plum', 'plum');
test_computed_value('*', '-50grad', '-50grad');
test_computed_value('<angle>', '180deg', '180deg');
test_computed_value('<angle>', '400grad', '360deg');
test_computed_value('<angle>', 'calc(360deg + 400grad)', '720deg');
test_computed_value('*', '50s', '50s');
test_computed_value('<time>', '1s', '1s');
test_computed_value('<time>', '1000ms', '1s');
test_computed_value('<time>', 'calc(1000ms + 1s)', '2s');
test_computed_value('*', '50dpi', '50dpi');
test_computed_value('<resolution>', '1dppx', '1dppx');
test_computed_value('<resolution>', '96dpi', '1dppx');
test_computed_value('<resolution>', 'calc(1dppx + 96dpi)', '2dppx');
</script>

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>

8
tests/wpt/web-platform-tests/css/css-properties-values-api/resources/utils.js
View file

@ -50,6 +50,14 @@ function any_initial_value(syntax) {
// generated. If a single string is used as the argument, it is assumed to be
// the syntax.
function generate_property(reg) {
// Verify that only valid keys are specified. This prevents the caller from
// accidentally supplying 'inherited' instead of 'inherits', for example.
if (typeof(reg) === 'object') {
const permitted = new Set(['name', 'syntax', 'initialValue', 'inherits']);
if (!Object.keys(reg).every(k => permitted.has(k)))
throw new Error('generate_property: invalid parameter');
}
let syntax = typeof(reg) === 'string' ? reg : reg.syntax;
let initial = typeof(reg.initialValue) === 'undefined' ? any_initial_value(syntax)
: reg.initialValue;

6
tests/wpt/web-platform-tests/css/css-properties-values-api/self-utils.html
View file

@ -32,4 +32,10 @@ test(function(){
}
}, 'Generated properties respect inherits flag');
test(function(){
assert_throws(new Error(), () => generate_property({syntax: '<length>', foo: 1}));
assert_throws(new Error(), () => generate_property({syntax: '<length>', inherited: false}));
assert_throws(new Error(), () => generate_property({syntax: '<length>', initial: '10px'}));
}, 'Can\'t generate property with unknown fields');
</script>