mirror of
https://github.com/servo/servo.git
synced 2025-08-13 17:35:36 +01:00
Update web-platform-tests to revision b'bcf4a27c0a9dbb07d974a880acb26eb289a85c7e'
This commit is contained in:
WPT Sync Bot
parent
293c8623fa
commit
61b963c73e
183 changed files with 3880 additions and 1012 deletions
|
|
@ -59,5 +59,5 @@ function runTest() {
|
|||
});
|
||||
}
|
||||
|
||||
onload = requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -60,5 +60,5 @@ function runTest() {
|
|||
});
|
||||
}
|
||||
|
||||
onload = requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
height: 300px;
|
||||
}
|
||||
|
||||
html::view-transition-container(root) { animation-duration: 300s; }
|
||||
html::view-transition-group(root) { animation-duration: 300s; }
|
||||
html::view-transition-old(target) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
|
|
|
|||
|
|
@ -51,5 +51,5 @@ function runTest() {
|
|||
});
|
||||
}
|
||||
|
||||
onload = requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -53,5 +53,5 @@ function runTest() {
|
|||
});
|
||||
}
|
||||
|
||||
onload = requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ body { margin : 0; }
|
|||
filter: blur(30px);
|
||||
}
|
||||
|
||||
html::view-transition-container(root) { animation-duration: 300s; }
|
||||
html::view-transition-group(root) { animation-duration: 300s; }
|
||||
html::view-transition-old(target) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
|
|
@ -48,5 +48,5 @@ async function runTest() {
|
|||
});
|
||||
transition.ready.then(() => requestAnimationFrame(takeScreenshot));
|
||||
}
|
||||
onclick = requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<title>View transitions: capture span elements</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="new-content-captures-positioned-spans-ref.html">
|
||||
<link rel="match" href="new-content-captures-spans-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
span {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<title>View transitions: New content is an inline element (ref)</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
|
||||
<link rel="author" href="mailto:bokan@chromium.org">
|
||||
|
||||
<style>
|
||||
:root { background-color: rebeccapurple; }
|
||||
body { margin: 0; }
|
||||
|
||||
.container {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
.container.start {
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
.container.end {
|
||||
top: 300px;
|
||||
}
|
||||
|
||||
.container.transitioned {
|
||||
left: 20px;
|
||||
width: 200px;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
|
||||
.inline {
|
||||
opacity: 0;
|
||||
background-color: coral;
|
||||
color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.transitioned .inline {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#dummyStartInline {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
top: 100px;
|
||||
width: 200px;
|
||||
/* scale transform applied in script below */
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container start">
|
||||
<span>FILLER FILLER</span>
|
||||
<span id="start" class="inline">INLINE INLINE INLINE INLINE</span>
|
||||
<p style="margin-top: 50px">START STATE</p>
|
||||
</div>
|
||||
|
||||
<div class="container end transitioned">
|
||||
<span>FILLER FILLER</span>
|
||||
<span id="end" class="inline">INLINE INLINE INLINE INLINE</span>
|
||||
<p>END STATE</p>
|
||||
</div>
|
||||
|
||||
<div id="dummyStartInline" class="transitioned">
|
||||
<span style="opacity:0">FILLER FILLER</span>
|
||||
<span class="inline">INLINE INLINE INLINE INLINE</span>
|
||||
</div>
|
||||
<script>
|
||||
let endWidth = document.getElementById('end').getBoundingClientRect().width;
|
||||
let startWidth = document.getElementById('start').getBoundingClientRect().width;
|
||||
let scale = startWidth / endWidth;
|
||||
document.getElementById('dummyStartInline').style.transform = `scale(${scale})`;
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: New content is an inline element.</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
|
||||
<link rel="author" href="mailto:bokan@chromium.org">
|
||||
<link rel="match" href="new-content-is-inline-ref.html">
|
||||
<meta name="fuzzy" content="new-content-is-inline-ref.html:0-255;0-1000">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<style>
|
||||
body { margin : 0; }
|
||||
.container {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
.container.start {
|
||||
top: 100px;
|
||||
view-transition-name: container-start;
|
||||
}
|
||||
|
||||
.container.end {
|
||||
top: 300px;
|
||||
view-transition-name: container-end;
|
||||
}
|
||||
|
||||
.transitioned .container {
|
||||
left: 20px;
|
||||
width: 200px;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
|
||||
.inline {
|
||||
background-color: limegreen;
|
||||
/* allow small pixel diff in text */
|
||||
color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.start .inline {
|
||||
view-transition-name: start;
|
||||
}
|
||||
|
||||
.end .inline {
|
||||
view-transition-name: end;
|
||||
}
|
||||
|
||||
.transitioned .inline {
|
||||
background-color: coral;
|
||||
}
|
||||
|
||||
/* Overlay the page with purple to ensure screenshots taken are of the view
|
||||
* transition. */
|
||||
:root {
|
||||
view-transition-name: none;
|
||||
}
|
||||
::view-transition {
|
||||
background-color: rebeccapurple;
|
||||
}
|
||||
|
||||
/* This step function keeps the old snapshots in their initial state for half
|
||||
* the duration, then the new snapshots in their final state for the last half
|
||||
* of the duration. */
|
||||
html::view-transition-group(*),
|
||||
html::view-transition-new(*),
|
||||
html::view-transition-old(*) {
|
||||
animation-timing-function: steps(2, jump-none);
|
||||
}
|
||||
|
||||
/* Set different durations for start and end so the two subtrees can be
|
||||
* differentiated. The test will manually control animation playback so
|
||||
* duration doesn't matter. */
|
||||
html::view-transition-group(container-start),
|
||||
html::view-transition-group(start),
|
||||
html::view-transition-new(container-start),
|
||||
html::view-transition-old(container-start) {
|
||||
animation-duration: 2s;
|
||||
}
|
||||
html::view-transition-group(container-end),
|
||||
html::view-transition-group(end),
|
||||
html::view-transition-new(container-end),
|
||||
html::view-transition-old(container-end) {
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
/* Hide the old states for the inlines, they're tested in
|
||||
* old-content-is-inline.html */
|
||||
html::view-transition-old(start),
|
||||
html::view-transition-old(end) {
|
||||
animation: unset;
|
||||
opacity: 0;
|
||||
}
|
||||
html::view-transition-new(start),
|
||||
html::view-transition-new(end) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!--
|
||||
This subtree will be held at the animation start to test the old content's
|
||||
starting position.
|
||||
-->
|
||||
<div class="container start">
|
||||
<span>FILLER FILLER</span>
|
||||
<span id="start" class="inline">INLINE INLINE INLINE INLINE</span>
|
||||
<p style="margin-top: 50px">START STATE</p>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
This subtree will be held at the animation end to test the old content's
|
||||
ending position.
|
||||
-->
|
||||
<div class="container end">
|
||||
<span>FILLER FILLER</span>
|
||||
<span id="end" class="inline">INLINE INLINE INLINE INLINE</span>
|
||||
<p>END STATE</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
if (typeof failIfNot != 'undefined')
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
let transition = document.startViewTransition(() => {
|
||||
document.body.classList.add('transitioned');
|
||||
});
|
||||
|
||||
transition.ready.then(() => {
|
||||
for (const anim of document.getAnimations()) {
|
||||
anim.pause();
|
||||
if (anim.effect.getTiming().duration == 3000) {
|
||||
// This is an animation for the end subtree. Adjust it to the end
|
||||
// (without finishing the animation) so we're displaying the final
|
||||
// position.
|
||||
anim.currentTime = anim.effect.getTiming().duration - 1;
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(takeScreenshot);
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<title>View transitions: Old content is an inline element (ref)</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
|
||||
<link rel="author" href="mailto:bokan@chromium.org">
|
||||
|
||||
<style>
|
||||
:root { background-color: rebeccapurple; }
|
||||
body { margin: 0; }
|
||||
|
||||
.container {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
.container.start {
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
.container.end {
|
||||
top: 300px;
|
||||
}
|
||||
|
||||
.container.transitioned {
|
||||
left: 20px;
|
||||
width: 200px;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
|
||||
.inline {
|
||||
background-color: limegreen;
|
||||
color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.transitioned .inline {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#dummyEndInline {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 250px;
|
||||
/* scale transform applied in script below */
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container start">
|
||||
<span>FILLER FILLER</span>
|
||||
<span id="start" class="inline">INLINE INLINE INLINE INLINE</span>
|
||||
<p>START STATE</p>
|
||||
</div>
|
||||
|
||||
<div class="container end transitioned">
|
||||
<span>FILLER FILLER</span>
|
||||
<span id="end" class="inline">INLINE INLINE INLINE INLINE</span>
|
||||
<p>END STATE</p>
|
||||
</div>
|
||||
|
||||
<div id="dummyEndInline">
|
||||
<span style="opacity:0">FILLER FILLER</span>
|
||||
<span class="inline">INLINE INLINE INLINE INLINE</span>
|
||||
</div>
|
||||
<script>
|
||||
let endWidth = document.getElementById('end').getBoundingClientRect().width;
|
||||
let startWidth = document.getElementById('start').getBoundingClientRect().width;
|
||||
let scale = endWidth / startWidth;
|
||||
document.getElementById('dummyEndInline').style.transform = `scale(${scale})`;
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: Old content is an inline element.</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
|
||||
<link rel="author" href="mailto:bokan@chromium.org">
|
||||
<link rel="match" href="old-content-is-inline-ref.html">
|
||||
<meta name="fuzzy" content="old-content-is-inline-ref.html:0-255;0-500">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<style>
|
||||
body { margin : 0; }
|
||||
.container {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
.container.start {
|
||||
top: 100px;
|
||||
view-transition-name: container-start;
|
||||
}
|
||||
|
||||
.container.end {
|
||||
top: 300px;
|
||||
view-transition-name: container-end;
|
||||
}
|
||||
|
||||
.transitioned .container {
|
||||
left: 20px;
|
||||
width: 200px;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
|
||||
.inline {
|
||||
background-color: limegreen;
|
||||
/* allow small pixel diff in text */
|
||||
color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.start .inline {
|
||||
view-transition-name: start;
|
||||
}
|
||||
|
||||
.end .inline {
|
||||
view-transition-name: end;
|
||||
}
|
||||
|
||||
.transitioned .inline {
|
||||
background-color: coral;
|
||||
}
|
||||
|
||||
/* Overlay the page with purple to ensure screenshots taken are of the view
|
||||
* transition. */
|
||||
:root {
|
||||
view-transition-name: none;
|
||||
}
|
||||
::view-transition {
|
||||
background-color: rebeccapurple;
|
||||
}
|
||||
|
||||
/* This step function keeps the old snapshots in their initial state for half
|
||||
* the duration, then the new snapshots in their final state for the last half
|
||||
* of the duration. */
|
||||
html::view-transition-group(*),
|
||||
html::view-transition-new(*),
|
||||
html::view-transition-old(*) {
|
||||
animation-timing-function: steps(2, jump-none);
|
||||
}
|
||||
|
||||
/* Set different durations for start and end so the two subtrees can be
|
||||
* differentiated. The test will manually control animation playback so
|
||||
* duration doesn't matter. */
|
||||
html::view-transition-group(container-start),
|
||||
html::view-transition-group(start),
|
||||
html::view-transition-new(container-start),
|
||||
html::view-transition-old(container-start) {
|
||||
animation-duration: 2s;
|
||||
}
|
||||
html::view-transition-group(container-end),
|
||||
html::view-transition-group(end),
|
||||
html::view-transition-new(container-end),
|
||||
html::view-transition-old(container-end) {
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
/* Hide the new states for the inlines, they're tested in
|
||||
* new-content-is-inline.html */
|
||||
html::view-transition-new(start),
|
||||
html::view-transition-new(end) {
|
||||
animation: unset;
|
||||
opacity: 0;
|
||||
}
|
||||
html::view-transition-old(start),
|
||||
html::view-transition-old(end) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!--
|
||||
This subtree will be held at the animation start to test the old content's
|
||||
starting position.
|
||||
-->
|
||||
<div class="container start">
|
||||
<span>FILLER FILLER</span>
|
||||
<span id="start" class="inline">INLINE INLINE INLINE INLINE</span>
|
||||
<p>START STATE</p>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
This subtree will be held at the animation end to test the old content's
|
||||
ending position.
|
||||
-->
|
||||
<div class="container end">
|
||||
<span>FILLER FILLER</span>
|
||||
<span id="end" class="inline">INLINE INLINE INLINE INLINE</span>
|
||||
<p>END STATE</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
if (typeof failIfNot != 'undefined')
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
let transition = document.startViewTransition(() => {
|
||||
document.body.classList.add('transitioned');
|
||||
});
|
||||
|
||||
transition.ready.then(() => {
|
||||
for (const anim of document.getAnimations()) {
|
||||
anim.pause();
|
||||
if (anim.effect.getTiming().duration == 3000) {
|
||||
// This is an animation for the end subtree. Adjust it to the end
|
||||
// (without finishing the animation) so we're displaying the final
|
||||
// position.
|
||||
anim.currentTime = anim.effect.getTiming().duration - 1;
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(takeScreenshot);
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
|
||||
</script>
|
||||
|
|
@ -61,7 +61,7 @@ async function runTest() {
|
|||
});
|
||||
}
|
||||
|
||||
onload = requestAnimationFrame(runTest);
|
||||
onload = () => requestAnimationFrame(runTest);
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ async function runTest() {
|
|||
});
|
||||
}
|
||||
|
||||
onload = requestAnimationFrame(runTest);
|
||||
onload = () => requestAnimationFrame(runTest);
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
top: 200px;
|
||||
}
|
||||
|
||||
html::view-transition-container(root) { animation-duration: 300s; }
|
||||
html::view-transition-group(root) { animation-duration: 300s; }
|
||||
html::view-transition-old(target) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
background: green;
|
||||
}
|
||||
|
||||
html::view-transition-container(root) { animation-duration: 300s; }
|
||||
html::view-transition-group(root) { animation-duration: 300s; }
|
||||
html::view-transition-old(target) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
background: green;
|
||||
}
|
||||
|
||||
html::view-transition-container(root) { animation-duration: 300s; }
|
||||
html::view-transition-group(root) { animation-duration: 300s; }
|
||||
html::view-transition-old(target) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
|
|
|
|||
|
|
@ -20,6 +20,6 @@ function run() {
|
|||
}));
|
||||
});
|
||||
}
|
||||
onload = requestAnimationFrame(() => requestAnimationFrame(run));
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(run));
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue