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

Update web-platform-tests to revision 824f0c1df556305042b8aa8073c32e9ef86c3efa

Browse source
This commit is contained in:
WPT Sync Bot 2018-10-18 21:30:10 -04:00
parent bcafe4188f
commit d0eccdba1a
131 changed files with 3087 additions and 705 deletions
Download patch file Download diff file Expand all files Collapse all files

22
tests/wpt/web-platform-tests/css/css-exclusions/inheritance.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS Exclusions properties</title>
<link rel="help" href="https://drafts.csswg.org/css-exclusions/#property-index">
<meta name="assert" content="Properties do not inherit.">
<meta name="assert" content="Properties have initial values according to the spec.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
assert_not_inherited('wrap-flow', 'auto', 'both');
assert_not_inherited('wrap-through', 'wrap', 'none');
</script>
</body>
</html>

25
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-interpolation-001.https.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Interpolated &lt;angle&gt; values reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
registerAndInterpolateProperty({
on: target, from: '100deg', to: '200deg',
name: '--prop', syntax: '<angle>'
});
expectWorkletValue(target, '--prop', '[CSSUnitValue 150deg]');
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

25
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-interpolation-002.https.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Interpolated &lt;color&gt; values reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
registerAndInterpolateProperty({
on: target, from: 'rgb(128, 100, 200)', to: 'red',
name: '--prop', syntax: '<color>'
});
expectWorkletValue(target, '--prop', '[CSSStyleValue rgb(192, 50, 100)]');
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

25
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-interpolation-003.https.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Interpolated &lt;integer&gt; values reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
registerAndInterpolateProperty({
on: target, from: '32', to: '64',
name: '--prop', syntax: '<integer>'
});
expectWorkletValue(target, '--prop', '[CSSUnitValue 48]');
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

25
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-interpolation-004.https.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Interpolated &lt;length-percentage&gt; values reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
registerAndInterpolateProperty({
on: target, from: '10px', to: '20%',
name: '--prop', syntax: '<length-percentage>'
});
expectWorkletValue(target, '--prop', '[CSSMathSum calc(5px + 10%)]');
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

35
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-interpolation-005.https.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Interpolated &lt;length&gt; values reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
target.style.setProperty('font-size', '10px');
registerAndInterpolateProperty({
on: target, from: '10px', to: '20px',
name: '--prop-1', syntax: '<length>'
});
registerAndInterpolateProperty({
on: target, from: '100px', to: '20em',
name: '--prop-2', syntax: '<length>'
});
expectWorkletValues(target, {
'--prop-1': '[CSSUnitValue 15px]',
'--prop-2': '[CSSUnitValue 150px]'
});
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

25
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-interpolation-006.https.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Interpolated &lt;number&gt; values reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
registerAndInterpolateProperty({
on: target, from: '8.5', to: '16.5',
name: '--prop', syntax: '<number>'
});
expectWorkletValue(target, '--prop', '[CSSUnitValue 12.5]');
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

25
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-interpolation-007.https.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Interpolated &lt;percentage&gt; values reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
registerAndInterpolateProperty({
on: target, from: '40%', to: '60%',
name: '--prop', syntax: '<percentage>'
});
expectWorkletValue(target, '--prop', '[CSSUnitValue 50%]');
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

25
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-interpolation-008.https.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Interpolated &lt;resolution&gt; values reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
registerAndInterpolateProperty({
on: target, from: '100dppx', to: '900dppx',
name: '--prop', syntax: '<resolution>'
});
expectWorkletValue(target, '--prop', '[CSSUnitValue 500dppx]');
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

25
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-interpolation-009.https.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Interpolated &lt;time&gt; values reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
registerAndInterpolateProperty({
on: target, from: '42s', to: '62s',
name: '--prop', syntax: '<time>'
});
expectWorkletValue(target, '--prop', '[CSSUnitValue 52s]');
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

33
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-interpolation-010.https.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Interpolated list values reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
registerAndInterpolateProperty({
on: target, from: '10px 20px', to: '20px 30px',
name: '--prop-1', syntax: '<length>+'
});
registerAndInterpolateProperty({
on: target, from: '10px', to: '20px',
name: '--prop-2', syntax: '<length>+'
});
expectWorkletValues(target, {
'--prop-1': ['[CSSUnitValue 15px]', '[CSSUnitValue 25px]'],
'--prop-2': '[CSSUnitValue 15px]'
});
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

57
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-stylemap.https.html Normal file
View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Test styleMap functions</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<style>
#target {
width: 100px;
height: 100px;
background: paint(style-map);
}
</style>
<div id="target"></div>
<script>
try {
CSS.registerProperty({
name: '--prop',
syntax: '<length>+',
initialValue: '10px 10px 10px 10px',
inherits: false
});
const worklet = `
registerPaint('style-map', class {
static get inputProperties() { return ['--prop']; }
paint(ctx, geom, styleMap) {
let serialize = (v) => '[' + v.constructor.name + ' ' + v.toString() + ']';
let expected = '[CSSUnitValue 10px]';
let isExpected = x => serialize(x) === expected;
let pass = true;
pass &= styleMap.has('--prop');
pass &= isExpected(styleMap.get('--prop'));
pass &= styleMap.getAll('--prop').length == 4;
pass &= styleMap.getAll('--prop').every(isExpected);
pass &= Array.from(styleMap).filter(e => e[0] == '--prop')[0][1].length == 4;
pass &= Array.from(styleMap).filter(e => e[0] == '--prop')[0][1].every(isExpected);
ctx.strokeStyle = pass ? 'green' : 'red';
ctx.lineWidth = 4;
ctx.strokeRect(0, 0, geom.width, geom.height);
}
});`
importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, worklet);
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

174
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-type.https.html
View file

@ -1,174 +0,0 @@
<!DOCTYPE html>
<html class="reftest-wait">
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<style>
.container {
width: 100px;
height: 100px;
}
#canvas-geometry {
background-image: paint(geometry);
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<body>
<div id="canvas-geometry" class="container"></div>
<script id="code" type="text/worklet">
// Globals that must be prepended to this script:
// - debugLog: A function that logs errors.
// - props: Test data.
registerPaint('geometry', class {
static get inputProperties() { return props.map(p => p.name); }
paint(ctx, geom, styleMap) {
ctx.strokeStyle = 'green';
for (let prop of props) {
// Read values using get, getAll and iterator:
let valueFromGet = styleMap.get(prop.name);
let valueFromGetAll = styleMap.getAll(prop.name);
let valueFromIterator = Array.from(styleMap).filter(e => e[0] == prop.name)[0][1];
// Serialize 'actual'-values for all three cases:
let serialize = v => v.constructor.name + '=' + v.toString()
let actualFromGet = serialize(valueFromGet);
let actualFromGetAll = valueFromGetAll.map(serialize).join(',');
let actualFromIterator = valueFromIterator.map(serialize).join(',');
// Create 'expected'-values for all three cases:
let expectedForGet = prop.expected[0];
let expectedForGetAll = prop.expected.join(',');
let expectedForIterator = expectedForGetAll;
let pass = true;
// Assertions:
if (actualFromGet !== expectedForGet) {
debugLog(`FAIL: StylePropertyMap.get: actual: ${actualFromGet} expected: ${expectedForGet}`);
pass = false;
}
if (actualFromGetAll !== expectedForGetAll) {
debugLog(`FAIL: StylePropertyMap.getAll: actual: ${actualFromGetAll} expected: ${expectedForGetAll}`);
pass = false;
}
if (actualFromIterator !== expectedForIterator) {
debugLog(`FAIL: StylePropertyMap iterator: actual: ${actualFromIterator} expected: ${expectedForIterator}`);
pass = false;
}
if (!pass)
ctx.strokeStyle = 'red';
else
debugLog('PASS', prop.syntax, actualFromGetAll, expectedForGetAll);
}
ctx.lineWidth = 4;
ctx.strokeRect(0, 0, geom.width, geom.height);
}
});
</script>
<script>
// A copy of this array (automatically enriched with 'name' and 'expected')
// is also available in the worklet.
let props = [
// Initial values.
{ syntax: '*', initialValue: 'if(){}' },
{ syntax: '<angle>', initialValue: '42deg' },
{ syntax: '<color>', initialValue: '#fefefe' },
{ syntax: '<custom-ident>', initialValue: 'none' },
{ syntax: '<image>', initialValue: 'linear-gradient(red, red)' },
{ syntax: '<image>', initialValue: 'url(http://a.com/a)' },
{ syntax: '<integer>', initialValue: '42' },
{ syntax: '<length-percentage>', initialValue: '10%' },
{ syntax: '<length-percentage>', initialValue: '10px' },
{ syntax: '<length-percentage>', initialValue: 'calc(10px + 10%)' },
{ syntax: '<length>', initialValue: '1337px' },
{ syntax: '<number>', initialValue: '42.5' },
{ syntax: '<percentage>', initialValue: '42%' },
{ syntax: '<resolution>', initialValue: '300dpi' },
{ syntax: '<time>', initialValue: '3600s' },
{ syntax: '<url>', initialValue: 'url(http://a.com/a)' },
{ syntax: 'thing', initialValue: 'thing' },
{ syntax: '<length> | <angle>', initialValue: '1337px' },
{ syntax: '<angle> | <image>', initialValue: '1turn' },
{ syntax: '<length>+', initialValue: '1337px' },
{ syntax: '<length>+', initialValue: '1337px 1338px', count: 2 },
{ syntax: '<length>#', initialValue: '1337px' },
{ syntax: '<length>#', initialValue: '1337px, 1338px', count: 2 },
// Non-initial values:
{ syntax: '*', initialValue: 'fail', value: 'if(){}' },
{ syntax: '<angle> | fail', initialValue: 'fail', value: '42deg' },
{ syntax: '<color> | fail', initialValue: 'fail', value: '#fefefe' },
{ syntax: '<custom-ident> | fail', initialValue: 'fail', value: 'none' },
{ syntax: '<image> | fail', initialValue: 'fail', value: 'linear-gradient(red, red)' },
{ syntax: '<image> | fail', initialValue: 'fail', value: 'url(http://a.com/a)' },
{ syntax: '<integer> | fail', initialValue: 'fail', value: '42' },
{ syntax: '<length-percentage> | fail', initialValue: 'fail', value: '10%' },
{ syntax: '<length-percentage> | fail', initialValue: 'fail', value: '10px' },
{ syntax: '<length-percentage> | fail', initialValue: 'fail', value: 'calc(10px + 10%)' },
{ syntax: '<length> | fail', initialValue: 'fail', value: '1337px' },
{ syntax: '<number> | fail', initialValue: 'fail', value: '42.5' },
{ syntax: '<percentage> | fail', initialValue: 'fail', value: '42%' },
{ syntax: '<resolution> | fail', initialValue: 'fail', value: '300dpi' },
{ syntax: '<time> | fail', initialValue: 'fail', value: '3600s' },
{ syntax: '<url> | fail', initialValue: 'fail', value: 'url(http://a.com/a)' },
{ syntax: 'thing | fail', initialValue: 'fail', value: 'thing' },
{ syntax: '<length>+ | fail', initialValue: 'fail', value: '1337px' },
{ syntax: '<length>+ | fail', initialValue: 'fail', value: '1337px 1338px', count: 2 },
{ syntax: '<length># | fail', initialValue: 'fail', value: '1337px' },
{ syntax: '<length># | fail', initialValue: 'fail', value: '1337px, 1338px', count: 2 },
];
try {
let target = document.getElementById('canvas-geometry');
let pid = 1;
for (let p of props) {
p.name = `--prop-${++pid}`;
CSS.registerProperty({
name: p.name,
syntax: p.syntax,
initialValue: p.initialValue,
inherits: (typeof p.inherits !== 'undefined') ? p.inherits : false
});
if (typeof p.value !== 'undefined')
target.style.setProperty(p.name, p.value);
if (typeof p.count === 'undefined')
p.count = 1;
let getValue = p => (typeof p.value !== 'undefined') ? p.value : p.initialValue;
let serialize = v => v.constructor.name + '=' + v.toString();
let parse = function (p) {
if (p.count == 1)
return [CSSStyleValue.parse(p.name, getValue(p))];
return CSSStyleValue.parseAll(p.name, getValue(p));
};
// Generate expected value. We assume that CSSStyleValue.parse/All
// returns the correct CSSStyleValue subclass and value.
p.expected = parse(p).map(serialize);
}
// Adding '?debug' to the URL will cause this test to emit
// test results to console.log.
let debugMode = document.location.href.endsWith('?debug');
let code = [
`const props = ${JSON.stringify(props)};`,
`const debugLog = ${debugMode ? 'console.log' : 'function(){}'};`,
document.getElementById('code').textContent
].join('\n');
importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, code);
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-value-001.https.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Initial values reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
CSS.registerProperty({
name: '--prop',
syntax: '<length>',
initialValue: '42px',
inherits: false
});
expectWorkletValue(target, '--prop', '[CSSUnitValue 42px]');
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-value-002.https.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Inherited values reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="outer">
<div id="target"></div>
</div>
<script>
try {
CSS.registerProperty({
name: '--prop',
syntax: '<length>',
initialValue: '0px',
inherits: true
});
outer.style.setProperty('--prop', '13px');
expectWorkletValue(target, '--prop', '[CSSUnitValue 13px]');
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-value-003.https.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Values of *-properties reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
CSS.registerProperty({
name: '--prop',
syntax: '*',
inherits: false
});
target.style.setProperty('--prop', 'if(){}');
expectWorkletValue(target, '--prop', '[CSSUnparsedValue if(){}]');
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-value-004.https.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Values of &lt;angle&gt;-properties reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
CSS.registerProperty({
name: '--prop',
syntax: '<angle>',
initialValue: '0deg',
inherits: false
});
target.style.setProperty('--prop', '100deg');
expectWorkletValue(target, '--prop', '[CSSUnitValue 100deg]');
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-value-005.https.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Values of &lt;color&gt;-properties reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
CSS.registerProperty({
name: '--prop',
syntax: '<color>',
initialValue: 'black',
inherits: false
});
target.style.setProperty('--prop', 'rgb(1, 2, 3)');
expectWorkletValue(target, '--prop', '[CSSStyleValue rgb(1, 2, 3)]');
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-value-006.https.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Values of &lt;custom-ident&gt;-properties reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
CSS.registerProperty({
name: '--prop',
syntax: '<custom-ident>',
initialValue: 'none',
inherits: false
});
target.style.setProperty('--prop', 'foo');
expectWorkletValue(target, '--prop', '[CSSKeywordValue foo]');
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

40
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-value-007.https.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Values of &lt;image&gt;-properties reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
CSS.registerProperty({
name: '--prop-1',
syntax: '<image> | none',
initialValue: 'none',
inherits: false
});
CSS.registerProperty({
name: '--prop-2',
syntax: '<image> | none',
initialValue: 'none',
inherits: false
});
target.style.setProperty('--prop-1', 'url("http://a/")');
target.style.setProperty('--prop-2', 'linear-gradient(red, red)');
expectWorkletValues(target, {
'--prop-1': ['[CSSImageValue url("http://a/")]'],
'--prop-2': ['[CSSStyleValue linear-gradient(red, red)]'],
});
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-value-008.https.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Values of &lt;integer&gt;-properties reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
CSS.registerProperty({
name: '--prop',
syntax: '<integer>',
initialValue: '0',
inherits: false
});
target.style.setProperty('--prop', '5');
expectWorkletValue(target, '--prop', '[CSSUnitValue 5]');
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

49
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-value-009.https.html Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Values of &lt;length-percentage&gt;-properties reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
CSS.registerProperty({
name: '--prop-1',
syntax: '<length-percentage>',
initialValue: '0',
inherits: false
});
CSS.registerProperty({
name: '--prop-2',
syntax: '<length-percentage>',
initialValue: '0',
inherits: false
});
CSS.registerProperty({
name: '--prop-3',
syntax: '<length-percentage>',
initialValue: '0',
inherits: false
});
target.style.setProperty('--prop-1', '10%');
target.style.setProperty('--prop-2', '10px');
target.style.setProperty('--prop-3', 'calc(10px + 10%)');
expectWorkletValues(target, {
'--prop-1': ['[CSSUnitValue 10%]'],
'--prop-2': ['[CSSUnitValue 10px]'],
'--prop-3': ['[CSSMathSum calc(10px + 10%)]'],
});
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

41
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-value-010.https.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Values of &lt;length&gt;-properties reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
CSS.registerProperty({
name: '--prop-1',
syntax: '<length>',
initialValue: '0',
inherits: false
});
CSS.registerProperty({
name: '--prop-2',
syntax: '<length>',
initialValue: '0',
inherits: false
});
target.style.setProperty('font-size', '20px');
target.style.setProperty('--prop-1', '100px');
target.style.setProperty('--prop-2', '10em');
expectWorkletValues(target, {
'--prop-1': ['[CSSUnitValue 100px]'],
'--prop-2': ['[CSSUnitValue 200px]']
});
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-value-011.https.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Values of &lt;number&gt;-properties reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
CSS.registerProperty({
name: '--prop',
syntax: '<number>',
initialValue: '0',
inherits: false
});
target.style.setProperty('--prop', '2.5');
expectWorkletValue(target, '--prop', '[CSSUnitValue 2.5]');
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-value-012.https.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Values of &lt;percentage&gt;-properties reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
CSS.registerProperty({
name: '--prop',
syntax: '<percentage>',
initialValue: '0%',
inherits: false
});
target.style.setProperty('--prop', '33%');
expectWorkletValue(target, '--prop', '[CSSUnitValue 33%]');
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-value-013.https.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Values of &lt;resolution&gt;-properties reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
CSS.registerProperty({
name: '--prop',
syntax: '<resolution>',
initialValue: '0dppx',
inherits: false
});
target.style.setProperty('--prop', '300dppx');
expectWorkletValue(target, '--prop', '[CSSUnitValue 300dppx]');
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-value-014.https.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Values of &lt;time&gt;-properties reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
CSS.registerProperty({
name: '--prop',
syntax: '<time>',
initialValue: '0s',
inherits: false
});
target.style.setProperty('--prop', '10s');
expectWorkletValue(target, '--prop', '[CSSUnitValue 10s]');
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-value-015.https.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Values of &lt;url&gt;-properties reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
CSS.registerProperty({
name: '--prop',
syntax: '<url> | none',
initialValue: 'none',
inherits: false
});
target.style.setProperty('--prop', 'url("http://a/")');
expectWorkletValue(target, '--prop', '[CSSStyleValue url("http://a/")]');
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-value-016.https.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Values of ident-properties reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
CSS.registerProperty({
name: '--prop',
syntax: 'foo | bar | none',
initialValue: 'none',
inherits: false
});
target.style.setProperty('--prop', 'bar');
expectWorkletValue(target, '--prop', '[CSSKeywordValue bar]');
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-value-017.https.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Values of ident-properties reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
CSS.registerProperty({
name: '--prop',
syntax: 'foo | bar | none',
initialValue: 'none',
inherits: false
});
target.style.setProperty('--prop', 'bar');
expectWorkletValue(target, '--prop', '[CSSKeywordValue bar]');
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

49
tests/wpt/web-platform-tests/css/css-paint-api/registered-property-value-018.https.html Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Values of lists reach worklet</title>
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
<link rel="match" href="parse-input-arguments-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<script src="./resources/utils.js"></script>
<body>
<div id="target"></div>
<script>
try {
CSS.registerProperty({
name: '--prop-1',
syntax: '<length>+ | none',
initialValue: 'none',
inherits: false
});
CSS.registerProperty({
name: '--prop-2',
syntax: '<length># | none',
initialValue: 'none',
inherits: false
});
CSS.registerProperty({
name: '--prop-3',
syntax: '<length># | none',
initialValue: 'none',
inherits: false
});
target.style.setProperty('--prop-1', '8px 16px');
target.style.setProperty('--prop-2', '8px, 16px');
target.style.setProperty('--prop-3', '8px');
expectWorkletValues(target, {
'--prop-1': ['[CSSUnitValue 8px]', '[CSSUnitValue 16px]'],
'--prop-2': ['[CSSUnitValue 8px]', '[CSSUnitValue 16px]'],
'--prop-3': ['[CSSUnitValue 8px]'],
});
} catch(e) {
document.body.textContent = e;
takeScreenshot();
}
</script>
</body>
</html>

59
tests/wpt/web-platform-tests/css/css-paint-api/resources/utils.js Normal file
View file

@ -0,0 +1,59 @@
// Register a property, and interpolate its value to the halfway point.
function registerAndInterpolateProperty(options) {
CSS.registerProperty({
name: options.name,
syntax: `${options.syntax} | none`,
initialValue: 'none',
inherits: false
});
let animation = options.on.animate([
{ [options.name]: options.from },
{ [options.name]: options.to }
], 1000);
animation.currentTime = 500;
animation.pause();
}
// Apply a paint worklet to 'target' which verifies that the worklet-side value
// of a set of properties is what we expect.
//
// The 'expected' parameter is an object where each key is the name of a
// property to check, and each corresponding value is an array with the expected
// (serialized) values for that property.
function expectWorkletValues(target, expected) {
const workletName = 'registered-property-value';
// Wrap any single values in an array. This makes it possible to omit the
// array if there is only one value.
const ensureArray = x => x.constructor === Array ? x : [x];
expected = Object.entries(expected).map(([k, v]) => [k, ensureArray(v)])
.map(x => ({[x[0]]: x[1]}))
.reduce((a, b) => Object.assign(a, b), {});
target.style.setProperty('width', '100px');
target.style.setProperty('height', '100px');
target.style.setProperty('background-image', `paint(${workletName})`);
const worklet = `
const expectedData = ${JSON.stringify(expected)};
const expectedKeys = Object.keys(expectedData).sort();
registerPaint('${workletName}', class {
static get inputProperties() { return expectedKeys; }
paint(ctx, geom, styleMap) {
let serialize = (v) => '[' + v.constructor.name + ' ' + v.toString() + ']';
let actual = expectedKeys.map(k => styleMap.getAll(k).map(serialize).join(', ')).join(' | ');
let expected = expectedKeys.map(k => expectedData[k].join(', ')).join(' | ');
ctx.strokeStyle = (actual === expected) ? 'green' : 'red';
ctx.lineWidth = 4;
ctx.strokeRect(0, 0, geom.width, geom.height);
}
});`
importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, worklet);
}
// Like expectWorkletValues, but can only test a single property.
function expectWorkletValue(target, property, expected) {
expectWorkletValues(target, { [property]: expected });
}

4
tests/wpt/web-platform-tests/css/css-properties-values-api/register-property-syntax-parsing.html
View file

@ -55,6 +55,10 @@ assert_valid("<number>", "-109");
assert_valid("<number>", "2.3e4");
assert_valid("<integer>", "-109");
assert_valid("<integer>", "19");
assert_valid("<integer>", "calc(1)");
assert_valid("<integer>", "calc(1 + 2)");
assert_valid("<integer>", "calc(3.1415)");
assert_valid("<integer>", "calc(3.1415 + 3.1415)");
assert_valid("<angle>", "10deg");
assert_valid("<angle>", "20.5rad");

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

@ -111,5 +111,17 @@ for (let element of [divWithFontSizeSet, divWithFontSizeInherited]) {
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);
}
</script>

8
tests/wpt/web-platform-tests/css/css-properties-values-api/typedom.tentative.html
View file

@ -382,8 +382,8 @@ test_style_property_map_set({
test_style_property_map_set({
syntax: '<integer>',
initialValue: '0',
shouldAccept: [CSS.number(1), CSS.number(-42), '1', '-42'],
shouldReject: [unparsed('42'), CSS.px(100), '50px', [CSS.number(42), '42']],
shouldAccept: [CSS.number(1), CSS.number(-42), '1', '-42', 'calc(2.4)'],
shouldReject: [unparsed('42'), CSS.px(100), '50px', [CSS.number(42), '42'], 'calc(2px + 1px)'],
});
test_style_property_map_set({
@ -482,8 +482,8 @@ test_style_property_map_set({
test_style_property_map_set({
syntax: '<integer>+',
initialValue: '0',
shouldAccept: [CSS.number(42), [CSS.number(42), '42'], '42 42'],
shouldReject: [[CSS.number(42), keyword('noint')], '42 noint'],
shouldAccept: [CSS.number(42), [CSS.number(42), '42'], '42 42', 'calc(2.4) calc(2.6)'],
shouldReject: [[CSS.number(42), keyword('noint')], '42 noint', 'calc(2px + 2px)'],
});
test_style_property_map_set({

23
tests/wpt/web-platform-tests/css/css-regions/inheritance.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS Regions properties</title>
<link rel="help" href="https://drafts.csswg.org/css-regions/#property-index">
<meta name="assert" content="Properties inherit or not according to the spec.">
<meta name="assert" content="Properties have initial values according to the spec.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
assert_not_inherited('flow-from', 'none', 'foo');
assert_not_inherited('flow-into', 'none', 'bar');
assert_not_inherited('region-fragment', 'auto', 'break');
</script>
</body>
</html>

21
tests/wpt/web-platform-tests/css/css-scoping/shadow-host-removal-invalidation.html Normal file
View file

@ -0,0 +1,21 @@
<!doctype html>
<title>CSS Test: Invalidation of :host selectors</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-scoping/#host-selector">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1499603">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="host" style="color: green"></div>
<script>
host.attachShadow({ mode: "open" }).innerHTML = `
<style>
:host { color: red !important }
</style>
`;
test(function() {
assert_equals(getComputedStyle(host).color, "rgb(255, 0, 0)");
host.shadowRoot.querySelector("style").remove();
assert_equals(getComputedStyle(host).color, "rgb(0, 128, 0)");
}, ":host rules are properly invalidated when stylesheets are removed");
</script>

21
tests/wpt/web-platform-tests/css/css-scroll-anchoring/inheritance.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS Scroll Anchoring properties</title>
<link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/#property-index">
<meta name="assert" content="overflow-anchor does not inherit.">
<meta name="assert" content="overflow-anchor has initial value 'none'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
assert_not_inherited('overflow-anchor', 'auto', 'none');
</script>
</body>
</html>

5
tests/wpt/web-platform-tests/css/css-text/text-indent/reference/text-indent-percentage-002-ref.html
View file

@ -4,7 +4,10 @@
<title>CSS Text Test reference</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<style>
div { padding-left: 50px; }
div {
padding-left: 50px;
font-family: Ahem;
}
</style>
<p>Test passes if there is a single black X below and no red.

1
tests/wpt/web-platform-tests/css/css-text/text-indent/text-indent-percentage-002.html
View file

@ -13,6 +13,7 @@ section, div {
border-right: 10px solid white;
margin-right: 10px;
padding-right: 10px;
font-family: Ahem;
}
div {
box-sizing: border-box;

1
tests/wpt/web-platform-tests/css/css-text/text-indent/text-indent-percentage-003.html
View file

@ -13,6 +13,7 @@ section, div {
border-right: 10px solid white;
margin-right: 10px;
padding-right: 10px;
font-family: Ahem;
}
div {
box-sizing: border-box;

1
tests/wpt/web-platform-tests/css/css-text/text-indent/text-indent-percentage-004.html
View file

@ -13,6 +13,7 @@ section, div {
border-right: 10px solid white;
margin-right: 10px;
padding-right: 10px;
font-family: Ahem;
}
div {
box-sizing: border-box;

21
tests/wpt/web-platform-tests/css/css-will-change/will-change-inherit-dynamic.html Normal file
View file

@ -0,0 +1,21 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Test: will-change: style changes are properly propagated to children if needed</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1499991">
<link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="outer">
<div id="inner" style="will-change: inherit"></div>
</div>
<script>
test(function() {
assert_equals(getComputedStyle(outer).willChange, "auto");
assert_equals(getComputedStyle(inner).willChange, "auto");
outer.style.willChange = "color";
assert_equals(getComputedStyle(outer).willChange, "color");
assert_equals(getComputedStyle(inner).willChange, "color");
}, "will-change change is properly propagated to children if needed");
</script>