mirror of
https://github.com/servo/servo.git
synced 2025-08-17 11:25:35 +01:00
Update web-platform-tests to revision b'0802d8bd01e17178d9cd2355e6fbaf3c098e7953'
This commit is contained in:
WPT Sync Bot
parent
aa427dd412
commit
9ed042224a
254 changed files with 10823 additions and 1484 deletions
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: 3d transform ref</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
div { box-sizing: border-box; will-change: transform }
|
||||
.wrap_perspective {
|
||||
perspective: 100px;
|
||||
width: max-content;
|
||||
transform: translate(200px);
|
||||
}
|
||||
.rotatex {
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateX(20deg);
|
||||
background: blue;
|
||||
}
|
||||
.shared {
|
||||
contain: layout;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
body { background: pink }
|
||||
|
||||
</style>
|
||||
|
||||
<div class="wrap_perspective"><div class="rotatex shared"></div></div>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: 3d transform</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="3d-transform-incoming-ref.html">
|
||||
<meta name=fuzzy content="3d-transform-incoming-ref.html:0-80;0-500">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
div { box-sizing: border-box; will-change: transform }
|
||||
.rotate3d {
|
||||
transform: translate(20px, 100px) rotate3d(1, 1, 1, 45deg);
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.wrap_perspective {
|
||||
perspective: 100px;
|
||||
width: max-content;
|
||||
transform: translate(200px);
|
||||
}
|
||||
.rotatex {
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateX(20deg);
|
||||
background: green;
|
||||
}
|
||||
.shared {
|
||||
view-transition-name: shared;
|
||||
contain: layout;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#hidden {
|
||||
view-transition-name: hidden;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: red;
|
||||
contain: layout;
|
||||
}
|
||||
|
||||
::view-transition-group(hidden) { animation-duration: 300s; }
|
||||
::view-transition-image-pair(hidden) { visibility: hidden; }
|
||||
::view-transition-group(root) { visibility: hidden; }
|
||||
::view-transition { background: pink; }
|
||||
::view-transition-group(*) { animation-delay: 300s; }
|
||||
::view-transition-new(*) { animation: unset; opacity: 1; }
|
||||
::view-transition-old(*) { animation: unset; opacity: 0; }
|
||||
</style>
|
||||
|
||||
<div id=wrapper class=wrap_perspective><div id=target class="shared rotatex"></div></div>
|
||||
<div id=hidden></div>
|
||||
|
||||
<script>
|
||||
function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
wrapper.classList.toggle("wrap_perspective");
|
||||
target.classList.toggle("rotatex");
|
||||
target.classList.toggle("rotate3d");
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
|
||||
onload = requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: 3d transform ref</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
div { box-sizing: border-box; will-change: transform }
|
||||
.rotate3d {
|
||||
transform: translate(20px, 100px) rotate3d(1, 1, 1, 45deg);
|
||||
background: green;
|
||||
}
|
||||
.shared {
|
||||
contain: layout;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
body { background: pink }
|
||||
|
||||
</style>
|
||||
|
||||
<div class="rotate3d shared"></div>
|
||||
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: 3d transform</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="3d-transform-outgoing-ref.html">
|
||||
<meta name=fuzzy content="3d-transform-outgoing-ref.html:0-255;0-1200">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<style>
|
||||
div { box-sizing: border-box; will-change: transform }
|
||||
.rotate3d {
|
||||
transform: translate(20px, 100px) rotate3d(1, 1, 1, 45deg);
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.wrap_perspective {
|
||||
perspective: 100px;
|
||||
width: max-content;
|
||||
transform: translate(200px);
|
||||
}
|
||||
.rotatex {
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateX(20deg);
|
||||
background: green;
|
||||
}
|
||||
.shared {
|
||||
view-transition-name: shared;
|
||||
contain: layout;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#hidden {
|
||||
view-transition-name: hidden;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: red;
|
||||
contain: layout;
|
||||
}
|
||||
|
||||
::view-transition-group(hidden) { animation-duration: 300s; }
|
||||
::view-transition-image-pair(hidden) { visibility: hidden; }
|
||||
::view-transition-group(root) { visibility: hidden; }
|
||||
::view-transition { background: pink; }
|
||||
::view-transition-group(*) { animation-duration: 0s; }
|
||||
::view-transition-new(*) { animation: unset; opacity: 0; }
|
||||
::view-transition-old(*) { animation: unset; opacity: 1; }
|
||||
</style>
|
||||
|
||||
<div id=wrapper class=wrap_perspective><div id=target class="shared rotatex"></div></div>
|
||||
<div id=hidden></div>
|
||||
|
||||
<script>
|
||||
function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
wrapper.classList.toggle("wrap_perspective");
|
||||
target.classList.toggle("rotatex");
|
||||
target.classList.toggle("rotate3d");
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
|
||||
onload = requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: display content in a pseudo with object-fit: none (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
#container {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#content {
|
||||
background: lightblue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
transform-origin: top left;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
#inner {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: green;
|
||||
top: 5px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
html { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div id=container><div id=content><div id=inner></div></div></div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: display content in a pseudo with object-fit: none (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
#container {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
#content {
|
||||
background: lightblue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
html { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div id=container><div id=content>This is text</div></div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: element with content less than box size (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;
|
||||
}
|
||||
#inner {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: blue;
|
||||
position: relative;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id=target>
|
||||
<div id=inner></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: element with content less than box size</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="content-smaller-than-box-size-ref.html">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
div { contain: paint; }
|
||||
#target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
#inner {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: blue;
|
||||
position: relative;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
background: pink;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
view-transition-name: hidden;
|
||||
}
|
||||
|
||||
html::view-transition-group(hidden) { animation-duration: 300s; }
|
||||
html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
|
||||
|
||||
html::view-transition-new(target) { animation: unset; opacity: 0; }
|
||||
html::view-transition-old(target) { animation: unset; opacity: 1; }
|
||||
|
||||
</style>
|
||||
|
||||
<div id=target>
|
||||
<div id=inner></div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(takeScreenshot);
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(runTest);
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>Shared transitions: offscreen content</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
body { background: pink }
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 500px;
|
||||
contain: paint;
|
||||
background: green;
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class=flex>
|
||||
<div class=box>ancestor c-v</div>
|
||||
<div class=box>self c-v</div>
|
||||
<div class=box>descendant c-v</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: offscreen content with content-visibility auto</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="content-visibility-auto-shared-element-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 500px;
|
||||
contain: paint;
|
||||
}
|
||||
.shared {
|
||||
background: green;
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.spacer {
|
||||
height: 3000px;
|
||||
}
|
||||
#hidden {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: red;
|
||||
contain: paint;
|
||||
view-transition-name: hidden;
|
||||
}
|
||||
.locked {
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: 500px;
|
||||
}
|
||||
|
||||
html::view-transition-group(hidden) { animation-duration: 300s; }
|
||||
html::view-transition-image-pair(hidden) { visibility: hidden; }
|
||||
|
||||
html::view-transition-group(*) { animation-duration: 0s; }
|
||||
html::view-transition-new(*) { animation: unset; opacity: 0; }
|
||||
html::view-transition-old(*) { animation: unset; opacity: 1; }
|
||||
html::view-transition-group(root) { display: none; }
|
||||
html::view-transition { background: pink }
|
||||
|
||||
</style>
|
||||
|
||||
<div class=flex>
|
||||
<div id=dst1 class=box></div>
|
||||
<div id=dst2 class=box></div>
|
||||
<div id=dst3 class=box></div>
|
||||
</div>
|
||||
<div id=hidden></div>
|
||||
<div class=spacer></div>
|
||||
<div id=content>
|
||||
<div class=locked><div id=src1 class="box shared" style="view-transition-name: one">ancestor c-v</div></div>
|
||||
<div id=src2 class="box shared locked" style="view-transition-name: two">self c-v</div>
|
||||
<div id=src3 class="box shared" style="view-transition-name: three"><div class=locked>descendant c-v</div></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
content.remove();
|
||||
dst1.style = "view-transition-name: one";
|
||||
dst2.style = "view-transition-name: two";
|
||||
dst3.style = "view-transition-name: three";
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: element with clip max texture size (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
.target {
|
||||
contain: paint;
|
||||
width: 100px;
|
||||
height: 8000px;
|
||||
}
|
||||
|
||||
.green {
|
||||
width: 100%;
|
||||
height: 7900px;
|
||||
background: green
|
||||
}
|
||||
|
||||
.blue {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: grey;
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="target1" class="target">
|
||||
<div class="green"></div>
|
||||
<div id="scrollblue" class="blue"></div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
</body>
|
||||
<script>
|
||||
scrollblue.scrollIntoView();
|
||||
</script>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: element with clip max texture size</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="content-with-clip-max-texture-size-ref.html">
|
||||
<meta name=fuzzy content="maxDifference=10;totalPixels=200">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.target {
|
||||
contain: paint;
|
||||
width: 100px;
|
||||
height: 8000px;
|
||||
}
|
||||
|
||||
.green {
|
||||
width: 100%;
|
||||
height: 7900px;
|
||||
background: green
|
||||
}
|
||||
|
||||
.blue {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: grey;
|
||||
view-transition-name: hidden;
|
||||
}
|
||||
#target1 { view-transition-name: target1; }
|
||||
|
||||
html::view-transition-group(hidden) { animation-duration: 300s; }
|
||||
html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
|
||||
|
||||
html::view-transition-old(*), html::view-transition-new(*) {
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
html::view-transition-old(target1) { animation: unset; opacity: 0; }
|
||||
html::view-transition-new(target1) { animation: unset; opacity: 1; }
|
||||
|
||||
</style>
|
||||
|
||||
<div id="target1" class="target">
|
||||
<div class="green"></div>
|
||||
<div id="scrollblue" class="blue"></div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
scrollblue.scrollIntoView();
|
||||
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: element with clip (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
.target {
|
||||
contain: paint;
|
||||
width: 100px;
|
||||
height: 100vh;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.embedded {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 150vh;
|
||||
}
|
||||
</style>
|
||||
<div id="target1" class="target">
|
||||
<div class="embedded" style="background: green;"></div>
|
||||
<div class="embedded" style="background: blue"></div>
|
||||
</div>
|
||||
<div id="target2" class="target">
|
||||
<div class="embedded" style="background: green;"></div>
|
||||
<div class="embedded" style="background: blue"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: element with clip (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
.container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: -50vh;
|
||||
left: 0px;
|
||||
overflow: auto;
|
||||
}
|
||||
.target {
|
||||
contain: paint;
|
||||
width: 100px;
|
||||
height: 100vh;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.embedded {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
height: 150vh;
|
||||
}
|
||||
</style>
|
||||
<div id="container">
|
||||
<div id="target1" class="target">
|
||||
<div class="embedded" style="background: green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: root element with clip</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="content-with-clip-root-ref.html">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.target {
|
||||
contain: paint;
|
||||
width: 100px;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
top: 50vh;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.embedded {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: grey;
|
||||
view-transition-name: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
html::view-transition-group(hidden) { animation-duration: 300s; }
|
||||
html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
|
||||
|
||||
html::view-transition-group(target2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
html::view-transition-group(root) {
|
||||
top: -50vh;
|
||||
bottom: 50vh;
|
||||
}
|
||||
|
||||
html::view-transition-old(root) { animation: unset; opacity: 0; height: 100%; }
|
||||
html::view-transition-new(root) { animation: unset; opacity: 1; height: 100%; }
|
||||
|
||||
</style>
|
||||
|
||||
<div id="target1" class="target">
|
||||
<div class="embedded" style="background: green;"></div>
|
||||
<div class="embedded" style="background: blue"></div>
|
||||
</div>
|
||||
<div id="target2" class="target">
|
||||
<div class="embedded" style="background: green;"></div>
|
||||
<div class="embedded" style="background: blue"></div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
// Add a shared element to ensure its bounds don't expand the root snapshot
|
||||
// size.
|
||||
target2.style = "view-transition-name: target2";
|
||||
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: element with clip</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="content-with-clip-ref.html">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.target {
|
||||
contain: paint;
|
||||
width: 100px;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
top: 50vh;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.embedded {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: grey;
|
||||
view-transition-name: hidden;
|
||||
}
|
||||
|
||||
/* Makes sure the viewport height is consistent for scrollbars to align */
|
||||
body {
|
||||
height: 150vh;
|
||||
}
|
||||
|
||||
html::view-transition-group(hidden) { animation-duration: 300s; }
|
||||
html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
|
||||
|
||||
html::view-transition-group(target1), html::view-transition-group(target2) {
|
||||
position: absolute;
|
||||
top: -50vh;
|
||||
}
|
||||
html::view-transition-old(target1) { animation: unset; opacity: 1; }
|
||||
html::view-transition-new(target2) { animation: unset; opacity: 1; }
|
||||
|
||||
</style>
|
||||
|
||||
<div id="target1" class="target" style="view-transition-name: target1">
|
||||
<div class="embedded" style="background: green;"></div>
|
||||
<div class="embedded" style="background: blue"></div>
|
||||
</div>
|
||||
<div id="target2" class="target">
|
||||
<div class="embedded" style="background: green;"></div>
|
||||
<div class="embedded" style="background: blue"></div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
target1.style = "";
|
||||
target2.style = "view-transition-name: target2";
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: element with inline child (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="author" href="mailto:bokan@chromium.org">
|
||||
<style>
|
||||
#target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow-clip-margin: 500px;
|
||||
contain: paint;
|
||||
view-transition-name: target;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
#child {
|
||||
position: relative;
|
||||
left: 100px;
|
||||
top: 100px;
|
||||
color: lightgreen;
|
||||
background-color: darkgreen;
|
||||
}
|
||||
|
||||
#innerchild {
|
||||
position: relative;
|
||||
left: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="target" style="font: 25px/1 Ahem">
|
||||
<span id="child">INLINE<br><span id="innerchild">BOX</span></span>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: element with inline child</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="author" href="mailto:bokan@chromium.org">
|
||||
<link rel="match" href="content-with-inline-child-ref.html">
|
||||
<meta name="flags" content="ahem">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
|
||||
#target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow-clip-margin: 500px;
|
||||
contain: paint;
|
||||
view-transition-name: target;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
#child {
|
||||
position: relative;
|
||||
left: 100px;
|
||||
top: 100px;
|
||||
color: lightgreen;
|
||||
background-color: darkgreen;
|
||||
}
|
||||
|
||||
#innerchild {
|
||||
position: relative;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
html::view-transition-new(root) {
|
||||
opacity: 0;
|
||||
}
|
||||
html::view-transition-old(root) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
html::view-transition-old(target) {
|
||||
animation-duration: 3s;
|
||||
animation-timing-function: steps(1, end);
|
||||
opacity: 1;
|
||||
}
|
||||
html::view-transition-new(target) { animation: unset; opacity: 0; }
|
||||
|
||||
</style>
|
||||
|
||||
<div id="target" style="font: 25px/1 Ahem">
|
||||
<span id="child">INLINE<br><span id="innerchild">BOX</span></span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
// Remove the target to ensure the ref is compared against the snapshot.
|
||||
document.getElementById("target").remove();
|
||||
|
||||
requestAnimationFrame(
|
||||
() => requestAnimationFrame(
|
||||
() => requestAnimationFrame(
|
||||
() => requestAnimationFrame(takeScreenshot))));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: shared element with overflow (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;
|
||||
contain: paint;
|
||||
background: blue;
|
||||
overflow-clip-margin: 50px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
.child {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
background: green;
|
||||
}
|
||||
body { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div class=target>
|
||||
<div class=child>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: shared element with overflow (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
.target {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
contain: paint;
|
||||
background: blue;
|
||||
overflow-clip-margin: 50px;
|
||||
view-transition-name: target;
|
||||
zoom: 1.5;
|
||||
border: 2px solid black;
|
||||
}
|
||||
.child {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
background: green;
|
||||
zoom: 1.2;
|
||||
}
|
||||
body { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div class=ancestor>
|
||||
<div class=target>
|
||||
<div class=child>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: object-view-box</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="content-with-transform-ref.html">
|
||||
<meta name="fuzzy" content="content-with-transform-ref.html:0-1;0-500">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.target {
|
||||
contain: paint;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
transform: scale(2.0, 3.0);
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.embedded {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: grey;
|
||||
view-transition-name: hidden;
|
||||
}
|
||||
|
||||
html::view-transition-group(hidden) { animation-duration: 300s; }
|
||||
html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
|
||||
|
||||
html::view-transition-new(target) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
}
|
||||
html::view-transition-old(target) { animation: unset; opacity: 0; }
|
||||
|
||||
</style>
|
||||
|
||||
<div id="target" class="target">
|
||||
<div class="embedded" style="background: green;">Shared</div>
|
||||
<div class="embedded" style="background: blue">Element</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
let t = document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(runTest);
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<meta name="timeout" content="long">
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: object-view-box</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="content-with-transform-ref.html">
|
||||
<meta name="fuzzy" content="content-with-transform-ref.html:0-1;0-400">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.target {
|
||||
contain: paint;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
transform: scale(2.0, 3.0);
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.embedded {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: grey;
|
||||
view-transition-name: hidden;
|
||||
}
|
||||
|
||||
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: 1;
|
||||
}
|
||||
html::view-transition-new(target) { animation: unset; opacity: 0; }
|
||||
|
||||
</style>
|
||||
|
||||
<div id="target" class="target">
|
||||
<div class="embedded" style="background: green;">Shared</div>
|
||||
<div class="embedded" style="background: blue">Element</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(runTest);
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: object-view-box (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
.target {
|
||||
contain: paint;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
transform: scale(2.0, 3.0);
|
||||
}
|
||||
|
||||
.embedded {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="target" class="target">
|
||||
<div class="embedded" style="background: green;">Shared</div>
|
||||
<div class="embedded" style="background: blue">Element</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: css tags generate pseudo elements in paint order (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
|
||||
<style>
|
||||
div {
|
||||
contain: layout;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#one {
|
||||
background: green;
|
||||
left: 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
#two {
|
||||
background: yellow;
|
||||
left: 125px;
|
||||
z-index: -1;
|
||||
}
|
||||
#three {
|
||||
background: blue;
|
||||
left: 200px;
|
||||
z-index: 0;
|
||||
}
|
||||
body { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div id=one></div>
|
||||
<div id=two></div>
|
||||
<div id=three></div>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: css tags generate pseudo elements in paint order (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
|
||||
<style>
|
||||
div {
|
||||
contain: paint;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#one {
|
||||
background: green;
|
||||
left: 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
#two {
|
||||
background: yellow;
|
||||
left: 125px;
|
||||
z-index: -1;
|
||||
}
|
||||
#three {
|
||||
background: blue;
|
||||
left: 200px;
|
||||
z-index: 0;
|
||||
}
|
||||
#four {
|
||||
background: lightgreen;
|
||||
left: 275px;
|
||||
z-index: 0;
|
||||
}
|
||||
body { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div id=one></div>
|
||||
<div id=two></div>
|
||||
<div id=three></div>
|
||||
<div id=four></div>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: css tags generate pseudo elements in paint order</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="css-tags-paint-order-with-entry-ref.html">
|
||||
<meta name="fuzzy" content="css-tags-paint-order-with-entry-ref.html:0-120;0-300">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
div { contain: paint; }
|
||||
#one {
|
||||
background: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
view-transition-name: one;
|
||||
}
|
||||
#two {
|
||||
background: yellow;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
view-transition-name: two;
|
||||
}
|
||||
#three {
|
||||
background: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
view-transition-name: three;
|
||||
}
|
||||
#four {
|
||||
position: absolute;
|
||||
background: lightgreen;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 50px;
|
||||
left: 275px;
|
||||
view-transition-name: four;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
background: pink;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
view-transition-name: hidden;
|
||||
}
|
||||
|
||||
html::view-transition-group(hidden) { animation-duration: 300s; }
|
||||
html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
|
||||
|
||||
html::view-transition-group(one) {
|
||||
animation: unset;
|
||||
transform: unset;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
}
|
||||
html::view-transition-group(two) {
|
||||
animation: unset;
|
||||
transform: unset;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
}
|
||||
html::view-transition-group(three) {
|
||||
animation: unset;
|
||||
transform: unset;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 200px;
|
||||
}
|
||||
html::view-transition-new(four) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
html::view-transition-new(one),
|
||||
html::view-transition-new(two),
|
||||
html::view-transition-new(three) { animation: unset; opacity: 0; }
|
||||
|
||||
html::view-transition-old(one),
|
||||
html::view-transition-old(two),
|
||||
html::view-transition-old(three) { animation: unset; opacity: 1; }
|
||||
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
|
||||
</style>
|
||||
|
||||
<div id=one></div>
|
||||
<div id=two></div>
|
||||
<div id=three></div>
|
||||
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
const f = document.createElement("div");
|
||||
f.id = "four";
|
||||
document.body.appendChild(f);
|
||||
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: css tags generate pseudo elements in paint order</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="css-tags-paint-order-ref.html">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
div { contain: layout; }
|
||||
#one {
|
||||
background: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
view-transition-name: one;
|
||||
}
|
||||
#two {
|
||||
background: yellow;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
view-transition-name: two;
|
||||
}
|
||||
#three {
|
||||
background: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
view-transition-name: three;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
background: pink;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
view-transition-name: hidden;
|
||||
}
|
||||
|
||||
html::view-transition-group(hidden) { animation-duration: 300s; }
|
||||
html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
|
||||
|
||||
html::view-transition-group(one) {
|
||||
animation: unset;
|
||||
transform: unset;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
}
|
||||
html::view-transition-group(two) {
|
||||
animation: unset;
|
||||
transform: unset;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
}
|
||||
html::view-transition-group(three) {
|
||||
animation: unset;
|
||||
transform: unset;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
html::view-transition-new(one),
|
||||
html::view-transition-new(two),
|
||||
html::view-transition-new(three) { animation: unset; opacity: 0; }
|
||||
|
||||
html::view-transition-old(one),
|
||||
html::view-transition-old(two),
|
||||
html::view-transition-old(three) { animation: unset; opacity: 1; }
|
||||
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
|
||||
</style>
|
||||
|
||||
<div id=one></div>
|
||||
<div id=two></div>
|
||||
<div id=three></div>
|
||||
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: use css tags for shared elements (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
|
||||
<style>
|
||||
div { contain: paint; }
|
||||
#left {
|
||||
background: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
}
|
||||
#right {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: green;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 250px;
|
||||
}
|
||||
body { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div id=left></div>
|
||||
<div id=right></div>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: use css tags for shared elements</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="css-tags-shared-element-ref.html">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
div { contain: paint; }
|
||||
#left {
|
||||
background: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
}
|
||||
#right {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: blue;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 250px;
|
||||
}
|
||||
.left-tag {
|
||||
view-transition-name: left-element;
|
||||
}
|
||||
.right-tag {
|
||||
view-transition-name: right-element;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
background: pink;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
view-transition-name: hidden;
|
||||
}
|
||||
|
||||
html::view-transition-group(hidden) { animation-duration: 300s; }
|
||||
html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
|
||||
|
||||
html::view-transition-group(left-element),
|
||||
html::view-transition-group(right-element) { animation-duration: 0s; }
|
||||
|
||||
html::view-transition-new(left-element),
|
||||
html::view-transition-new(right-element) { animation: unset; opacity: 0; }
|
||||
|
||||
html::view-transition-old(left-element),
|
||||
html::view-transition-old(right-element) { animation: unset; opacity: 1; }
|
||||
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
|
||||
</style>
|
||||
|
||||
<div id=left class="left-tag"></div>
|
||||
<div id=right class="right-tag"></div>
|
||||
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
left.classList.remove("left-tag");
|
||||
left.classList.add("right-tag");
|
||||
|
||||
right.classList.remove("right-tag");
|
||||
right.classList.add("left-tag");
|
||||
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: root tag is reserved</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
contain: paint;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id=first></div>
|
||||
<div id=second></div>
|
||||
|
||||
<script>
|
||||
promise_test(async t => {
|
||||
return new Promise((resolve, reject) => {
|
||||
first.style = "view-transition-name: target";
|
||||
second.style = "view-transition-name: target";
|
||||
let transition = document.startViewTransition();
|
||||
transition.ready.then(() => {}, () => {});
|
||||
transition.domUpdated.then(() => {}, () => {});
|
||||
transition.finished.then(reject, resolve);
|
||||
});
|
||||
}, "Two different elements with the same tag rejects capture");
|
||||
|
||||
promise_test(async t => {
|
||||
return new Promise((resolve, reject) => {
|
||||
first.style = "view-transition-name: target";
|
||||
let transition = document.startViewTransition(() => {
|
||||
first.style = "view-transition-name: target";
|
||||
second.style = "view-transition-name: target";
|
||||
});
|
||||
transition.ready.then(() => {}, () => {});
|
||||
transition.domUpdated.then(() => {}, () => {});
|
||||
transition.finished.then(reject, resolve);
|
||||
});
|
||||
}, "Two different elements with the same tag rejects start");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>View transitions: element with overflow ref</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
.old_target {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: lightblue;
|
||||
transform: translate(8px, 8px);
|
||||
}
|
||||
|
||||
.new_target {
|
||||
position: fixed;
|
||||
top: 200px;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: lightgreen;
|
||||
transform: translate(8px, 8px);
|
||||
}
|
||||
|
||||
.inner {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
border: 5px solid black;
|
||||
}
|
||||
</style>
|
||||
<div class="old_target">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
<div class="new_target">
|
||||
<div class="inner" style="border:5px solid blue"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: element with overflow</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="element-with-overflow-ref.html">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.hidden {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
view-transition-name: hidden;
|
||||
background: green;
|
||||
contain: layout;
|
||||
}
|
||||
|
||||
.target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: lightblue;
|
||||
contain: layout;
|
||||
view-transition-name: target;
|
||||
}
|
||||
.inner {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
border: 5px solid black;
|
||||
}
|
||||
|
||||
html::view-transition-group(hidden) { animation-duration: 300s; }
|
||||
html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
|
||||
|
||||
html::view-transition-new(*), html::view-transition-old(*) {
|
||||
opacity: 1;
|
||||
animation: unset;
|
||||
}
|
||||
|
||||
html::view-transition-old(target) {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
html::view-transition-new(target) {
|
||||
top: 200px;
|
||||
left: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="target">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
<div class="hidden"></div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
document.getElementsByClassName("target")[0].style.background="lightgreen";
|
||||
document.getElementsByClassName("inner")[0].style.border="5px solid blue";
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: event pseudo name</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="web-animations-api-ref.html">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
:root { view-transition-name: none; }
|
||||
#first {
|
||||
background: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
view-transition-name: shared;
|
||||
}
|
||||
|
||||
html::view-transition-group(*),
|
||||
html::view-transition-image-pair(*),
|
||||
html::view-transition-new(*),
|
||||
html::view-transition-old(*) {
|
||||
animation-duration: 600s;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
}
|
||||
html::view-transition-image-pair(*) {
|
||||
animation: fade-in 600s both;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id=first></div>
|
||||
<script>
|
||||
async_test(t => {
|
||||
let names = [];
|
||||
document.documentElement.addEventListener("animationstart", (e) => {
|
||||
names.push(e.pseudoElement);
|
||||
if (names.length == 4) {
|
||||
t.step(() => assert_true(names.includes("::view-transition-group(shared)")));
|
||||
t.step(() => assert_true(names.includes("::view-transition-image-pair(shared)")));
|
||||
t.step(() => assert_true(names.includes("::view-transition-new(shared)")));
|
||||
t.step(() => assert_true(names.includes("::view-transition-old(shared)")));
|
||||
t.done();
|
||||
}
|
||||
});
|
||||
document.startViewTransition();
|
||||
}, "verifies pseudo name includes a tag");
|
||||
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>Shared transitions: offscreen content</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
body { background: pink }
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 500px;
|
||||
contain: paint;
|
||||
background: green;
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class=flex>
|
||||
<div class=box>500</div>
|
||||
<div class=box>2000</div>
|
||||
<div class=box>3500</div>
|
||||
<div class=box>5000</div>
|
||||
<div class=box>6500</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: offscreen content</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="far-away-capture-ref.html">
|
||||
<meta name="fuzzy" content="far-away-capture-ref.html:0-1;0-5">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 500px;
|
||||
contain: paint;
|
||||
}
|
||||
.shared {
|
||||
background: green;
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.spacer {
|
||||
height: 1000px;
|
||||
}
|
||||
#hidden {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: red;
|
||||
contain: paint;
|
||||
view-transition-name: hidden;
|
||||
}
|
||||
|
||||
html::view-transition-group(hidden) { animation-duration: 300s; }
|
||||
html::view-transition-image-pair(hidden) { visibility: hidden; }
|
||||
|
||||
html::view-transition-group(*) { animation-duration: 0s; }
|
||||
html::view-transition-new(*) { animation: unset; opacity: 0; }
|
||||
html::view-transition-old(*) { animation: unset; opacity: 1; }
|
||||
html::view-transition-group(root) { display: none; }
|
||||
html::view-transition { background: pink }
|
||||
|
||||
</style>
|
||||
|
||||
<div class=flex>
|
||||
<div id=dst1 class=box></div>
|
||||
<div id=dst2 class=box></div>
|
||||
<div id=dst3 class=box></div>
|
||||
<div id=dst4 class=box></div>
|
||||
<div id=dst5 class=box></div>
|
||||
</div>
|
||||
<div id=hidden></div>
|
||||
<div id=content>
|
||||
<div id=src1 class="box shared" style="view-transition-name: one">500</div>
|
||||
<div class=spacer></div>
|
||||
<div id=src2 class="box shared" style="view-transition-name: two">2000</div>
|
||||
<div class=spacer></div>
|
||||
<div id=src3 class="box shared" style="view-transition-name: three">3500</div>
|
||||
<div class=spacer></div>
|
||||
<div id=src4 class="box shared" style="view-transition-name: four">5000</div>
|
||||
<div class=spacer></div>
|
||||
<div id=src5 class="box shared" style="view-transition-name: five">6500</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
content.remove();
|
||||
dst1.style = "view-transition-name: one";
|
||||
dst2.style = "view-transition-name: two";
|
||||
dst3.style = "view-transition-name: three";
|
||||
dst4.style = "view-transition-name: four";
|
||||
dst5.style = "view-transition-name: five";
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<title>getComputedStyle without transition should not crash</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
|
||||
<body onload="start();">
|
||||
|
||||
<script>
|
||||
async function start() {
|
||||
var el = document.createElement(undefined);
|
||||
document.body.appendChild(el);
|
||||
|
||||
var style = self.getComputedStyle(el, ':view-transition');
|
||||
style.getPropertyValue("--child");
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: hit test shared element at the real dom location</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="hit-test-unpainted-element-ref.html">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
html { view-transition-name: none }
|
||||
#target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
view-transition-name: shared;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.before {
|
||||
background: yellow;
|
||||
left: 200px;
|
||||
}
|
||||
.after {
|
||||
background: green;
|
||||
}
|
||||
.after:hover {
|
||||
background: red;
|
||||
}
|
||||
#unrelated {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
top: -50px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
html::view-transition-group(shared) {
|
||||
animation-delay: 300s;
|
||||
}
|
||||
html::view-transition-old(shared) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
}
|
||||
html::view-transition-new(shared) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id=target class=before></div>
|
||||
<div id=unrelated></div>
|
||||
|
||||
<script>
|
||||
async_test(t => {
|
||||
document.startViewTransition(() => {
|
||||
target.classList.toggle("before");
|
||||
target.classList.toggle("after");
|
||||
requestAnimationFrame(async () => {
|
||||
// Check the old location of the element, we should get body.
|
||||
t.step(() => assert_equals(document.elementFromPoint(20, 20), document.body));
|
||||
// Check the new location of the pseudo element, we should get documentElement,
|
||||
// which is the originating element for the pseudo element.
|
||||
t.step(() => assert_equals(document.elementFromPoint(220, 20), document.documentElement));
|
||||
// Check the spot that used to be covered by the element but now has
|
||||
// unrelated element, which is what we expect to get.
|
||||
t.step(() => assert_equals(document.elementFromPoint(20, 70), unrelated));
|
||||
t.done();
|
||||
});
|
||||
});
|
||||
}, "hit test should not hit unpainted element, but does hit pseudo and unrelated elements");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: hit test shared element at the real dom location (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: relative;
|
||||
background: green;
|
||||
left: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: hit test shared element at the real dom location</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="hit-test-unpainted-element-ref.html">
|
||||
|
||||
<script src="/resources/testdriver.js"></script>
|
||||
<script src="/resources/testdriver-actions.js"></script>
|
||||
<script src="/resources/testdriver-vendor.js"></script>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<style>
|
||||
html { view-transition-name: none }
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
view-transition-name: shared;
|
||||
}
|
||||
.before {
|
||||
position: relative;
|
||||
background: yellow;
|
||||
left: 200px;
|
||||
}
|
||||
.after {
|
||||
background: green;
|
||||
}
|
||||
.after:hover {
|
||||
background: red;
|
||||
}
|
||||
|
||||
html::view-transition-group(shared) {
|
||||
animation-delay: 300s;
|
||||
}
|
||||
html::view-transition-old(shared) {
|
||||
animation: unset;
|
||||
opacity: 0;
|
||||
}
|
||||
html::view-transition-new(shared) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id=target class=before></div>
|
||||
|
||||
<script>
|
||||
function mouseMoveToTarget(x, y) {
|
||||
return new test_driver.Actions().pointerMove(x, y).send();
|
||||
}
|
||||
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
target.classList.toggle("before");
|
||||
target.classList.toggle("after");
|
||||
// Ensure that we exit the capture phase before doing the rest of the test,
|
||||
// since we want the animating phase to do hit-testing.
|
||||
requestAnimationFrame(async () => {
|
||||
await mouseMoveToTarget(10, 10);
|
||||
requestAnimationFrame(takeScreenshot);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: hit test shared element at the real dom location (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
|
||||
<style>
|
||||
#target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
background: blue;
|
||||
position: relative;
|
||||
left: 200px;
|
||||
}
|
||||
#unrelated {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
position: relative;
|
||||
top: 200px;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id=target></div>
|
||||
<div id=unrelated></div>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: hit test shared element at the real dom location</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="hit-test-unrelated-element-ref.html">
|
||||
|
||||
<script src="/resources/testdriver.js"></script>
|
||||
<script src="/resources/testdriver-actions.js"></script>
|
||||
<script src="/resources/testdriver-vendor.js"></script>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<style>
|
||||
html { view-transition-name: none }
|
||||
#target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
background: blue;
|
||||
view-transition-name: shared;
|
||||
}
|
||||
#target.before {
|
||||
position: relative;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
#unrelated {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
position: relative;
|
||||
top: 200px;
|
||||
left: 200px;
|
||||
}
|
||||
#unrelated:hover {
|
||||
background: green;
|
||||
}
|
||||
|
||||
html::view-transition-group(shared) {
|
||||
animation-delay: 300s;
|
||||
}
|
||||
html::view-transition-old(shared) {
|
||||
animation: unset;
|
||||
opacity: 0;
|
||||
}
|
||||
html::view-transition-new(shared) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id=target class=before></div>
|
||||
<div id=unrelated></div>
|
||||
|
||||
<script>
|
||||
function mouseMoveToTarget(x, y) {
|
||||
return new test_driver.Actions().pointerMove(x, y).send();
|
||||
}
|
||||
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
target.classList.toggle("before");
|
||||
requestAnimationFrame(async () => {
|
||||
await mouseMoveToTarget(210, 310);
|
||||
requestAnimationFrame(takeScreenshot);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: iframe</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
iframe { width: 500px; height: 500px }
|
||||
</style>
|
||||
|
||||
<iframe srcdoc="
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
html { height: 50%; }
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
"></iframe>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: iframe</title>
|
||||
<meta name="timeout" content="long">
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="iframe-transition-ref.html">
|
||||
<meta name="assert" content="Ensure that iframe root capture is sized and displayed correctly">
|
||||
<meta name=fuzzy content="iframe-transition-ref.html:0-200;0-200">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
iframe { width: 500px; height: 500px }
|
||||
</style>
|
||||
|
||||
<script>
|
||||
addEventListener("message", takeScreenshot);
|
||||
</script>
|
||||
|
||||
<iframe id=frame src="http://{{domains[www]}}:{{ports[http][0]}}/css/css-view-transitions/support/frame-helper.html"></iframe>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: ensure input is discarded when rendering is suppressed</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/testdriver.js"></script>
|
||||
<script src="/resources/testdriver-actions.js"></script>
|
||||
<script src="/resources/testdriver-vendor.js"></script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
contain: paint;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id=first></div>
|
||||
|
||||
<script>
|
||||
async function runTest(resolve, reject) {
|
||||
window.addEventListener('mousedown', (event) => {
|
||||
let point = event.clientX + "," + event.clientY;
|
||||
if (event.clientX == 20 && event.clientY == 20)
|
||||
resolve();
|
||||
else
|
||||
reject(point);
|
||||
});
|
||||
|
||||
let transition = document.startViewTransition(() => {
|
||||
return new Promise(async (inner_resolve) => {
|
||||
new test_driver.Actions()
|
||||
.setContext(window)
|
||||
.addPointer("finger1", "touch")
|
||||
.pointerMove(10, 10, {origin: "viewport", sourceName: "finger1"})
|
||||
.pointerDown({sourceName: "finger1"})
|
||||
.pointerUp({sourceName: "finger1"})
|
||||
.send();
|
||||
|
||||
// Use a timeout to ensure the input has been queued up. await
|
||||
// times out because the event is discarded.
|
||||
step_timeout(inner_resolve, 1000);
|
||||
});
|
||||
});
|
||||
await transition.finished;
|
||||
|
||||
await new test_driver.Actions()
|
||||
.setContext(window)
|
||||
.addPointer("finger1", "touch")
|
||||
.pointerMove(20, 20, {origin: "viewport", sourceName: "finger1"})
|
||||
.pointerDown({sourceName: "finger1"})
|
||||
.pointerUp({sourceName: "finger1"})
|
||||
.send();
|
||||
}
|
||||
|
||||
promise_test(async t => {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
// Dispatch an event before starting the test to finish init logic in
|
||||
// synthetic input dispatch.
|
||||
await new test_driver.Actions()
|
||||
.setContext(window)
|
||||
.addPointer("finger1", "touch")
|
||||
.pointerMove(0, 0, {origin: "viewport", sourceName: "finger1"})
|
||||
.pointerDown({sourceName: "finger1"})
|
||||
.pointerUp({sourceName: "finger1"})
|
||||
.send();
|
||||
runTest(resolve, reject);
|
||||
});
|
||||
}, "Input when rendering suppressed is ignored");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>Shared transitions: different width container should keep aspect ratio (by default)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
.spacer {
|
||||
/* 10px - border from above and below */
|
||||
height: 6px;
|
||||
}
|
||||
.smallbox {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: blue;
|
||||
}
|
||||
.bigbox {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
body { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div style="width: 50px; height: 100px; border: 2px solid black">
|
||||
<div style="height: 50px; background: blue"></div>
|
||||
</div>
|
||||
<div class=spacer></div>
|
||||
<div style="width: 200px; height: 100px; border: 2px solid black">
|
||||
<div style="height: 200px; background: blue"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: shared element writing-modes (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
|
||||
<style>
|
||||
.tb { writing-mode: horizontal-tb; }
|
||||
.lr { writing-mode: vertical-lr; }
|
||||
.rl { writing-mode: vertical-rl; }
|
||||
.shared {
|
||||
margin: 2px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: green;
|
||||
contain: paint;
|
||||
border: 1px solid black;
|
||||
}
|
||||
html { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div id=one class="tb shared">T</div>
|
||||
<div id=two class="lr shared">T</div>
|
||||
<div id=three class="rl shared">T</div>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: shared element writing-modes</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="japanese-tag-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
#hidden {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
contain: paint;
|
||||
view-transition-name: 隠れた;
|
||||
}
|
||||
.tb { writing-mode: horizontal-tb; }
|
||||
.lr { writing-mode: vertical-lr; }
|
||||
.rl { writing-mode: vertical-rl; }
|
||||
.shared {
|
||||
margin: 2px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: green;
|
||||
contain: paint;
|
||||
border: 1px solid black;
|
||||
}
|
||||
#target1, #target2, #target3 {
|
||||
background: red;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
width: 100px;
|
||||
height: 500px;
|
||||
contain: paint;
|
||||
}
|
||||
#one { view-transition-name: 第一; }
|
||||
#two { view-transition-name: 第二; }
|
||||
#three { view-transition-name: 第三; }
|
||||
|
||||
html::view-transition-group(隠れた) { animation-duration: 300s; }
|
||||
html::view-transition-image-pair(隠れた) { animation: unset; opacity: 0; }
|
||||
|
||||
html::view-transition-group(第一),
|
||||
html::view-transition-group(第二),
|
||||
html::view-transition-group(第三) {
|
||||
animation-delay: 300s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
html::view-transition-new(第一),
|
||||
html::view-transition-new(第二),
|
||||
html::view-transition-new(第三) { animation: unset; opacity: 0; }
|
||||
|
||||
html::view-transition-old(第一),
|
||||
html::view-transition-old(第二),
|
||||
html::view-transition-old(第三) { animation: unset; opacity: 1; }
|
||||
|
||||
/* hide the root so we show transition background to ensure we're in a transition */
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
|
||||
</style>
|
||||
|
||||
<div id=hidden>Should not be visible</div>
|
||||
<div id=target1>Should not be visible</div>
|
||||
<div id=target2>Should not be visible</div>
|
||||
<div id=target3>Should not be visible</div>
|
||||
<div id=one class="shared tb">T</div>
|
||||
<div id=two class="shared lr">T</div>
|
||||
<div id=three class="shared rl">T</div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
one.remove();
|
||||
two.remove();
|
||||
three.remove();
|
||||
hidden.style.left = "200px";
|
||||
target1.style.viewTransitionName = "第一";
|
||||
target2.style.viewTransitionName = "第二";
|
||||
target3.style.viewTransitionName = "第三";
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>SET: Blend modes are set up only in paired transitions</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
contain: paint;
|
||||
}
|
||||
.tagone { view-transition-name: one }
|
||||
.tagtwo { view-transition-name: two }
|
||||
.tagthree { view-transition-name: three }
|
||||
</style>
|
||||
|
||||
<div id=first class=tagone></div>
|
||||
<div id=second></div>
|
||||
<div id=third class=tagthree></div>
|
||||
|
||||
<script>
|
||||
async_test(t => {
|
||||
let transition = document.startViewTransition(() => {
|
||||
first.classList.toggle("tagone");
|
||||
second.classList.toggle("tagtwo");
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(one)").isolation, "auto"));
|
||||
t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(one)").mixBlendMode, "normal"));
|
||||
t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(two)").isolation, "auto"));
|
||||
t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(two)").mixBlendMode, "normal"));
|
||||
t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(three)").isolation, "isolate"));
|
||||
t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(three)").mixBlendMode, "plus-lighter"));
|
||||
t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(three)").mixBlendMode, "plus-lighter"));
|
||||
t.done();
|
||||
});
|
||||
});
|
||||
});
|
||||
}, "Blend modes are set up on paired transitions");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: capture elements with different size capture</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: absolute;
|
||||
overflow-clip-margin: 50px;
|
||||
}
|
||||
#target {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
.inner_overflow {
|
||||
width: 50px;
|
||||
height: 150px;
|
||||
margin-left: -10px;
|
||||
margin-top: -20px;
|
||||
background: lightgreen;
|
||||
clip-path: inset(1px 1px 1px 1px);
|
||||
}
|
||||
|
||||
/* We're verifying what we capture, so just display the new contents for 5 minutes. */
|
||||
html::view-transition-group(*) { animation-duration: 300s; }
|
||||
html::view-transition-new(*) { animation: unset; opacity: 0; }
|
||||
html::view-transition-old(*) { animation: unset; opacity: 1; }
|
||||
/* hide the root so we show transition background to ensure we're in a transition */
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
</style>
|
||||
<div id=target class=box><div class=inner_overflow>X</div></div>
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: capture elements with different size capture</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="new-and-old-sizes-match-ref.html">
|
||||
<meta name="fuzzy" content="new-and-old-sizes-match-ref.html:0-1;0-300">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: absolute;
|
||||
overflow-clip-margin: 50px;
|
||||
}
|
||||
#target {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
.inner_overflow {
|
||||
width: 50px;
|
||||
height: 150px;
|
||||
margin-left: -10px;
|
||||
margin-top: -20px;
|
||||
background: lightgreen;
|
||||
clip-path: inset(1px 1px 1px 1px);
|
||||
}
|
||||
|
||||
/* We're verifying what we capture, so just display the new contents for 5 minutes. */
|
||||
html::view-transition-group(*) { animation-duration: 300s; }
|
||||
html::view-transition-new(*) { animation: unset; opacity: 1; }
|
||||
html::view-transition-old(*) { animation: unset; opacity: 0; }
|
||||
/* hide the root so we show transition background to ensure we're in a transition */
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
</style>
|
||||
<div id=target class=box><div class=inner_overflow>X</div></div>
|
||||
<script>
|
||||
async function runTest() {
|
||||
let t = document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: capture opacity elements (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
.box {
|
||||
color: red;
|
||||
background: lightgreen;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: absolute;
|
||||
font-size: 30pt;
|
||||
}
|
||||
#e1 {
|
||||
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
body { background: lightpink; }
|
||||
</style>
|
||||
<div id=e1 class=box></div>
|
||||
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: capture clip-path 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-clip-path-ref.html">
|
||||
<meta name="fuzzy" content="new-content-captures-clip-path-ref.html:0-1;0-500">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.box {
|
||||
color: red;
|
||||
background: lightblue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: absolute;
|
||||
font-size: 30pt;
|
||||
}
|
||||
#e1 {
|
||||
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
view-transition-name: e1;
|
||||
}
|
||||
|
||||
div.dst { background: lightgreen; }
|
||||
/* We're verifying what we capture, so just display the new contents for 5 minutes. */
|
||||
html::view-transition-group(*) { animation-duration: 300s; }
|
||||
html::view-transition-image-pair(*) { isolation: isolate; }
|
||||
html::view-transition-new(*) { animation: unset; opacity: 1; }
|
||||
html::view-transition-old(*) { animation: unset; opacity: 0; }
|
||||
/* hide the root so we show transition background to ensure we're in a transition */
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
</style>
|
||||
<div id=e1 class=box></div>
|
||||
<script>
|
||||
async function runTest() {
|
||||
let t = document.startViewTransition(() => {
|
||||
e1.classList.add("dst");
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: capture elements with different size capture (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
.box {
|
||||
color: red;
|
||||
background: lightgreen;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: absolute;
|
||||
font-size: 30pt;
|
||||
}
|
||||
#e1 {
|
||||
clip-path: circle(30%);
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
#e2 {
|
||||
clip-path: ellipse(70% 30%);
|
||||
top: 160px;
|
||||
left: 20px;
|
||||
}
|
||||
#e3 {
|
||||
filter: blur(5px);
|
||||
top: 300px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
body { background: lightpink; }
|
||||
</style>
|
||||
<div id=e1 class=box>one</div>
|
||||
<div id=e2 class=box>two</div>
|
||||
<div id=e3 class=box>three</div>
|
||||
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<meta name="timeout" content="long">
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: capture elements with different size capture</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-different-size-ref.html">
|
||||
<meta name=fuzzy content="new-content-captures-different-size-ref.html:0-40;0-30000">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.box {
|
||||
color: red;
|
||||
background: lightblue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: absolute;
|
||||
font-size: 30pt;
|
||||
}
|
||||
#e1 {
|
||||
clip-path: circle(30%);
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
view-transition-name: e1;
|
||||
}
|
||||
#e2 {
|
||||
clip-path: ellipse(70% 30%);
|
||||
top: 160px;
|
||||
left: 20px;
|
||||
view-transition-name: e2;
|
||||
}
|
||||
#e3 {
|
||||
filter: blur(5px);
|
||||
top: 300px;
|
||||
left: 20px;
|
||||
view-transition-name: e3;
|
||||
}
|
||||
|
||||
div.dst { background: lightgreen; }
|
||||
/* We're verifying what we capture, so just display the new contents for 5 minutes. */
|
||||
html::view-transition-group(*) { animation-duration: 300s; }
|
||||
html::view-transition-new(*) { animation: unset; opacity: 1; }
|
||||
html::view-transition-old(*) { animation: unset; opacity: 0; }
|
||||
/* hide the root so we show transition background to ensure we're in a transition */
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
</style>
|
||||
<div id=e1 class=box>one</div>
|
||||
<div id=e2 class=box>two</div>
|
||||
<div id=e3 class=box>three</div>
|
||||
<script>
|
||||
async function runTest() {
|
||||
let t = document.startViewTransition(() => {
|
||||
e1.classList.add("dst");
|
||||
e2.classList.add("dst");
|
||||
e3.classList.add("dst");
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: capture opacity elements (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
.box {
|
||||
color: red;
|
||||
background: lightgreen;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: absolute;
|
||||
font-size: 30pt;
|
||||
will-change: opacity;
|
||||
}
|
||||
#e1 { opacity: 0.75; top: 20px; left: 20px; }
|
||||
#e2 { opacity: 0.5; top: 160px; left: 20px; }
|
||||
#e3 { opacity: 0.25; top: 300px; left: 20px; }
|
||||
body { background: lightpink; }
|
||||
</style>
|
||||
<div id=e1 class=box></div>
|
||||
<div id=e2 class=box></div>
|
||||
<div id=e3 class=box></div>
|
||||
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: capture opacity 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-opacity-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.box {
|
||||
color: red;
|
||||
background: lightblue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: absolute;
|
||||
font-size: 30pt;
|
||||
will-change: opacity;
|
||||
}
|
||||
#e1 { opacity: 0.75; top: 20px; left: 20px; view-transition-name: e1; }
|
||||
#e2 { opacity: 0.5; top: 160px; left: 20px; view-transition-name: e2; }
|
||||
#e3 { opacity: 0.25; top: 300px; left: 20px; view-transition-name: e3; }
|
||||
div.dst { background: lightgreen; }
|
||||
/* We're verifying what we capture, so just display the new contents for 5 minutes. */
|
||||
html::view-transition-group(*) { animation-duration: 300s; }
|
||||
html::view-transition-new(*) { animation: unset; opacity: 1; }
|
||||
html::view-transition-old(*) { animation: unset; opacity: 0; }
|
||||
/* hide the root so we show transition background to ensure we're in a transition */
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
</style>
|
||||
<div id=e1 class=box></div>
|
||||
<div id=e2 class=box></div>
|
||||
<div id=e3 class=box></div>
|
||||
<script>
|
||||
async function runTest() {
|
||||
let t = document.startViewTransition(() => {
|
||||
e1.classList.add("dst");
|
||||
e2.classList.add("dst");
|
||||
e3.classList.add("dst");
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: capture opacity elements (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
.box {
|
||||
background: lightgreen;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: absolute;
|
||||
will-change: transform;
|
||||
}
|
||||
#e1 {
|
||||
top: 10px;
|
||||
left: 30px;
|
||||
}
|
||||
</style>
|
||||
<div id=e1 class=box></div>
|
||||
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: capture root 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-root-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.box {
|
||||
background: lightblue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: absolute;
|
||||
will-change: transform;
|
||||
}
|
||||
#e1 {
|
||||
top: 10px;
|
||||
left: 30px;
|
||||
}
|
||||
#shared {
|
||||
contain: paint;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
view-transition-name: shared;
|
||||
}
|
||||
|
||||
div.dst { background: lightgreen; }
|
||||
/* We're verifying what we capture, so just display the old contents for 5 minutes. */
|
||||
html::view-transition { background: pink; }
|
||||
html::view-transition-group(shared) { animation-duration: 300s; }
|
||||
html::view-transition-image-pair(shared) { visibility: hidden }
|
||||
html::view-transition-old(root) { animation-duration: 0s; opacity: 0 }
|
||||
html::view-transition-new(root) { animation-duration: 0s; opacity: 1 }
|
||||
</style>
|
||||
<body style="background: red">
|
||||
<div id=e1 class=box></div>
|
||||
<div id=shared></div>
|
||||
<script>
|
||||
async function runTest() {
|
||||
let t = document.startViewTransition(() => {
|
||||
e1.classList.add("dst");
|
||||
document.body.style = "";
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: container of shared element writing-modes (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
|
||||
<style>
|
||||
.tb { writing-mode: horizontal-tb; }
|
||||
.lr { writing-mode: vertical-lr; }
|
||||
.rl { writing-mode: vertical-rl; }
|
||||
.shared {
|
||||
margin: 2px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: green;
|
||||
contain: paint;
|
||||
border: 1px solid black;
|
||||
}
|
||||
html { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div class=tb><div id=one class=shared>T</div></div>
|
||||
<div class=lr><div id=two class=shared>T</div></div>
|
||||
<div class=rl><div id=three class=shared>T</div></div>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: container of shared element writing-modes</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-container-writing-modes-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
#hidden {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
contain: paint;
|
||||
view-transition-name: hidden;
|
||||
}
|
||||
.tb { writing-mode: horizontal-tb; }
|
||||
.lr { writing-mode: vertical-lr; }
|
||||
.rl { writing-mode: vertical-rl; }
|
||||
.shared {
|
||||
margin: 2px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: green;
|
||||
contain: paint;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.source {
|
||||
background: red;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
width: 100px;
|
||||
height: 500px;
|
||||
contain: paint;
|
||||
}
|
||||
html::view-transition-group(hidden) { animation-duration: 300s; }
|
||||
html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
|
||||
|
||||
html::view-transition-group(s1),
|
||||
html::view-transition-group(s2),
|
||||
html::view-transition-group(s3) { animation-duration: 0s; }
|
||||
|
||||
html::view-transition-new(s1),
|
||||
html::view-transition-new(s2),
|
||||
html::view-transition-new(s3) { animation: unset; opacity: 1; }
|
||||
|
||||
html::view-transition-old(s1),
|
||||
html::view-transition-old(s2),
|
||||
html::view-transition-old(s3) { animation: unset; opacity: 0; }
|
||||
|
||||
/* hide the root so we show transition background to ensure we're in a transition */
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
|
||||
</style>
|
||||
|
||||
<div id=hidden>Should not be visible</div>
|
||||
<div id=s1 class=source>Should not be visible</div>
|
||||
<div id=s2 class=source>Should not be visible</div>
|
||||
<div id=s3 class=source>Should not be visible</div>
|
||||
<div class=tb><div id=one class=shared>T</div></div>
|
||||
<div class=lr><div id=two class=shared>T</div></div>
|
||||
<div class=rl><div id=three class=shared>T</div></div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
s1.style = "view-transition-name: s1";
|
||||
s2.style = "view-transition-name: s2";
|
||||
s3.style = "view-transition-name: s3";
|
||||
document.startViewTransition(() => {
|
||||
s1.remove();
|
||||
s2.remove();
|
||||
s3.remove();
|
||||
hidden.style.left = "200px";
|
||||
one.style = "view-transition-name: s1";
|
||||
two.style = "view-transition-name: s2";
|
||||
three.style = "view-transition-name: s3";
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: shared element writing-modes (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
|
||||
<style>
|
||||
.tb { writing-mode: horizontal-tb; }
|
||||
.lr { writing-mode: vertical-lr; }
|
||||
.rl { writing-mode: vertical-rl; }
|
||||
.shared {
|
||||
margin: 2px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: green;
|
||||
contain: paint;
|
||||
border: 1px solid black;
|
||||
}
|
||||
html { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div id=one class="tb shared">T</div>
|
||||
<div id=two class="lr shared">T</div>
|
||||
<div id=three class="rl shared">T</div>
|
||||
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: shared element writing-modes</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-element-writing-modes-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
#hidden {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
contain: paint;
|
||||
view-transition-name: hidden;
|
||||
}
|
||||
.tb { writing-mode: horizontal-tb; }
|
||||
.lr { writing-mode: vertical-lr; }
|
||||
.rl { writing-mode: vertical-rl; }
|
||||
.shared {
|
||||
margin: 2px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: green;
|
||||
contain: paint;
|
||||
border: 1px solid black;
|
||||
}
|
||||
#target {
|
||||
background: red;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
width: 100px;
|
||||
height: 500px;
|
||||
contain: paint;
|
||||
}
|
||||
|
||||
html::view-transition-group(hidden) { animation-duration: 300s; }
|
||||
html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
|
||||
|
||||
html::view-transition-group(s1),
|
||||
html::view-transition-group(s2),
|
||||
html::view-transition-group(s3) { animation-duration: 0s; }
|
||||
|
||||
html::view-transition-new(s1),
|
||||
html::view-transition-new(s2),
|
||||
html::view-transition-new(s3) { animation: unset; opacity: 1; }
|
||||
|
||||
html::view-transition-old(s1),
|
||||
html::view-transition-old(s2),
|
||||
html::view-transition-old(s3) { animation: unset; opacity: 0; }
|
||||
|
||||
/* hide the root so we show transition background to ensure we're in a transition */
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
|
||||
</style>
|
||||
|
||||
<div id=hidden>Should not be visible</div>
|
||||
<div id=s1 class=source>Should not be visible</div>
|
||||
<div id=s2 class=source>Should not be visible</div>
|
||||
<div id=s3 class=source>Should not be visible</div>
|
||||
<div id=one class="tb shared">T</div>
|
||||
<div id=two class="lr shared">T</div>
|
||||
<div id=three class="rl shared">T</div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
s1.style = "view-transition-name: s1";
|
||||
s2.style = "view-transition-name: s2";
|
||||
s3.style = "view-transition-name: s3";
|
||||
document.startViewTransition(() => {
|
||||
s1.remove();
|
||||
s2.remove();
|
||||
s3.remove();
|
||||
hidden.style.left = "200px";
|
||||
one.style = "view-transition-name: s1";
|
||||
two.style = "view-transition-name: s2";
|
||||
three.style = "view-transition-name: s3";
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: incoming viewport has scrollbars (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7859">
|
||||
<link rel="author" href="mailto:bokan@chromium.org">
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: lightpink;
|
||||
}
|
||||
body {
|
||||
margin: 50px;
|
||||
}
|
||||
div {
|
||||
background-image:
|
||||
linear-gradient(45deg, #000 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, #000 75%),
|
||||
linear-gradient(45deg, transparent 75%, #000 75%),
|
||||
linear-gradient(45deg, #000 25%, lightgreen 25%);
|
||||
background-size: 200px 200px;
|
||||
background-position: 0 0, 0 0, -100px -100px, 100px 100px;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<meta name="timeout" content="long">
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: incoming viewport has scrollbars</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7859">
|
||||
<link rel="author" href="mailto:bokan@chromium.org">
|
||||
<link rel="match" href="new-content-has-scrollbars-ref.html">
|
||||
<meta name=fuzzy content="new-content-has-scrollbars-ref.html:0-40;0-30000">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: lightpink;
|
||||
}
|
||||
html {
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
/* Margin to make sure background color is correctly drawn into the snapshot. */
|
||||
margin: 50px;
|
||||
}
|
||||
div {
|
||||
/* Draw a checkerboard pattern to make sure the snapshot is captured at the
|
||||
* full size, rather than scaled. */
|
||||
background-image:
|
||||
linear-gradient(45deg, #000 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, #000 75%),
|
||||
linear-gradient(45deg, transparent 75%, #000 75%),
|
||||
linear-gradient(45deg, #000 25%, lightgreen 25%);
|
||||
background-size: 200px 200px;
|
||||
background-position: 0 0, 0 0, -100px -100px, 100px 100px;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
}
|
||||
|
||||
/* We're verifying what we capture, so just display the old contents for 5 minutes. */
|
||||
html::view-transition-new(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition-old(root) {
|
||||
animation-duration: 300s;
|
||||
animation-timing-function: steps(1, end);
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
<script>
|
||||
// Ensure a root snapshot captured in the absence of scrollbars is displayed at
|
||||
// full size when rendered in the incoming viewport which is inset by
|
||||
// scrollbars. The content must not be scaled-to-fit.
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
document.documentElement.style.overflow = "unset";
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: different width container should keep aspect ratio (by default)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="intrinsic-aspect-ratio-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.spacer {
|
||||
height: 10px;
|
||||
}
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
background: blue;
|
||||
}
|
||||
#target1 {
|
||||
view-transition-name: target1;
|
||||
}
|
||||
#target2 {
|
||||
view-transition-name: target2;
|
||||
}
|
||||
#hidden {
|
||||
view-transition-name: hidden;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
visibility: hidden;
|
||||
contain: paint;
|
||||
}
|
||||
|
||||
/* We're verifying what we capture, so just display the new contents for 5 minutes. */
|
||||
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(target1) {
|
||||
animation: unset;
|
||||
width: 50px;
|
||||
border: 2px solid black;
|
||||
}
|
||||
html::view-transition-group(target2) {
|
||||
animation: unset;
|
||||
width: 200px;
|
||||
border: 2px solid black;
|
||||
}
|
||||
|
||||
/* hide the root so we show transition background to ensure we're in a transition */
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div id=target1 class=box></div>
|
||||
<div class=spacer></div>
|
||||
<div id=target2 class=box></div>
|
||||
<div id=hidden></div>
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: new content captures an empty div (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 200px;
|
||||
background: green;
|
||||
}
|
||||
body { background: lightpink; }
|
||||
</style>
|
||||
<div></div>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: old content captures an empty div</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-is-empty-div-ref.html">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
div {
|
||||
contain: paint;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
}
|
||||
#source {
|
||||
left: 50px;
|
||||
background: green;
|
||||
}
|
||||
#target {
|
||||
left: 200px;
|
||||
}
|
||||
#hidden {
|
||||
background: red;
|
||||
}
|
||||
|
||||
html::view-transition-group(hidden) { animation-duration: 300s; }
|
||||
html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
|
||||
|
||||
/* The effect of the following should be position at the incoming element
|
||||
but contents of the new element.
|
||||
*/
|
||||
html::view-transition-group(shared) { animation-duration: 0s; }
|
||||
html::view-transition-new(shared) { animation: unset; opacity: 1; }
|
||||
html::view-transition-old(shared) { animation: unset; opacity: 1; }
|
||||
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
|
||||
</style>
|
||||
|
||||
<div id=source></div>
|
||||
<div id=target></div>
|
||||
<div id=hidden></div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
source.style = "view-transition-name: shared";
|
||||
document.startViewTransition(() => {
|
||||
source.style = "";
|
||||
target.style = "view-transition-name: shared";
|
||||
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: display content in a pseudo with object-fit: fill</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="content-object-fit-fill-ref.html">
|
||||
<meta name="fuzzy" content="content-object-fit-fill-ref.html:0-60;0-20">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
view-transition-name: target;
|
||||
background: lightblue;
|
||||
}
|
||||
#inner {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: green;
|
||||
top: 5px;
|
||||
left: 10px;
|
||||
}
|
||||
#hidden {
|
||||
background: pink;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
view-transition-name: hidden;
|
||||
}
|
||||
|
||||
html::view-transition-group(target) {
|
||||
animation: unset;
|
||||
transform: unset;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
html::view-transition-new(target) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
object-fit: fill;
|
||||
}
|
||||
html::view-transition-old(target) {
|
||||
animation: unset;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
html::view-transition-group(hidden) {
|
||||
animation-duration: 500s;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div id=target><div id=inner></div></div>
|
||||
<div id=hidden></div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: display content in a pseudo with object-fit: none</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="content-object-fit-none-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
view-transition-name: target;
|
||||
background: lightblue;
|
||||
}
|
||||
#hidden {
|
||||
background: pink;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
view-transition-name: hidden;
|
||||
}
|
||||
|
||||
html::view-transition-group(target) {
|
||||
animation: unset;
|
||||
transform: unset;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
html::view-transition-new(target) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
object-fit: none;
|
||||
object-position: 0% 0%;
|
||||
}
|
||||
html::view-transition-old(target) {
|
||||
animation: unset;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
html::view-transition-group(hidden) {
|
||||
animation-duration: 500s;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div id=target>This is text</div>
|
||||
<div id=hidden></div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: object-view-box with larger overflow (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
.target {
|
||||
color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
}
|
||||
.child {
|
||||
width: 123px;
|
||||
height: 150px;
|
||||
background: lightblue;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
left: -20px;
|
||||
}
|
||||
.grandchild {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
left: 40px;
|
||||
background: green;
|
||||
}
|
||||
#one { clip-path: inset(10px 12px 20px 28px); }
|
||||
#two { clip-path: inset(10px -12px 20px -28px); }
|
||||
body { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div id=one class=target>
|
||||
<div class=child>
|
||||
<div class=grandchild></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 20px;"></div>
|
||||
<div id=two class=target>
|
||||
<div class=child>
|
||||
<div class=grandchild></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: object-view-box with larger overflow (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
.target {
|
||||
color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
}
|
||||
.child {
|
||||
width: 123px;
|
||||
height: 150px;
|
||||
background: lightblue;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
left: -20px;
|
||||
}
|
||||
.grandchild {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
left: 40px;
|
||||
background: green;
|
||||
}
|
||||
#one { clip-path: url(#clip1); }
|
||||
#two { clip-path: url(#clip2); }
|
||||
body { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div id=one class=target>
|
||||
<div class=child>
|
||||
<div class=grandchild></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 20px;"></div>
|
||||
<div id=two class=target>
|
||||
<div class=child>
|
||||
<div class=grandchild></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg>
|
||||
<defs>
|
||||
<clipPath id="clip1">
|
||||
<rect x="10" y="20" width="70" height="50" />
|
||||
</clipPath>
|
||||
<clipPath id="clip2">
|
||||
<rect x="-10" y="20" width="130" height="50" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: object-view-box with larger clip-path</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-object-view-box-clip-path-reference-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.target {
|
||||
color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
overflow-clip-margin: 1000px;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
}
|
||||
.child {
|
||||
width: 123px;
|
||||
height: 150px;
|
||||
background: lightblue;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
left: -20px;
|
||||
}
|
||||
.grandchild {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
left: 40px;
|
||||
background: green;
|
||||
}
|
||||
#one {
|
||||
view-transition-name: target-one;
|
||||
clip-path: url(#clip1);
|
||||
}
|
||||
#two {
|
||||
view-transition-name: target-two;
|
||||
clip-path: url(#clip2);
|
||||
}
|
||||
|
||||
html::view-transition-group(target-one),
|
||||
html::view-transition-group(target-two) { animation-duration: 300s; }
|
||||
html::view-transition-old(target-one),
|
||||
html::view-transition-old(target-two) { animation: unset; opacity: 0; height: 100%; }
|
||||
html::view-transition-new(target-one),
|
||||
html::view-transition-new(target-two) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
/* clip overflow, and verify inner contents only */
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div id=one class=target>
|
||||
<div class=child>
|
||||
<div class=grandchild></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 20px;"></div>
|
||||
<div id=two class=target>
|
||||
<div class=child>
|
||||
<div class=grandchild></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg>
|
||||
<defs>
|
||||
<clipPath id="clip1">
|
||||
<rect x="10" y="20" width="70" height="50" />
|
||||
</clipPath>
|
||||
<clipPath id="clip2">
|
||||
<rect x="-10" y="20" width="130" height="50" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: object-view-box with larger clip-path</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-object-view-box-clip-path-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.target {
|
||||
color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
overflow-clip-margin: 1000px;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
}
|
||||
.child {
|
||||
width: 123px;
|
||||
height: 150px;
|
||||
background: lightblue;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
left: -20px;
|
||||
}
|
||||
.grandchild {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
left: 40px;
|
||||
background: green;
|
||||
}
|
||||
#one {
|
||||
view-transition-name: target-one;
|
||||
clip-path: inset(10px 12px 20px 28px);
|
||||
}
|
||||
#two {
|
||||
view-transition-name: target-two;
|
||||
clip-path: inset(10px -12px 20px -28px);
|
||||
}
|
||||
|
||||
html::view-transition-group(target-one),
|
||||
html::view-transition-group(target-two) { animation-duration: 300s; }
|
||||
html::view-transition-old(target-one),
|
||||
html::view-transition-old(target-two) { animation: unset; opacity: 0; height: 100%; }
|
||||
html::view-transition-new(target-one),
|
||||
html::view-transition-new(target-two) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
/* clip overflow, and verify inner contents only */
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div id=one class=target>
|
||||
<div class=child>
|
||||
<div class=grandchild></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 20px;"></div>
|
||||
<div id=two class=target>
|
||||
<div class=child>
|
||||
<div class=grandchild></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: object-view-box with larger overflow (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
.target {
|
||||
color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
}
|
||||
.child {
|
||||
width: 123px;
|
||||
height: 150px;
|
||||
background: lightblue;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
left: -20px;
|
||||
}
|
||||
.grandchild {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
left: 40px;
|
||||
background: green;
|
||||
}
|
||||
body { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div class=target>
|
||||
<div class=child>
|
||||
<div class=grandchild></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: object-view-box with larger 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-object-view-box-overflow-clipped-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.target {
|
||||
color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
overflow-clip-margin: 10px;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
.child {
|
||||
width: 123px;
|
||||
height: 150px;
|
||||
background: lightblue;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
left: -20px;
|
||||
}
|
||||
.grandchild {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
left: 40px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
html::view-transition-group(target) { animation-duration: 300s; }
|
||||
html::view-transition-new(target) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
|
||||
/* clip overflow, and verify inner contents only */
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
html::view-transition-old(target) { animation: unset; opacity: 0; height: 100%; }
|
||||
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div class=target>
|
||||
<div class=child>
|
||||
<div class=grandchild></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: object-view-box with larger overflow (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
.target {
|
||||
color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
}
|
||||
.child {
|
||||
width: 123px;
|
||||
height: 150px;
|
||||
background: lightblue;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
left: -20px;
|
||||
}
|
||||
.grandchild {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
left: 40px;
|
||||
background: green;
|
||||
}
|
||||
body { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div class=target>
|
||||
<div class=child>
|
||||
<div class=grandchild></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: object-view-box with larger 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-object-view-box-overflow-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.target {
|
||||
color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
overflow-clip-margin: 1000px;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
.child {
|
||||
width: 123px;
|
||||
height: 150px;
|
||||
background: lightblue;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
left: -20px;
|
||||
}
|
||||
.grandchild {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
left: 40px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
html::view-transition-group(target) { animation-duration: 300s; }
|
||||
html::view-transition-new(target) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
|
||||
/* clip overflow, and verify inner contents only */
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
html::view-transition-old(target) { animation: unset; opacity: 0; height: 100%; }
|
||||
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div class=target>
|
||||
<div class=child>
|
||||
<div class=grandchild></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: display content in a pseudo with proper scaling (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
.inner {
|
||||
position: absolute;
|
||||
inset: 4px;
|
||||
background: green;
|
||||
}
|
||||
.dst {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid blue;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div class=dst><div class=inner></div></div>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: display content in a pseudo with proper scaling</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-scaling-ref.html">
|
||||
<meta name="fuzzy" content="new-content-scaling-ref.html:maxDifference=0-16;totalPixels=0-400">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.shared {
|
||||
view-transition-name: shared;
|
||||
contain: paint;
|
||||
}
|
||||
.src {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.inner {
|
||||
position: absolute;
|
||||
inset: 20px;
|
||||
background: green;
|
||||
}
|
||||
.dst {
|
||||
position: relative;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border: 5px solid blue;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html::view-transition-group(shared) {
|
||||
animation-delay: 500s;
|
||||
}
|
||||
|
||||
html::view-transition-new(shared) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
}
|
||||
html::view-transition-old(shared) {
|
||||
animation: unset;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div id=target class="shared src"><div class=inner></div></div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
let t = document.startViewTransition(() => {
|
||||
target.classList.remove("src");
|
||||
target.classList.add("dst");
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: shared element with overflow</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="content-with-overflow-zoomed-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.target {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
contain: paint;
|
||||
background: blue;
|
||||
overflow-clip-margin: 50px;
|
||||
view-transition-name: target;
|
||||
zoom: 1.5;
|
||||
}
|
||||
.child {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
background: green;
|
||||
zoom: 1.2;
|
||||
}
|
||||
|
||||
html::view-transition-group(target) { animation-duration: 300s; }
|
||||
html::view-transition-old(target) { animation: unset; opacity: 0; }
|
||||
html::view-transition-new(target) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
border: 3px solid black;
|
||||
}
|
||||
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div class=ancestor>
|
||||
<div class=target>
|
||||
<div class=child>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: shared element with overflow</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="content-with-overflow-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
background: blue;
|
||||
overflow-clip-margin: 50px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
.child {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
html::view-transition-group(target) { animation-duration: 300s; }
|
||||
html::view-transition-old(target) { animation: unset; opacity: 0; }
|
||||
html::view-transition-new(target) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
</style>
|
||||
|
||||
<div class=target>
|
||||
<div class=child>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: one element captured for two tags (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
background: black;
|
||||
left: 200px;
|
||||
filter: invert(1);
|
||||
}
|
||||
body { background: lightpink; }
|
||||
</style>
|
||||
<div></div>
|
||||
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: new element tag specified for start phase</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="new-element-on-start-ref.html">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
.before {
|
||||
background: lightblue;
|
||||
left: 50px;
|
||||
}
|
||||
.after {
|
||||
background: black;
|
||||
left: 200px;
|
||||
}
|
||||
.hidden {
|
||||
background: red;
|
||||
left: 350px;
|
||||
}
|
||||
|
||||
html::view-transition-group(hidden) { animation-duration: 300s; }
|
||||
html::view-transition-image-pair(hidden) { opacity: 0; }
|
||||
|
||||
html::view-transition-group(before) { animation-duration: 0s; }
|
||||
html::view-transition-image-pair(before) { filter: invert(1); }
|
||||
html::view-transition-new(before) { animation-duration: 0s; }
|
||||
html::view-transition-old(*) { animation-duration: 0s; }
|
||||
|
||||
html::view-transition-group(after) { animation-duration: 0s; }
|
||||
html::view-transition-image-pair(after) { filter: invert(1); }
|
||||
html::view-transition-new(after) { animation-duration: 0s; }
|
||||
html::view-transition-old(after) { animation-duration: 0s; }
|
||||
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
|
||||
</style>
|
||||
|
||||
<div id=before class=before></div>
|
||||
<div id=after class=after></div>
|
||||
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
hidden.style.viewTransitionName = "hidden";
|
||||
before.style.viewTransitionName = "before";
|
||||
document.startViewTransition(() => {
|
||||
before.remove();
|
||||
hidden.style.viewTransitionName = "";
|
||||
after.style.viewTransitionName = "after";
|
||||
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: container of shared element writing-modes (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
|
||||
<style>
|
||||
html { writing-mode: vertical-lr; }
|
||||
.shared {
|
||||
margin: 2px;
|
||||
width: 90px;
|
||||
height: 50px;
|
||||
background: green;
|
||||
contain: paint;
|
||||
}
|
||||
#two {
|
||||
background: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id=one class=shared>T</div>
|
||||
<div id=two class=shared></div>
|
||||
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: container of shared element writing-modes</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="new-root-vertical-writing-mode-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
html { writing-mode: vertical-lr; }
|
||||
#hidden {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
contain: paint;
|
||||
view-transition-name: hidden;
|
||||
}
|
||||
.shared {
|
||||
margin: 2px;
|
||||
width: 90px;
|
||||
height: 50px;
|
||||
background: green;
|
||||
contain: paint;
|
||||
}
|
||||
#target {
|
||||
background: red;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
width: 100px;
|
||||
height: 500px;
|
||||
contain: paint;
|
||||
view-transition-name: s1;
|
||||
}
|
||||
#two {
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
html::view-transition-group(hidden) { animation-duration: 300s; }
|
||||
html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
|
||||
|
||||
html::view-transition-group(s1) { animation-duration: 0s; }
|
||||
html::view-transition-new(s1) { animation: unset; opacity: 1; }
|
||||
html::view-transition-old(s1) { animation: unset; opacity: 0; }
|
||||
|
||||
html::view-transition-new(root) { animation: unset; opacity: 1; }
|
||||
html::view-transition-old(root) { animation: unset; opacity: 0; }
|
||||
|
||||
</style>
|
||||
|
||||
<div id=hidden>Should not be visible</div>
|
||||
<div id=target>Should not be visible</div>
|
||||
<div id=one class=shared>T</div>
|
||||
<div id=two class=shared></div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
target.remove();
|
||||
hidden.style.left = "200px";
|
||||
one.style.viewTransitionName = "s1";
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: author styles ignored during prepare</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
contain: paint;
|
||||
view-transition-name: shared;
|
||||
}
|
||||
|
||||
html::view-transition,
|
||||
html::view-transition-group(shared),
|
||||
html::view-transition-image-pair(shared),
|
||||
html::view-transition-old(shared),
|
||||
html::view-transition-new(shared) {
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
|
||||
<script>
|
||||
function validate_background(pseudoString) {
|
||||
return window.getComputedStyle(document.documentElement, pseudoString).style.background != 'blue';
|
||||
}
|
||||
|
||||
promise_test(async t => {
|
||||
return new Promise((resolve, reject) => {
|
||||
document.startViewTransition(() => {
|
||||
resolve();
|
||||
throw 'error';
|
||||
});
|
||||
});
|
||||
}, "An exception thrown during a transition shouldn't crash.");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<meta name="timeout" content="long">
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: CSS Animations are paused while render-blocked</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
contain: paint;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.animated {
|
||||
animation: fade 0.5s;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id=target></div>
|
||||
|
||||
<script>
|
||||
let renderBlocked = true;
|
||||
|
||||
promise_test(() => {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
requestAnimationFrame(() => {
|
||||
document.startViewTransition(() => {
|
||||
return new Promise(async (inner_resolve) => {
|
||||
step_timeout(() => {
|
||||
renderBlocked = false;
|
||||
inner_resolve();
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
|
||||
target.classList.toggle("animated");
|
||||
target.onanimationend = () => {
|
||||
if (renderBlocked)
|
||||
reject();
|
||||
else
|
||||
resolve();
|
||||
};
|
||||
});
|
||||
});
|
||||
}, "CSS animation is blocked until prepare callback");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<meta name="timeout" content="long">
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: rAF is not issued while render-blocked</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
contain: paint;
|
||||
view-transition-name: target;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id=target></div>
|
||||
|
||||
<script>
|
||||
let renderBlocked = true;
|
||||
|
||||
promise_test(() => {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
requestAnimationFrame(() => {
|
||||
document.startViewTransition(() => {
|
||||
return new Promise(async (inner_resolve) => {
|
||||
step_timeout(() => {
|
||||
renderBlocked = false;
|
||||
inner_resolve();
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
if (renderBlocked)
|
||||
reject();
|
||||
else
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
});
|
||||
}, "rAF is blocked until prepare callback");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: shared element with overflow (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;
|
||||
contain: paint;
|
||||
background: blue;
|
||||
overflow-clip-margin: 50px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
.child {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
This text should appear unmodified, since the root isn't captured.
|
||||
<div class=target>
|
||||
<div class=child>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: shared element with overflow</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="no-root-capture-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
:root { view-transition-name: none; }
|
||||
.target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
background: blue;
|
||||
overflow-clip-margin: 50px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
.child {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
html::view-transition-group(target) { animation-duration: 300s; }
|
||||
html::view-transition-new(target) { animation: unset; opacity: 0; }
|
||||
html::view-transition-old(target) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* None of these should apply, so make everything red if it does */
|
||||
html::view-transition-group(root) { animation: unset; opacity: 1; background: red; }
|
||||
html::view-transition-image-pair(root) { visibility: hidden }
|
||||
</style>
|
||||
|
||||
This text should appear unmodified, since the root isn't captured.
|
||||
<div class=target>
|
||||
<div class=child>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: shared element with overflow (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;
|
||||
contain: paint;
|
||||
background: blue;
|
||||
overflow-clip-margin: 50px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
.child {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
This text should appear unmodified, since the root isn't captured.
|
||||
<div class=target>
|
||||
<div class=child>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: shared element with overflow</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="nothing-captured-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
:root { view-transition-name: none; }
|
||||
.target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
background: blue;
|
||||
overflow-clip-margin: 50px;
|
||||
}
|
||||
.child {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
/* None of these should apply, so make everything red if it does */
|
||||
html::view-transition-group(*) { animation-duration: 300s; }
|
||||
html::view-transition-image-pair(*) { visibility: hidden }
|
||||
html::view-transition { background: red; }
|
||||
</style>
|
||||
|
||||
This text should appear unmodified, since the root isn't captured.
|
||||
<div class=target>
|
||||
<div class=child>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: object-view-box</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="object-view-box-ref.html">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.target {
|
||||
contain: paint;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
transform: scale(2.0, 3.0);
|
||||
position: relative;
|
||||
top: 200px;
|
||||
left: 200px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.embedded {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: grey;
|
||||
view-transition-name: hidden;
|
||||
}
|
||||
|
||||
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;
|
||||
height: 100%;
|
||||
}
|
||||
html::view-transition-new(target) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
object-view-box: inset(50px 0px 0px 0px);
|
||||
object-fit: none;
|
||||
object-position: 0% 0%;
|
||||
height: 100%;
|
||||
contain: paint;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="target" class="target">
|
||||
<div class="embedded" style="background: green;"></div>
|
||||
<div class="embedded" style="background: blue">SharedElement</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(runTest);
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<meta name="timeout" content="long">
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: object-view-box</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="object-view-box-ref.html">
|
||||
<meta name="fuzzy" content="object-view-box-ref.html:0-1;0-300">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.target {
|
||||
contain: paint;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
transform: scale(2.0, 3.0);
|
||||
position: relative;
|
||||
top: 200px;
|
||||
left: 200px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.embedded {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: grey;
|
||||
view-transition-name: hidden;
|
||||
}
|
||||
|
||||
html::view-transition-group(hidden) { animation-duration: 300s; }
|
||||
html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
|
||||
|
||||
html::view-transition-new(target) {
|
||||
animation: unset;
|
||||
opacity: 0;
|
||||
height: 100%;
|
||||
}
|
||||
html::view-transition-old(target) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
object-view-box: inset(50px 0px 0px 0px);
|
||||
object-fit: none;
|
||||
object-position: 0% 0%;
|
||||
height: 100%;
|
||||
contain: paint;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="target" class="target">
|
||||
<div class="embedded" style="background: green;"></div>
|
||||
<div class="embedded" style="background: blue">SharedElement</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(runTest);
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: object-view-box (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
.target {
|
||||
contain: paint;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
transform: scale(2.0, 3.0);
|
||||
position: relative;
|
||||
top: 200px;
|
||||
left: 200px;
|
||||
}
|
||||
.content {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="target">
|
||||
<div class="content">SharedElement</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: capture clip-path elements (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
.box {
|
||||
color: red;
|
||||
background: lightblue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: absolute;
|
||||
font-size: 30pt;
|
||||
}
|
||||
#e1 {
|
||||
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
body { background: lightpink; }
|
||||
</style>
|
||||
<div id=e1 class=box></div>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: capture clip-path elements</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="old-content-captures-clip-path-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.box {
|
||||
color: red;
|
||||
background: lightblue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: absolute;
|
||||
font-size: 30pt;
|
||||
}
|
||||
#e1 {
|
||||
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
view-transition-name: e1;
|
||||
}
|
||||
|
||||
div.dst { background: lightgreen; }
|
||||
/* We're verifying what we capture, so just display the old contents for 5 minutes. */
|
||||
html::view-transition-group(*) { animation-duration: 300s; }
|
||||
html::view-transition-new(*) { animation: unset; opacity: 0; }
|
||||
html::view-transition-old(*) { animation: unset; opacity: 1; }
|
||||
/* hide the root so we show transition background to ensure we're in a transition */
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
</style>
|
||||
<div id=e1 class=box></div>
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
e1.classList.add("dst");
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: capture elements with different size capture (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
.box {
|
||||
color: red;
|
||||
background: lightblue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: absolute;
|
||||
font-size: 30pt;
|
||||
}
|
||||
#e1 {
|
||||
clip-path: circle(30%);
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
#e2 {
|
||||
clip-path: ellipse(70% 30%);
|
||||
top: 160px;
|
||||
left: 20px;
|
||||
}
|
||||
#e3 {
|
||||
filter: blur(5px);
|
||||
top: 300px;
|
||||
left: 20px;
|
||||
}
|
||||
body { background: lightpink; }
|
||||
</style>
|
||||
<div id=e1 class=box>one</div>
|
||||
<div id=e2 class=box>two</div>
|
||||
<div id=e3 class=box>three</div>
|
||||
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<meta name="timeout" content="long">
|
||||
<html class=reftest-wait>
|
||||
<title>Shared transitions: capture elements with different size capture</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="old-content-captures-different-size-ref.html">
|
||||
<meta name=fuzzy content="old-content-captures-different-size-ref.html:0-40;0-30000">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.box {
|
||||
color: red;
|
||||
background: lightblue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: absolute;
|
||||
font-size: 30pt;
|
||||
}
|
||||
#e1 {
|
||||
clip-path: circle(30%);
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
view-transition-name: e1;
|
||||
}
|
||||
#e2 {
|
||||
clip-path: ellipse(70% 30%);
|
||||
top: 160px;
|
||||
left: 20px;
|
||||
view-transition-name: e2;
|
||||
}
|
||||
#e3 {
|
||||
filter: blur(5px);
|
||||
top: 300px;
|
||||
left: 20px;
|
||||
view-transition-name: e3;
|
||||
}
|
||||
|
||||
div.dst { background: lightgreen; }
|
||||
/* We're verifying what we capture, so just display the old contents for 5 minutes. */
|
||||
html::view-transition-group(*) { animation-duration: 300s; }
|
||||
html::view-transition-new(*) { animation: unset; opacity: 0; }
|
||||
html::view-transition-old(*) { animation: unset; opacity: 1; }
|
||||
/* hide the root so we show transition background to ensure we're in a transition */
|
||||
html::view-transition-group(root) { animation: unset; opacity: 0; }
|
||||
html::view-transition { background: lightpink; }
|
||||
</style>
|
||||
<div id=e1 class=box>one</div>
|
||||
<div id=e2 class=box>two</div>
|
||||
<div id=e3 class=box>three</div>
|
||||
<script>
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
e1.classList.add("dst");
|
||||
e2.classList.add("dst");
|
||||
e3.classList.add("dst");
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Shared transitions: capture opacity elements (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
.box {
|
||||
color: red;
|
||||
background: lightblue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
position: absolute;
|
||||
font-size: 30pt;
|
||||
will-change: opacity;
|
||||
}
|
||||
#e1 { opacity: 0.75; top: 20px; left: 20px; }
|
||||
#e2 { opacity: 0.5; top: 160px; left: 20px; }
|
||||
#e3 { opacity: 0.25; top: 300px; left: 20px; }
|
||||
body { background: lightpink; }
|
||||
</style>
|
||||
<div id=e1 class=box>one</div>
|
||||
<div id=e2 class=box>two</div>
|
||||
<div id=e3 class=box>three</div>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue