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

Update web-platform-tests to revision 192193581b6912818a0e3f2408f40f033a451a79

Browse source
This commit is contained in:
WPT Sync Bot 2019-01-14 20:34:43 -05:00
parent 2cf9a00c99
commit 13bbfdb3eb
46 changed files with 1499 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

21
tests/wpt/web-platform-tests/css/css-grid/animation/grid-template-columns-001-ref.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid: Reference for grid-template-columns interpolation</title>
<style>
.grid {
display: grid;
width: 400px;
grid-gap: 10px;
grid-template-columns: 60px 1fr;
}
span { border: 1px solid; }
</style>
</head>
<body>
<div class="grid">
<span>column1</span>
<span>column2</span>
</div>
</body>
</html>

38
tests/wpt/web-platform-tests/css/css-grid/animation/grid-template-columns-001.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<title>CSS Grid: Test grid-template-columns interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
<link rel="match" href="grid-template-columns-001-ref.html">
<meta name="assert" content="The grid-template-columns property should have
correct interpolation result.">
<style>
@keyframes anim {
from {
grid-template-columns: 20px 1fr;
}
to {
grid-template-columns: 100px 1fr;
}
}
.grid {
display: grid;
width: 400px;
grid-gap: 10px;
animation: anim 10s -5s paused linear;
}
span { border: 1px solid; }
</style>
</head>
<body>
<div class="grid">
<span>column1</span>
<span>column2</span>
</div>
</body>
<script>
requestAnimationFrame(() => {
document.documentElement.classList.remove('reftest-wait');
});
</script>
</html>

179
tests/wpt/web-platform-tests/css/css-grid/animation/grid-template-columns-interpolation.html Normal file
View file

@ -0,0 +1,179 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>grid-template-columns interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
<meta name="assert" content="grid-template-columns supports animation.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/interpolation-testcommon.js"></script>
</head>
<body>
<script>
'use strict';
// Distinct length of track list.
test_no_interpolation({
property: 'grid-template-columns',
from: "1fr 1fr 1fr",
to: "2fr 2fr"
});
test_no_interpolation({
property: 'grid-template-columns',
from: "10px 20px 30px",
to: "20px 30px"
});
test_no_interpolation({
property: 'grid-template-columns',
from: "1fr 1fr 1fr",
to: "none"
});
test_no_interpolation({
property: 'grid-template-columns',
from: "none",
to: "20px 30px"
});
// Exercise <explicit-track-list>
test_interpolation({
property: 'grid-template-columns',
from: "10px 20px 30px",
to: "20px 30px 40px"
}, [
{at: -1, expect: "0px 10px 20px"},
{at: 0, expect: "10px 20px 30px"},
{at: 0.4, expect: "14px 24px 34px"},
{at: 0.6, expect: "16px 26px 36px"},
{at: 1, expect: "20px 30px 40px"},
{at: 2, expect: "30px 40px 50px"}
]);
test_interpolation({
property: 'grid-template-columns',
from: "10px 20px 30px",
to: "20% 30% 40px"
}, [
{at: -1, expect: "calc(20px + -20%) calc(40px + -30%) 20px"},
{at: 0, expect: "calc(10px + 0%) calc(20px + 0%) 30px"},
{at: 0.4, expect: "calc(6px + 8%) calc(12px + 12%) 34px"},
{at: 0.6, expect: "calc(4px + 12%) calc(8px + 18%) 36px"},
{at: 1, expect: "20% 30% 40px"},
{at: 2, expect: "calc(-10px + 40%) calc(-20px + 60%) 50px"}
]);
test_interpolation({
property: 'grid-template-columns',
from: "1fr 1fr 1fr",
to: "2fr auto 2fr"
}, [
{at: -1, expect: "0fr 1fr 0fr"},
{at: 0, expect: "1fr 1fr 1fr"},
{at: 0.4, expect: "1.4fr 1fr 1.4fr"},
{at: 0.6, expect: "1.6fr auto 1.6fr"},
{at: 1, expect: "2fr auto 2fr"},
{at: 2, expect: "3fr auto 3fr"}
]);
test_interpolation({
property: 'grid-template-columns',
from: "1fr [a b] 1fr [d] 1fr",
to: "2fr [c] auto 2fr"
}, [
{at: -1, expect: "0fr [a b] 1fr [d] 0fr"},
{at: 0, expect: "1fr [a b] 1fr [d] 1fr"},
{at: 0.4, expect: "1.4fr [a b] 1fr [d] 1.4fr"},
{at: 0.6, expect: "1.6fr [c] auto 1.6fr"},
{at: 1, expect: "2fr [c] auto 2fr"},
{at: 2, expect: "3fr [c] auto 3fr"}
]);
test_interpolation({
property: 'grid-template-columns',
from: "fit-content(10px) fit-content(20px)",
to: "fit-content(20px) max-content"
}, [
{at: -1, expect: "fit-content(0px) fit-content(20px)"},
{at: 0, expect: "fit-content(10px) fit-content(20px)"},
{at: 0.4, expect: "fit-content(14px) fit-content(20px)"},
{at: 0.6, expect: "fit-content(16px) max-content"},
{at: 1, expect: "fit-content(20px) max-content"},
{at: 2, expect: "fit-content(30px) max-content"}
]);
test_interpolation({
property: 'grid-template-columns',
from: "minmax(10px, 1fr) minmax(20px, 2fr)",
to: "minmax(20px, 2fr) minmax(30px, auto)"
}, [
{at: -1, expect: "minmax(0px, 0fr) minmax(10px, 2fr)"},
{at: 0, expect: "minmax(10px, 1fr) minmax(20px, 2fr)"},
{at: 0.4, expect: "minmax(14px, 1.4fr) minmax(24px, 2fr)"},
{at: 0.6, expect: "minmax(16px, 1.6fr) minmax(26px, auto)"},
{at: 1, expect: "minmax(20px, 2fr) minmax(30px, auto)"},
{at: 2, expect: "minmax(30px, 3fr) minmax(40px, auto)"}
]);
// Exercise <track-list> (with <track-repeat>)
test_no_interpolation({
property: 'grid-template-columns',
from: "1fr repeat(2, 2fr 30px) 1fr",
to: "2fr repeat(2, 3fr 40px 50px) 2fr"
});
test_no_interpolation({
property: 'grid-template-columns',
from: "1fr repeat(2, 2fr 30px) 1fr",
to: "2fr repeat(3, 3fr 40px) 2fr"
});
test_interpolation({
property: 'grid-template-columns',
from: "repeat(2, 2fr 30px)",
to: "repeat(4, 40px)"
}, [
{at: -1, expect: "2fr 20px 2fr 20px"},
{at: 0, expect: "repeat(2, 2fr 30px)"},
{at: 0.4, expect: "2fr 34px 2fr 34px"},
{at: 0.6, expect: "40px 36px 40px 36px"},
{at: 1, expect: "repeat(4, 40px)"},
{at: 2, expect: "40px 50px 40px 50px"}
]);
test_interpolation({
property: 'grid-template-columns',
from: "1fr repeat(2, 2fr auto 30px) 1fr",
to: "2fr repeat(2, 3fr 30px 40px) 2fr"
}, [
{at: -1, expect: "0fr repeat(2, 1fr auto 20px) 0fr"},
{at: 0, expect: "1fr repeat(2, 2fr auto 30px) 1fr"},
{at: 0.4, expect: "1.4fr repeat(2, 2.4fr auto 34px) 1.4fr"},
{at: 0.6, expect: "1.6fr repeat(2, 2.6fr 30px 36px) 1.6fr"},
{at: 1, expect: "2fr repeat(2, 3fr 30px 40px) 2fr"},
{at: 2, expect: "3fr repeat(2, 4fr 30px 50px) 3fr"}
]);
// Exercise <auto-track-list>
test_no_interpolation({
property: 'grid-template-columns',
from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px",
to: "20px 20px repeat(auto-fill, minmax(30px, 1fr))"
});
test_no_interpolation({
property: 'grid-template-columns',
from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px",
to: "20px repeat(auto-fit, minmax(30px, 1fr)) 20px"
});
test_no_interpolation({
property: 'grid-template-columns',
from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px",
to: "20px repeat(auto-fill, minmax(35px, auto)) 20px"
});
</script>
</body>
</html>

22
tests/wpt/web-platform-tests/css/css-grid/animation/grid-template-rows-001-ref.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid: Reference for grid-template-rows interpolation</title>
<style>
.grid {
display: grid;
width: 400px;
height: 400px;
grid-gap: 10px;
grid-template-rows: 60px 1fr;
}
span { border: 1px solid; }
</style>
</head>
<body>
<div class="grid">
<span>row1</span>
<span>row2</span>
</div>
</body>
</html>

39
tests/wpt/web-platform-tests/css/css-grid/animation/grid-template-rows-001.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<title>CSS Grid: Test grid-template-rows interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
<link rel="match" href="grid-template-rows-001-ref.html">
<meta name="assert" content="The grid-template-rows property should have
correct interpolation result.">
<style>
@keyframes anim {
from {
grid-template-rows: 20px 1fr;
}
to {
grid-template-rows: 100px 1fr;
}
}
.grid {
display: grid;
width: 400px;
height: 400px;
grid-gap: 10px;
animation: anim 10s -5s paused linear;
}
span { border: 1px solid; }
</style>
</head>
<body>
<div class="grid">
<span>row1</span>
<span>row2</span>
</div>
</body>
<script>
requestAnimationFrame(() => {
document.documentElement.classList.remove('reftest-wait');
});
</script>
</html>

179
tests/wpt/web-platform-tests/css/css-grid/animation/grid-template-rows-interpolation.html Normal file
View file

@ -0,0 +1,179 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>grid-template-rows interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
<meta name="assert" content="grid-template-rows supports animation.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/interpolation-testcommon.js"></script>
</head>
<body>
<script>
'use strict';
// Distinct length of track list.
test_no_interpolation({
property: 'grid-template-rows',
from: "1fr 1fr 1fr",
to: "2fr 2fr"
});
test_no_interpolation({
property: 'grid-template-rows',
from: "10px 20px 30px",
to: "20px 30px"
});
test_no_interpolation({
property: 'grid-template-rows',
from: "1fr 1fr 1fr",
to: "none"
});
test_no_interpolation({
property: 'grid-template-rows',
from: "none",
to: "20px 30px"
});
// Exercise <explicit-track-list>
test_interpolation({
property: 'grid-template-rows',
from: "10px 20px 30px",
to: "20px 30px 40px"
}, [
{at: -1, expect: "0px 10px 20px"},
{at: 0, expect: "10px 20px 30px"},
{at: 0.4, expect: "14px 24px 34px"},
{at: 0.6, expect: "16px 26px 36px"},
{at: 1, expect: "20px 30px 40px"},
{at: 2, expect: "30px 40px 50px"}
]);
test_interpolation({
property: 'grid-template-rows',
from: "10px 20px 30px",
to: "20% 30% 40px"
}, [
{at: -1, expect: "calc(20px + -20%) calc(40px + -30%) 20px"},
{at: 0, expect: "calc(10px + 0%) calc(20px + 0%) 30px"},
{at: 0.4, expect: "calc(6px + 8%) calc(12px + 12%) 34px"},
{at: 0.6, expect: "calc(4px + 12%) calc(8px + 18%) 36px"},
{at: 1, expect: "20% 30% 40px"},
{at: 2, expect: "calc(-10px + 40%) calc(-20px + 60%) 50px"}
]);
test_interpolation({
property: 'grid-template-rows',
from: "1fr 1fr 1fr",
to: "2fr auto 2fr"
}, [
{at: -1, expect: "0fr 1fr 0fr"},
{at: 0, expect: "1fr 1fr 1fr"},
{at: 0.4, expect: "1.4fr 1fr 1.4fr"},
{at: 0.6, expect: "1.6fr auto 1.6fr"},
{at: 1, expect: "2fr auto 2fr"},
{at: 2, expect: "3fr auto 3fr"}
]);
test_interpolation({
property: 'grid-template-rows',
from: "1fr [a b] 1fr [d] 1fr",
to: "2fr [c] auto 2fr"
}, [
{at: -1, expect: "0fr [a b] 1fr [d] 0fr"},
{at: 0, expect: "1fr [a b] 1fr [d] 1fr"},
{at: 0.4, expect: "1.4fr [a b] 1fr [d] 1.4fr"},
{at: 0.6, expect: "1.6fr [c] auto 1.6fr"},
{at: 1, expect: "2fr [c] auto 2fr"},
{at: 2, expect: "3fr [c] auto 3fr"}
]);
test_interpolation({
property: 'grid-template-rows',
from: "fit-content(10px) fit-content(20px)",
to: "fit-content(20px) max-content"
}, [
{at: -1, expect: "fit-content(0px) fit-content(20px)"},
{at: 0, expect: "fit-content(10px) fit-content(20px)"},
{at: 0.4, expect: "fit-content(14px) fit-content(20px)"},
{at: 0.6, expect: "fit-content(16px) max-content"},
{at: 1, expect: "fit-content(20px) max-content"},
{at: 2, expect: "fit-content(30px) max-content"}
]);
test_interpolation({
property: 'grid-template-rows',
from: "minmax(10px, 1fr) minmax(20px, 2fr)",
to: "minmax(20px, 2fr) minmax(30px, auto)"
}, [
{at: -1, expect: "minmax(0px, 0fr) minmax(10px, 2fr)"},
{at: 0, expect: "minmax(10px, 1fr) minmax(20px, 2fr)"},
{at: 0.4, expect: "minmax(14px, 1.4fr) minmax(24px, 2fr)"},
{at: 0.6, expect: "minmax(16px, 1.6fr) minmax(26px, auto)"},
{at: 1, expect: "minmax(20px, 2fr) minmax(30px, auto)"},
{at: 2, expect: "minmax(30px, 3fr) minmax(40px, auto)"}
]);
// Exercise <track-list> (with <track-repeat>)
test_no_interpolation({
property: 'grid-template-rows',
from: "1fr repeat(2, 2fr 30px) 1fr",
to: "2fr repeat(2, 3fr 40px 50px) 2fr"
});
test_no_interpolation({
property: 'grid-template-rows',
from: "1fr repeat(2, 2fr 30px) 1fr",
to: "2fr repeat(3, 3fr 40px) 2fr"
});
test_interpolation({
property: 'grid-template-rows',
from: "repeat(2, 2fr 30px)",
to: "repeat(4, 40px)"
}, [
{at: -1, expect: "2fr 20px 2fr 20px"},
{at: 0, expect: "repeat(2, 2fr 30px)"},
{at: 0.4, expect: "2fr 34px 2fr 34px"},
{at: 0.6, expect: "40px 36px 40px 36px"},
{at: 1, expect: "repeat(4, 40px)"},
{at: 2, expect: "40px 50px 40px 50px"}
]);
test_interpolation({
property: 'grid-template-rows',
from: "1fr repeat(2, 2fr auto 30px) 1fr",
to: "2fr repeat(2, 3fr 30px 40px) 2fr"
}, [
{at: -1, expect: "0fr repeat(2, 1fr auto 20px) 0fr"},
{at: 0, expect: "1fr repeat(2, 2fr auto 30px) 1fr"},
{at: 0.4, expect: "1.4fr repeat(2, 2.4fr auto 34px) 1.4fr"},
{at: 0.6, expect: "1.6fr repeat(2, 2.6fr 30px 36px) 1.6fr"},
{at: 1, expect: "2fr repeat(2, 3fr 30px 40px) 2fr"},
{at: 2, expect: "3fr repeat(2, 4fr 30px 50px) 3fr"}
]);
// Exercise <auto-track-list>
test_no_interpolation({
property: 'grid-template-rows',
from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px",
to: "20px 20px repeat(auto-fill, minmax(30px, 1fr))"
});
test_no_interpolation({
property: 'grid-template-rows',
from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px",
to: "20px repeat(auto-fit, minmax(30px, 1fr)) 20px"
});
test_no_interpolation({
property: 'grid-template-rows',
from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px",
to: "20px repeat(auto-fill, minmax(35px, auto)) 20px"
});
</script>
</body>
</html>

66
tests/wpt/web-platform-tests/css/css-grid/animation/resources/interpolation-testcommon.js Normal file
View file

@ -0,0 +1,66 @@
'use strict';
function test_interpolation(settings, expectations) {
// Returns a timing function that at 0.5 evaluates to progress.
function timingFunction(progress) {
if (progress === 0)
return 'steps(1, end)';
if (progress === 1)
return 'steps(1, start)';
var y = (8 * progress - 1) / 6;
return 'cubic-bezier(0, ' + y + ', 1, ' + y + ')';
}
test(function(){
assert_true(CSS.supports(settings.property, settings.from), 'Value "' + settings.from + '" is supported by ' + settings.property);
assert_true(CSS.supports(settings.property, settings.to), 'Value "' + settings.to + '" is supported by ' + settings.property);
}, '"' + settings.from + '" and "' + settings.to + '" are valid ' + settings.property + ' values');
for (var i = 0; i < expectations.length; ++i) {
var progress = expectations[i].at;
var expectation = expectations[i].expect;
var animationId = 'anim' + i;
var targetId = 'target' + i;
var referenceId = 'reference' + i;
test(function(){
assert_true(CSS.supports(settings.property, expectation), 'Value "' + expectation + '" is supported by ' + settings.property);
var stylesheet = document.createElement('style');
stylesheet.textContent =
'#' + targetId + ' {\n' +
' animation: 2s ' + timingFunction(progress) + ' -1s paused ' + animationId + ';\n' +
'}\n' +
'@keyframes ' + animationId + ' {\n' +
' 0% { ' + settings.property + ': ' + settings.from + '; }\n' +
' 100% { ' + settings.property + ': ' + settings.to + '; }\n' +
'}\n' +
'#' + referenceId + ' {\n' +
' ' + settings.property + ': ' + expectation + ';\n' +
'}\n';
document.head.appendChild(stylesheet);
var target = document.createElement('div');
target.id = targetId;
document.body.appendChild(target);
var reference = document.createElement('div');
reference.id = referenceId;
document.body.appendChild(reference);
reference.style = '';
assert_equals(getComputedStyle(target)[settings.property], getComputedStyle(reference)[settings.property]);
}, (settings.test_prefix ? settings.test_prefix : "") +
'Animation between "' + settings.from + '" and "' + settings.to +
'" at progress ' + progress);
}
}
function test_no_interpolation(settings) {
var expectatFrom = [-1, 0, 0.4].map(function (progress) {
return {at: progress, expect: settings.from};
});
var expectatTo = [0.6, 1, 2].map(function (progress) {
return {at: progress, expect: settings.to};
});
test_interpolation(settings, expectatFrom.concat(expectatTo));
}