mirror of
https://github.com/servo/servo.git
synced 2025-08-13 01:15:34 +01:00
Update web-platform-tests to revision 192193581b6912818a0e3f2408f40f033a451a79
This commit is contained in:
parent
2cf9a00c99
commit
13bbfdb3eb
46 changed files with 1499 additions and 144 deletions
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>The current time of a worklet animation</title>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/web-animations/testcommon.js"></script>
|
||||
<script src="common.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const DURATION = 10000; // ms
|
||||
const KEYFRAMES = { height : ['100px', '50px'] };
|
||||
|
||||
promise_test(async t => {
|
||||
await registerPassthroughAnimator();
|
||||
const animation =
|
||||
new WorkletAnimation('passthrough', new KeyframeEffect(createDiv(t),
|
||||
KEYFRAMES, DURATION), document.timeline);
|
||||
|
||||
animation.play();
|
||||
assert_equals(animation.currentTime, 0,
|
||||
'Current time returns the hold time set when entering the play-pending' +
|
||||
'state');
|
||||
}, 'The current time returns the hold time when set');
|
||||
|
||||
promise_test(async t => {
|
||||
await registerPassthroughAnimator();
|
||||
const animation =
|
||||
new WorkletAnimation('passthrough', new KeyframeEffect(createDiv(t),
|
||||
KEYFRAMES, DURATION), document.timeline);
|
||||
|
||||
// TODO(majidvp): We should use Animation.startTime here because the
|
||||
// animation may not immediately start.
|
||||
const startTime = document.timeline.currentTime;
|
||||
animation.play();
|
||||
await waitForNextFrame();
|
||||
const timelineTime = document.timeline.currentTime;
|
||||
assert_times_equal(animation.currentTime, (timelineTime - startTime));
|
||||
}, 'The current time is calculated from the timeline time and start time');
|
||||
|
||||
// TODO(majidvp): Add tests for playbackRate and animations that are not
|
||||
// associated with a timeline once these are supported in WorkletAnimation.
|
||||
// http://crbug.com/833846
|
||||
</script>
|
||||
</body>
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Test: background-image applicability to ::first-letter</title>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/">
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo">
|
||||
<link rel="match" href="reference/background-image-first-line-ref.html">
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="background-image applicability to ::first-line">
|
||||
<style type="text/css">
|
||||
#content {
|
||||
color: transparent;
|
||||
font: 100px Ahem;
|
||||
}
|
||||
#content::first-line {
|
||||
background-image: url("support/cat.png"); /* 98 w. by 99px h. */
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if cat image is visible.</p>
|
||||
<div id="content">X</div>
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
#content {
|
||||
color: transparent;
|
||||
font: 100px Ahem;
|
||||
background-image: url("../support/cat.png"); /* 98 w. by 99px h. */
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if cat image is visible.</p>
|
||||
<div id="content">X</div>
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-height">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div style="position:relative;">
|
||||
<div style="position:absolute; top:50px; width:50px; height:50px; background:red;"></div>
|
||||
</div>
|
||||
<div id="multicol" style="columns:2; column-fill:auto; column-gap:0; width:101px; height:100px; background:green;">
|
||||
<div style="position:relative; height:100px;">
|
||||
<div style="position:absolute; bottom:0;">
|
||||
<div style="position:absolute; bottom:0;">
|
||||
<div style="width:50px; height:50px; background:green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
document.getElementById("multicol").style.width = "100px";
|
||||
</script>
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Andrew Comminos" href="mailto:acomminos@fb.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#container {
|
||||
width: 600px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#left {
|
||||
width: 300px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
background: rgba(200, 200, 200, 0.8);
|
||||
order: 0;
|
||||
}
|
||||
|
||||
#right {
|
||||
width: 300px;
|
||||
background-color: rgba(0, 128, 0, 0.8);
|
||||
margin-left: -100px;
|
||||
order: 1;
|
||||
}
|
||||
</style>
|
||||
<div id="container">
|
||||
<div id="right"></div>
|
||||
<a id="left" href="#">foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo</a>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
test(function(t)
|
||||
{
|
||||
const container = document.querySelector('#container');
|
||||
// Target the intersection of the two child elements.
|
||||
// The occluded link should not be clickable.
|
||||
const x = container.offsetLeft + 250;
|
||||
const y = container.offsetTop + 5;
|
||||
|
||||
var element = document.elementFromPoint(x, y);
|
||||
assert_equals(element.nodeName, 'DIV');
|
||||
assert_equals(element.id, 'right');
|
||||
}, "Flexboxes should perform hit testing in reverse paint order for overlapping elements: flex order case (crbug.com/844505)");
|
||||
</script>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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));
|
||||
}
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Overflow and Transforms: css-overflow-3</title>
|
||||
<link rel="author" title="mailto:atotic@google.com">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#scrollable">
|
||||
<meta name="assert" content="css transform is used to compute scroll overflow of abspos children">
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
#target {
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin-left: 100px;
|
||||
transform: translateX(-100px);
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<!-- There should be no scrollbars on this page -->
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
<script>
|
||||
test(() => {
|
||||
assert_equals(document.querySelector("#container").scrollWidth, 200);
|
||||
}, '#target used transform when computing scroll overflow');
|
||||
</script>
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Overflow and Transforms: css-overflow-3</title>
|
||||
<link rel="author" title="mailto:atotic@google.com">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#scrollable">
|
||||
<meta name="assert" content="css transform is used to compute scroll overflow of inline-block children">
|
||||
<style>
|
||||
#container {
|
||||
border: 1px solid black;
|
||||
width: 200px;
|
||||
overflow: auto;
|
||||
}
|
||||
#target {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: green;
|
||||
position: relative;
|
||||
top: 100px;
|
||||
transform: translateY(80px);
|
||||
}
|
||||
</style>
|
||||
<!--
|
||||
#container should have vertical scrollbar because target is offset
|
||||
by position:relative and transform.
|
||||
-->
|
||||
<div id="container">
|
||||
<span>
|
||||
scroll
|
||||
<div id="target"></div>
|
||||
down
|
||||
</span>
|
||||
</div>
|
||||
<script>
|
||||
test(() => {
|
||||
assert_equals(document.querySelector("#container").scrollHeight, 200);
|
||||
}, '#target used transform when computing scroll overflow');
|
||||
</script>
|
|
@ -3,7 +3,7 @@
|
|||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
#space { height: 4000px; }
|
||||
#space { height: 1000px; }
|
||||
#ancestor { position: relative; }
|
||||
#before, #anchor { height: 100px; }
|
||||
#anchor { background-color: green; }
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
#changer { height: 1500px; }
|
||||
#anchor {
|
||||
width: 150px;
|
||||
height: 4000px;
|
||||
height: 1000px;
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
body { height: 4000px; }
|
||||
body { height: 1000px; }
|
||||
div { height: 100px; }
|
||||
|
||||
</style>
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
body { height: 4000px; }
|
||||
body { height: 1000px; }
|
||||
#outer { width: 300px; }
|
||||
#outer:after { content: " "; clear:both; display: table; }
|
||||
#float {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
body { height: 4000px; }
|
||||
body { height: 1000px; }
|
||||
#outer { width: 300px; }
|
||||
#zeroheight { height: 0px; }
|
||||
#changer { height: 100px; background-color: red; }
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
body { height: 4000px; margin: 0; }
|
||||
body { height: 1000px; margin: 0; }
|
||||
#fixed, #content { width: 200px; height: 100px; }
|
||||
#fixed { position: fixed; left: 100px; top: 50px; }
|
||||
#before { height: 50px; }
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
body { height: 4000px }
|
||||
body { height: 1000px }
|
||||
#outer { line-height: 100px }
|
||||
#ib1, #ib2 { display: inline-block }
|
||||
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<style>
|
||||
|
||||
#space {
|
||||
height: 4000px;
|
||||
height: 1000px;
|
||||
}
|
||||
#header {
|
||||
background-color: #F5B335;
|
||||
|
|
|
@ -32,11 +32,9 @@ html.vrl { writing-mode: vertical-rl; }
|
|||
.vpush { height: 80px !important; }
|
||||
.hpush { width: 70px !important; }
|
||||
|
||||
#anchor-container {
|
||||
display: inline-block;
|
||||
}
|
||||
#anchor {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background-color: #8e8;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
|
@ -51,10 +49,8 @@ html.vrl { writing-mode: vertical-rl; }
|
|||
</style>
|
||||
<div id="container">
|
||||
<div id="block_pusher"></div><br>
|
||||
<div id="inline_pusher"></div><div id="anchor-container">
|
||||
<div id="anchor">
|
||||
<div id="grower"></div>
|
||||
</div>
|
||||
<div id="inline_pusher"></div><div id="anchor">
|
||||
<div id="grower"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
body { height: 4000px }
|
||||
body { height: 1000px }
|
||||
#A, #B { width: 100px; background-color: #afa; }
|
||||
#B { height: 100px; }
|
||||
#inner { width: 100px; height: 100px; background-color: pink; }
|
||||
|
|
|
@ -7,7 +7,7 @@ body {
|
|||
position: absolute;
|
||||
font-size: 100px;
|
||||
width: 200px;
|
||||
height: 4000px;
|
||||
height: 1000px;
|
||||
line-height: 100px;
|
||||
}
|
||||
|
||||
|
|
|
@ -10,16 +10,7 @@ connect to the device.
|
|||
## Hosts
|
||||
|
||||
Until we find a better way, we need to root the Android device and update the
|
||||
/etc/hosts file to include
|
||||
|
||||
```
|
||||
127.0.0.1 web-platform.test
|
||||
127.0.0.1 www.web-platform.test
|
||||
127.0.0.1 www1.web-platform.test
|
||||
127.0.0.1 www2.web-platform.test
|
||||
127.0.0.1 xn--n8j6ds53lwwkrqhv28a.web-platform.test
|
||||
127.0.0.1 xn--lve-6lad.web-platform.test
|
||||
```
|
||||
/etc/hosts file to include the entries printed by `./wpt make-hosts-file`.
|
||||
|
||||
## CA certificate
|
||||
|
||||
|
|
|
@ -3,34 +3,19 @@
|
|||
importScripts("/resources/testharness.js");
|
||||
importScripts("/resources/WebIDLParser.js", "/resources/idlharness.js");
|
||||
|
||||
function doTest([html, dom, cssom, touchevents, uievents]) {
|
||||
var idlArray = new IdlArray();
|
||||
idlArray.add_untested_idls(dom + cssom + touchevents + uievents);
|
||||
idlArray.add_idls(html);
|
||||
|
||||
idlArray.add_objects({
|
||||
WorkerNavigator: ['self.navigator'],
|
||||
WebSocket: ['new WebSocket("ws://foo")'],
|
||||
CloseEvent: ['new CloseEvent("close")'],
|
||||
Worker: [],
|
||||
MessageEvent: ['new MessageEvent("message", { data: 5 })'],
|
||||
DedicatedWorkerGlobalScope: ['self'],
|
||||
});
|
||||
|
||||
idlArray.test();
|
||||
};
|
||||
|
||||
function fetchData(url) {
|
||||
return fetch(url).then((response) => response.text());
|
||||
}
|
||||
|
||||
promise_test(function() {
|
||||
return Promise.all([fetchData("/interfaces/html.idl"),
|
||||
fetchData("/interfaces/dom.idl"),
|
||||
fetchData("/interfaces/cssom.idl"),
|
||||
fetchData("/interfaces/touch-events.idl"),
|
||||
fetchData("/interfaces/uievents.idl")])
|
||||
.then(doTest);
|
||||
}, "Test driver");
|
||||
idl_test(
|
||||
["html"],
|
||||
["dom", "cssom", "touch-events", "uievents"],
|
||||
idlArray => {
|
||||
idlArray.add_objects({
|
||||
WorkerNavigator: ['self.navigator'],
|
||||
WebSocket: ['new WebSocket("ws://foo")'],
|
||||
CloseEvent: ['new CloseEvent("close")'],
|
||||
Worker: [],
|
||||
MessageEvent: ['new MessageEvent("message", { data: 5 })'],
|
||||
DedicatedWorkerGlobalScope: ['self'],
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
done();
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
<title>Selector: pseudo-classes (:link)</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org" id=link1>
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/#pseudo-classes" id=link2>
|
||||
<link rel=stylesheet href="non-existent.css" id=link3>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
|
|
|
@ -154,7 +154,7 @@ class FennecBrowser(FirefoxBrowser):
|
|||
"apz.allow_zooming": False,
|
||||
"android.widget_paints_background": False,
|
||||
# Ensure that scrollbars are always painted
|
||||
"ui.scrollbarFadeBeginDelay": 100000})
|
||||
"layout.testing.overlay-scrollbars.always-visible": True})
|
||||
|
||||
if self.install_fonts:
|
||||
self.logger.debug("Copying Ahem font to profile")
|
||||
|
|
|
@ -166,7 +166,9 @@ class ServoWebDriverBrowser(Browser):
|
|||
command=" ".join(self.command))
|
||||
|
||||
def is_alive(self):
|
||||
return self.proc.poll() is None
|
||||
if self.runner:
|
||||
return self.runner.is_running()
|
||||
return False
|
||||
|
||||
def cleanup(self):
|
||||
self.stop()
|
||||
|
|
|
@ -679,18 +679,6 @@ const gCSSProperties = {
|
|||
{ type: 'discrete', options: [ [ '". . a b" ". .a b"', 'none' ] ] }
|
||||
]
|
||||
},
|
||||
'grid-template-columns': {
|
||||
// https://drafts.csswg.org/css-template/#grid-template-columns
|
||||
types: [
|
||||
{ type: 'discrete', options: [ [ '1px', '5px' ] ] }
|
||||
]
|
||||
},
|
||||
'grid-template-rows': {
|
||||
// https://drafts.csswg.org/css-template/#grid-template-rows
|
||||
types: [
|
||||
{ type: 'discrete', options: [ [ '1px', '5px' ] ] }
|
||||
]
|
||||
},
|
||||
'height': {
|
||||
// https://drafts.csswg.org/css21/visudet.html#propdef-height
|
||||
types: [
|
||||
|
|
|
@ -108,7 +108,7 @@
|
|||
};
|
||||
await pc.setLocalDescription(offer);
|
||||
eventSequence += 'setLocalDescription;';
|
||||
await signalingstatechangeResolver.promise;
|
||||
await signalingstatechangeResolver;
|
||||
assert_equals(eventSequence, 'onsignalingstatechange;setLocalDescription;');
|
||||
}, 'onsignalingstatechange fires before setLocalDescription resolves');
|
||||
|
||||
|
|
|
@ -114,4 +114,22 @@
|
|||
}));
|
||||
}, `setRemoteDescription(rollback) should ignore invalid sdp content and succeed`);
|
||||
|
||||
promise_test(async t => {
|
||||
const pc1 = new RTCPeerConnection();
|
||||
const pc2 = new RTCPeerConnection();
|
||||
t.add_cleanup(() => pc1.close());
|
||||
t.add_cleanup(() => pc2.close());
|
||||
|
||||
// We don't use this right away
|
||||
const offer1 = await pc1.createOffer({offerToReceiveAudio: true});
|
||||
|
||||
// Create offer from pc2, apply and rollback on pc1
|
||||
const offer2 = await pc2.createOffer({offerToReceiveAudio: true});
|
||||
await pc1.setRemoteDescription(offer2);
|
||||
await pc1.setRemoteDescription({type: "rollback"});
|
||||
|
||||
// Then try applying pc1's old offer
|
||||
await pc1.setLocalDescription(offer1);
|
||||
}, `local offer created before setRemoteDescription(remote offer) then rollback should still be usable`);
|
||||
|
||||
</script>
|
||||
|
|
|
@ -40,9 +40,6 @@
|
|||
function onFrame(time, xrFrame) {
|
||||
assert_true(xrFrame instanceof XRFrame);
|
||||
|
||||
assert_not_equals(xrFrame.views, null);
|
||||
assert_equals(xrFrame.views.length, 2);
|
||||
|
||||
let viewerPose = xrFrame.getViewerPose(referenceSpace);
|
||||
|
||||
assert_not_equals(viewerPose, null);
|
||||
|
@ -50,10 +47,13 @@
|
|||
assert_equals(viewerPose.poseModelMatrix[i], identityMatrix[i]);
|
||||
}
|
||||
|
||||
assert_not_equals(viewerPose.getViewMatrix(xrFrame.views[0]), null);
|
||||
assert_equals(viewerPose.getViewMatrix(xrFrame.views[0]).length, 16);
|
||||
assert_not_equals(viewerPose.getViewMatrix(xrFrame.views[1]), null);
|
||||
assert_equals(viewerPose.getViewMatrix(xrFrame.views[1]).length, 16);
|
||||
assert_not_equals(viewerPose.views, null);
|
||||
assert_equals(viewerPose.views.length, 2);
|
||||
|
||||
assert_not_equals(viewerPose.views[0].viewMatrix, null);
|
||||
assert_equals(viewerPose.views[0].viewMatrix.length, 16);
|
||||
assert_not_equals(viewerPose.views[1].viewMatrix, null);
|
||||
assert_equals(viewerPose.views[1].viewMatrix.length, 16);
|
||||
|
||||
// Test does not complete until the returned promise resolves.
|
||||
resolve();
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue