mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests to revision b'1d9b01e2fad6af3a057d571b1e088e15fa9bc8e6'
This commit is contained in:
WPT Sync Bot
parent
cfef75c99b
commit
bb34f95b33
1683 changed files with 37170 additions and 4252 deletions
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<title>View transitions: capture elements with object view box on the pseudo (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
body { background: pink }
|
||||
#target {
|
||||
position: relative;
|
||||
top: 93.75px;
|
||||
left: 71px;
|
||||
background: green;
|
||||
width: 143px;
|
||||
height: 125px;
|
||||
}
|
||||
</style>
|
||||
<div id=target></div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>View transitions: element remains grouping during transition</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
top: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
background: green;
|
||||
}
|
||||
body {
|
||||
perspective: 1000px;
|
||||
height: 500px;
|
||||
background: pink
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class=parent></div>
|
||||
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: view transition element remains grouping during animation</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="element-is-grouping-during-animation-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
top: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
background: red;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.named {
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
transform: translateZ(-500px);
|
||||
}
|
||||
|
||||
body {
|
||||
perspective: 1000px;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
::view-transition-group(root) {
|
||||
animation-duration: 500s;
|
||||
opacity: 0;
|
||||
}
|
||||
::view-transition-group(target) {
|
||||
animation-duration: 0s;
|
||||
}
|
||||
::view-transition-new(target) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
}
|
||||
::view-transition-old(target) {
|
||||
animation: unset;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
::view-transition {
|
||||
background: pink;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id=target class="parent named"><div class=child></div></div>
|
||||
|
||||
<script>
|
||||
function runTest() {
|
||||
let transition = document.startViewTransition();
|
||||
transition.ready.then(() => {
|
||||
requestAnimationFrame(() => {
|
||||
target.classList.remove("named");
|
||||
requestAnimationFrame(takeScreenshot);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>View transitions: element remains grouping during transition</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
top: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
background: blue;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.child {
|
||||
background: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
transform: translateZ(-500px);
|
||||
}
|
||||
body {
|
||||
perspective: 1000px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class=parent><div class=child></div></div>
|
||||
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: view transition element remains grouping during animation</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="element-stops-grouping-after-animation-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
top: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
background: blue;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.named {
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.child {
|
||||
background: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
transform: translateZ(-500px);
|
||||
}
|
||||
|
||||
body {
|
||||
perspective: 1000px;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
::view-transition-group(root) {
|
||||
animation-duration: 50ms;
|
||||
opacity: 0;
|
||||
}
|
||||
::view-transition-group(target) {
|
||||
animation-duration: 0s;
|
||||
}
|
||||
::view-transition-new(target) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
}
|
||||
::view-transition-old(target) {
|
||||
animation: unset;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
::view-transition {
|
||||
background: pink;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id=target class="parent named"><div class=child></div></div>
|
||||
|
||||
<script>
|
||||
function runTest() {
|
||||
let transition = document.startViewTransition();
|
||||
transition.ready.then(() => {
|
||||
requestAnimationFrame(() => {
|
||||
target.classList.remove("named");
|
||||
});
|
||||
});
|
||||
transition.finished.then(takeScreenshot);
|
||||
}
|
||||
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<title>View transitions: capture elements and then change overflow (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
body { background: pink }
|
||||
#target {
|
||||
position: relative;
|
||||
background: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
#child {
|
||||
background: blue;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
left: 30px;
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
}
|
||||
#child.large {
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id=target><div id=child class=large></div></div>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<meta name="timeout" content="long">
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: capture elements and then change overflow</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-changes-overflow-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
position: relative;
|
||||
background: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
#child {
|
||||
background: blue;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
left: 30px;
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
}
|
||||
#child.large {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
html::view-transition-group(*) { animation-duration: 300s; }
|
||||
html::view-transition-new(*) { animation: unset; opacity: 1; }
|
||||
html::view-transition-old(*) { animation: unset; opacity: 0; }
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: pink; }
|
||||
</style>
|
||||
|
||||
<div id=target><div id=child></div></div>
|
||||
<script>
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
document.startViewTransition().ready.then(() => {
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
child.classList.add("large");
|
||||
requestAnimationFrame(takeScreenshot);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta name="timeout" content="long">
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: capture elements with object view box on the pseudo</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="content-with-object-view-box-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
position: relative;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
background: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
html::view-transition-group(*) { animation-duration: 300s; }
|
||||
html::view-transition-new(*) {
|
||||
object-view-box: inset(5px 10px 15px 20px);
|
||||
/* Set explicit width height so that we can check the object view box math */
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
}
|
||||
html::view-transition-old(*) { animation: unset; opacity: 0; }
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: pink; }
|
||||
</style>
|
||||
<div id=target></div>
|
||||
<script>
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
document.startViewTransition().ready.then(takeScreenshot);
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>View transitions: new element is modified while offscren and brought onscreen using pseudo (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
|
||||
<style>
|
||||
#target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
view-transition-name: target;
|
||||
position: fixed;
|
||||
background: blue;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="target" class="target">
|
||||
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: new element is modified while offscren and brought onscreen using pseudo</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="offscreen-element-modified-before-coming-onscreen-ref.html">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
view-transition-name: target;
|
||||
position: fixed;
|
||||
background: green;
|
||||
left: 0;
|
||||
top: 200vh;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: grey;
|
||||
view-transition-name: hidden;
|
||||
}
|
||||
|
||||
.onscreen::view-transition-group(target) {
|
||||
transform: unset;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
animation: unset;
|
||||
}
|
||||
|
||||
html::view-transition-group(hidden) { animation-duration: 300s; }
|
||||
html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
|
||||
|
||||
html::view-transition-old(target) { animation: unset; opacity: 0; }
|
||||
html::view-transition-new(target) { animation: unset; opacity: 1; }
|
||||
|
||||
</style>
|
||||
|
||||
<div id=target class=target>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
function bringOnscreenAndScreenshot() {
|
||||
document.documentElement.classList.add("onscreen");
|
||||
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
));
|
||||
}
|
||||
|
||||
async function runTest() {
|
||||
// Start the transition while the element is offscreen.
|
||||
let transition = document.startViewTransition();
|
||||
await transition.ready;
|
||||
|
||||
// Change the element's color while its still offscreen.
|
||||
target.style.background = "blue";
|
||||
|
||||
// Bring the element onscreen and ensure the color change is presented.
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(
|
||||
bringOnscreenAndScreenshot))
|
||||
));
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta name="timeout" content="long">
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: capture elements with object view box on the pseudo</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="content-with-object-view-box-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
position: relative;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
background: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
html::view-transition-group(*) { animation-duration: 300s; }
|
||||
html::view-transition-old(*) {
|
||||
object-view-box: inset(5px 10px 15px 20px);
|
||||
/* Need to specify explicit dimensions since view box changes intrinsic size */
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
}
|
||||
html::view-transition-new(*) { animation: unset; opacity: 0; }
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: pink; }
|
||||
</style>
|
||||
<div id=target></div>
|
||||
<script>
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
document.startViewTransition().ready.then(takeScreenshot);
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -34,7 +34,7 @@ promise_test(async t => {
|
|||
first.style.filter = "blur(5px)";
|
||||
viewbox = window.getComputedStyle(
|
||||
document.documentElement, "::view-transition-new(target)").objectViewBox;
|
||||
assert_not_equals(viewbox, "none", "incorrect viewbox " + viewbox);
|
||||
assert_equals(viewbox, "none", "incorrect viewbox " + viewbox);
|
||||
|
||||
transition.finished.then(resolve, reject);
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue