mirror of
https://github.com/servo/servo.git
synced 2025-10-04 02:29:12 +01:00
Update web-platform-tests to revision 9a5d71b326166e12784bdd9d161772e20f87c1fd
This commit is contained in:
WPT Sync Bot
parent
f7630dad87
commit
4ae3d09ff3
86 changed files with 2739 additions and 640 deletions
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: contain is not animatable</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name=assert content="the contain property is not animatable">
|
||||
<style>
|
||||
div {
|
||||
border: 50px solid green;
|
||||
background: red;
|
||||
position: absolute; /* for shrinkwrap */
|
||||
contain: strict;
|
||||
|
||||
animation-duration: 1s;
|
||||
animation-name: bad;
|
||||
animation-play-state: paused;
|
||||
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
@keyframes bad {
|
||||
from {
|
||||
contain: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div> </div>
|
||||
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: layout containment and baselines</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=assert content="With contain:layout, for the purpose of the vertical-align property, the containing element is treated as having no baseline.">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-layout">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
#red {
|
||||
position: absolute;
|
||||
background: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.green {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
background: green;
|
||||
width: 50px;
|
||||
contain: layout;
|
||||
color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id=red></div>
|
||||
<div class=green></div><div class=green>a</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment and baselines</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=assert content="contain:paint does not suppress baseline alignment">
|
||||
<link rel="match" href="reference/contain-baseline-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-paint">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 5px;
|
||||
background: blue;
|
||||
width: 50px;
|
||||
contain: paint;
|
||||
color: transparent;
|
||||
font-size: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are two, not one, blue lines below.</p>
|
||||
<div></div><div>a</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: size containment and baselines</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=assert content="contain:size does not suppress baseline alignment">
|
||||
<link rel="match" href="reference/contain-baseline-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-size">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 5px;
|
||||
background: blue;
|
||||
width: 50px;
|
||||
contain: size;
|
||||
color: transparent;
|
||||
font-size: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are two, not one, blue lines below.</p>
|
||||
<div></div><div>a</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment and baselines</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=assert content="contain:style does not suppress baseline alignment">
|
||||
<link rel="match" href="reference/contain-baseline-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 5px;
|
||||
background: blue;
|
||||
width: 50px;
|
||||
contain: style;
|
||||
color: transparent;
|
||||
font-size: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are two, not one, blue lines below.</p>
|
||||
<div></div><div>a</div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 5px;
|
||||
background: blue;
|
||||
width: 50px;
|
||||
color: transparent;
|
||||
font-size: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are two, not one, blue lines below.</p>
|
||||
<div></div><div>a</div>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
--length: 10px;
|
||||
--number: 10;
|
||||
}
|
||||
|
||||
#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">
|
||||
registerPaint('geometry', class {
|
||||
static get inputProperties() {
|
||||
return [
|
||||
'--length',
|
||||
'--length-initial',
|
||||
'--number',
|
||||
];
|
||||
}
|
||||
paint(ctx, geom, styleMap) {
|
||||
const properties = [...styleMap.keys()].sort();
|
||||
var serializedStrings = [];
|
||||
for (let i = 0; i < properties.length; i++) {
|
||||
const value = styleMap.get(properties[i]);
|
||||
let serialized;
|
||||
if (value)
|
||||
serialized = properties[i].toString() + ': [' + value.constructor.name + '=' + value.toString() + ']';
|
||||
else
|
||||
serialized = properties[i].toString() + ': [null]';
|
||||
serializedStrings.push(serialized);
|
||||
}
|
||||
ctx.strokeStyle = 'green';
|
||||
if (serializedStrings[0] != "--length: [CSSUnitValue=10px]")
|
||||
ctx.strokeStyle = 'red';
|
||||
if (serializedStrings[1] != "--length-initial: [CSSUnitValue=20px]")
|
||||
ctx.strokeStyle = 'blue';
|
||||
if (serializedStrings[2] != "--number: [CSSUnitValue=10]")
|
||||
ctx.strokeStyle = 'yellow';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
try {
|
||||
CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--length-initial', syntax: '<length>', initialValue: '20px', inherits: false});
|
||||
CSS.registerProperty({name: '--number', syntax: '<number>', initialValue: '0', inherits: false});
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent);
|
||||
} catch(e) {
|
||||
document.body.textContent = e;
|
||||
takeScreenshot();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
<!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) {
|
||||
let first = styleMap.get(prop.name);
|
||||
let all = styleMap.getAll(prop.name);
|
||||
let serialize = v => v.constructor.name + '=' + v.toString()
|
||||
let actual = all.map(serialize).join(',');
|
||||
let expected = prop.expected.join(',');
|
||||
let pass = actual === expected
|
||||
&& serialize(first) === prop.expected[0];
|
||||
if (!pass)
|
||||
ctx.strokeStyle = 'red';
|
||||
debugLog(pass ? 'PASS' : 'FAIL', prop.syntax, actual, expected);
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<style>
|
||||
textarea {
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
}
|
||||
</style>
|
||||
<textarea cols="10" rows="10"></textarea>
|
||||
<script>
|
||||
let textarea = document.querySelector("textarea");
|
||||
textarea.value = ('X'.repeat(100) + '\n').repeat(100);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Test: scrollbar-width should apply on <textarea></title>
|
||||
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-width">
|
||||
<link rel="match" href="textarea-scrollbar-width-none-ref.html">
|
||||
<style>
|
||||
textarea {
|
||||
scrollbar-width: none;
|
||||
white-space: pre;
|
||||
}
|
||||
</style>
|
||||
<textarea cols="10" rows="10"></textarea>
|
||||
<script>
|
||||
let textarea = document.querySelector("textarea");
|
||||
textarea.value = ('X'.repeat(100) + '\n').repeat(100);
|
||||
</script>
|
||||
|
|
@ -16,25 +16,25 @@ test_valid_value("offset", "100px none auto 90deg", "100px center none auto 90de
|
|||
test_valid_value("offset", "100px", "100px center");
|
||||
test_valid_value("offset", "auto none reverse");
|
||||
test_valid_value("offset", "auto");
|
||||
test_valid_value("offset", "center bottom path('M 1 2 V 3 Z')");
|
||||
test_valid_value("offset", "center center path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 300 300 Z') 100% 90deg / left bottom");
|
||||
test_valid_value("offset", "center bottom path(\"M 1 2 V 3 Z\")");
|
||||
test_valid_value("offset", "center center path(\"M 0 0 L 100 100 M 100 200 L 200 200 Z L 300 300 Z\") 100% 90deg / left bottom");
|
||||
test_valid_value("offset", "left bottom ray(0rad closest-side) 10px auto 30deg / right bottom");
|
||||
test_valid_value("offset", "left top");
|
||||
test_valid_value("offset", "none 30deg reverse", "none reverse 30deg");
|
||||
test_valid_value("offset", "none 50px reverse 30deg");
|
||||
test_valid_value("offset", "none calc(10px + 20%) auto");
|
||||
test_valid_value("offset", "none reverse");
|
||||
test_valid_value("offset", "path('M 0 0 H 1') -200% auto");
|
||||
test_valid_value("offset", "path('M 0 0 H 1') -200%");
|
||||
test_valid_value("offset", "path('M 0 0 H 1') 50px");
|
||||
test_valid_value("offset", "path('M 0 0 H 1') auto");
|
||||
test_valid_value("offset", "path('M 0 0 H 1') reverse 30deg 50px", "path('M 0 0 H 1') 50px reverse 30deg");
|
||||
test_valid_value("offset", "path('M 0 0 H 1')");
|
||||
test_valid_value("offset", "path('m 0 0 h 100') -7rad 8px / auto", "path('m 0 0 h 100') 8px -7rad / auto");
|
||||
test_valid_value("offset", "path('m 0 0 h 100') -7rad 8px / left top", "path('m 0 0 h 100') 8px -7rad / left top");
|
||||
test_valid_value("offset", "path('m 0 0 h 100') -7rad 8px", "path('m 0 0 h 100') 8px -7rad");
|
||||
test_valid_value("offset", "path('m 0 0 h 100') 100px 0deg");
|
||||
test_valid_value("offset", "path('m 1 2 v 3 Z')");
|
||||
test_valid_value("offset", "path(\"M 0 0 H 1\") -200% auto");
|
||||
test_valid_value("offset", "path(\"M 0 0 H 1\") -200%");
|
||||
test_valid_value("offset", "path('M 0 0 H 1') 50px", "path(\"M 0 0 H 1\") 50px");
|
||||
test_valid_value("offset", "path(\"M 0 0 H 1\") auto");
|
||||
test_valid_value("offset", "path('M 0 0 H 1') reverse 30deg 50px", "path(\"M 0 0 H 1\") 50px reverse 30deg");
|
||||
test_valid_value("offset", "path(\"M 0 0 H 1\")");
|
||||
test_valid_value("offset", "path('m 0 0 h 100') -7rad 8px / auto", "path(\"m 0 0 h 100\") 8px -7rad / auto");
|
||||
test_valid_value("offset", "path('m 0 0 h 100') -7rad 8px / left top", "path(\"m 0 0 h 100\") 8px -7rad / left top");
|
||||
test_valid_value("offset", "path('m 0 0 h 100') -7rad 8px", "path(\"m 0 0 h 100\") 8px -7rad");
|
||||
test_valid_value("offset", "path(\"m 0 0 h 100\") 100px 0deg");
|
||||
test_valid_value("offset", "path('m 1 2 v 3 Z')", "path(\"m 1 2 v 3 Z\")");
|
||||
test_valid_value("offset", "ray(farthest-corner 90deg) 1%", "ray(90deg farthest-corner) 1%");
|
||||
test_valid_value("offset", "ray(sides 0deg) 50% 90deg auto", "ray(0deg sides) 50% auto 90deg");
|
||||
test_valid_value("offset", "right bottom / left top");
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue