зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1821814 [wpt PR 38946] - view-transitions: Clip snapshots to max texture size/viewport., a=testonly
Automatic update from web-platform-tests view-transitions: Clip snapshots to max texture size/viewport. (#38946) If an element's painting exceeds viewport bounds, clip it down to max texture size or twice the viewport bounds by painting the subset which is closest to the snapshot root. This involves the following 2 changes: 1) A new ClipNode is introduced to paint the desired subrect when rendering this element in paint, raster and compositing. All these stages should render only this subset. 2) The object-view-box on the replaced element is still set to the ink overflow rect. So at paint time, we adjust the replaced content rect to the actual subset that will be painted based on the clipping above. R=pdr@chromium.org, vmpstr@chromium.org, bokan@chromium.org Bug: 1409713 Change-Id: If81bc67ad6ffe49d68e4470a6717b704edafcd3f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4330193 Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org> Commit-Queue: Khushal Sagar <khushalsagar@chromium.org> Reviewed-by: Philip Rogers <pdr@chromium.org> Auto-Submit: Khushal Sagar <khushalsagar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1121126} Co-authored-by: Khushal Sagar <khushalsagar@chromium.org> -- wpt-commits: 87e344fb91b3f675b5748bfb64e14bdfd4df8169 wpt-pr: 38946
This commit is contained in:
Blink WPT Bot
moz-wptsync-bot
Родитель
502d29b794
Коммит
c89fb4faa2
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: massive element below and on top of viewport partially onscreen (new content)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html">
|
||||
<meta name="fuzzy" content="massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.target {
|
||||
position: fixed;
|
||||
inset-block-start: -90px;
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
inline-size: 10px;
|
||||
block-size: 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(*), html::view-transition-new(*) {
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
html::view-transition-old(target) { animation: unset; opacity: 0; }
|
||||
html::view-transition-new(target) { animation: unset; opacity: 1; }
|
||||
|
||||
</style>
|
||||
|
||||
<div class="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: massive element below and on top of viewport partially onscreen (new content)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html">
|
||||
<meta name="fuzzy" content="massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.target {
|
||||
position: fixed;
|
||||
inset-block-start: -90px;
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
inline-size: 10px;
|
||||
block-size: 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(*), html::view-transition-new(*) {
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
html::view-transition-old(target) { animation: unset; opacity: 1; }
|
||||
html::view-transition-new(target) { animation: unset; opacity: 0; }
|
||||
|
||||
</style>
|
||||
|
||||
<div class="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<title>View transitions: massive element below viewport partially onscreen (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
.target {
|
||||
position: fixed;
|
||||
inset-block-start: -90px;
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: massive element below viewport and completely offscreen (new content)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="massive-element-below-viewport-offscreen-ref.html">
|
||||
<meta name="fuzzy" content="massive-element-below-viewport-offscreen-ref.html:maxDifference=0-3;totalPixels=0-950">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.target_after_bottom_edge {
|
||||
position: fixed;
|
||||
inset-block-start: 20000px;
|
||||
inset-inline-start: 0px;
|
||||
}
|
||||
|
||||
.target {
|
||||
contain: paint;
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
position: fixed;
|
||||
inset-block-start: 10000px;
|
||||
inline-size: 10px;
|
||||
block-size: 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(*), html::view-transition-new(*) {
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
/* We should capture at least viewport height worth of content from the element's top edge */
|
||||
html::view-transition-group(target) {
|
||||
animation: unset;
|
||||
transform: unset;
|
||||
|
||||
position: fixed;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
html::view-transition-old(target) { animation: unset; opacity: 0; }
|
||||
html::view-transition-new(target) { animation: unset; opacity: 1; }
|
||||
|
||||
</style>
|
||||
|
||||
<div class="target target_after_bottom_edge" id="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: massive element below viewport and completely offscreen (old content)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="massive-element-below-viewport-offscreen-ref.html">
|
||||
<meta name="fuzzy" content="massive-element-below-viewport-offscreen-ref.html:maxDifference=0-2;totalPixels=0-445">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.target_after_bottom_edge {
|
||||
position: fixed;
|
||||
inset-block-start: 20000px;
|
||||
inset-inline-start: 0px;
|
||||
}
|
||||
|
||||
.target {
|
||||
contain: paint;
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
position: fixed;
|
||||
inset-block-start: 10000px;
|
||||
inline-size: 10px;
|
||||
block-size: 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(*), html::view-transition-new(*) {
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
/* We should capture at least viewport height worth of content from the element's top edge */
|
||||
html::view-transition-group(target) {
|
||||
animation: unset;
|
||||
transform: unset;
|
||||
|
||||
position: fixed;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
html::view-transition-new(target) { animation: unset; opacity: 0; }
|
||||
html::view-transition-old(target) { animation: unset; opacity: 1; }
|
||||
|
||||
</style>
|
||||
|
||||
<div class="target target_after_bottom_edge" id="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>View transitions: massive element below viewport and completely offscreen (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
|
||||
<style>
|
||||
.target_after_bottom_edge {
|
||||
position: fixed;
|
||||
inset-block-start: 0px;
|
||||
inset-inline-start: 0px;
|
||||
}
|
||||
|
||||
.target {
|
||||
contain: paint;
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="target target_after_bottom_edge" id="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1,41 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: element with clip max texture size</title>
|
||||
<title>View transitions: massive element below viewport partially onscreen (new content)</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">
|
||||
<link rel="match" href="massive-element-below-viewport-partially-onscreen-ref.html">
|
||||
<meta name="fuzzy" content="massive-element-below-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.target {
|
||||
contain: paint;
|
||||
width: 100px;
|
||||
height: 40000px;
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
width: 100%;
|
||||
height: 39800px;
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
inline-size: 10px;
|
||||
block-size: 10px;
|
||||
background: grey;
|
||||
view-transition-name: hidden;
|
||||
}
|
||||
|
|
@ -63,8 +63,6 @@ html::view-transition-new(target) { animation: unset; opacity: 1; }
|
|||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
scrollblue.scrollIntoView();
|
||||
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: massive element below viewport partially onscreen (new content)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="massive-element-below-viewport-partially-onscreen-ref.html">
|
||||
<meta name="fuzzy" content="massive-element-below-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-445">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.target {
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
inline-size: 10px;
|
||||
block-size: 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(*), html::view-transition-new(*) {
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
html::view-transition-old(target) { animation: unset; opacity: 1; }
|
||||
html::view-transition-new(target) { animation: unset; opacity: 0; }
|
||||
|
||||
</style>
|
||||
|
||||
<div class="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<title>View transitions: massive element below viewport partially onscreen (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
.target {
|
||||
contain: paint;
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
inline-size: 10px;
|
||||
block-size: 10px;
|
||||
background: grey;
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: massive element on top of viewport and completely offscreen (new content)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="massive-element-left-of-viewport-offscreen-ref.html">
|
||||
<meta name="fuzzy" content="massive-element-left-of-viewport-offscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.target_before_block_start_edge {
|
||||
position: fixed;
|
||||
inset-block-start: -40100px;
|
||||
inset-inline-start: 0px;
|
||||
}
|
||||
|
||||
.target {
|
||||
contain: paint;
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
inline-size: 10px;
|
||||
block-size: 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(*), html::view-transition-new(*) {
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
/* We should capture at least viewport height worth of content from the element's bottom edge */
|
||||
html::view-transition-group(target) {
|
||||
animation: unset;
|
||||
transform: unset;
|
||||
|
||||
position: fixed;
|
||||
top: unset;
|
||||
left: unset;
|
||||
inset-block-end: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
html::view-transition-old(target) { animation: unset; opacity: 0; }
|
||||
html::view-transition-new(target) { animation: unset; opacity: 1; }
|
||||
|
||||
</style>
|
||||
|
||||
<div class="target target_before_block_start_edge" id="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: massive element on top of viewport and completely offscreen (old content)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="massive-element-left-of-viewport-offscreen-ref.html">
|
||||
<meta name="fuzzy" content="massive-element-left-of-viewport-offscreen-ref.html:maxDifference=0-3;totalPixels=0-330">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.target_before_block_start_edge {
|
||||
position: fixed;
|
||||
inset-block-start: -40100px;
|
||||
inset-inline-start: 0px;
|
||||
}
|
||||
|
||||
.target {
|
||||
contain: paint;
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
inline-size: 10px;
|
||||
block-size: 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(*), html::view-transition-new(*) {
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
/* We should capture at least viewport height worth of content from the element's bottom edge */
|
||||
html::view-transition-group(target) {
|
||||
animation: unset;
|
||||
transform: unset;
|
||||
|
||||
position: fixed;
|
||||
top: unset;
|
||||
left: unset;
|
||||
inset-block-end: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
html::view-transition-old(target) { animation: unset; opacity: 1; }
|
||||
html::view-transition-new(target) { animation: unset; opacity: 0; }
|
||||
|
||||
</style>
|
||||
|
||||
<div class="target target_before_block_start_edge" id="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<title>View transitions: massive element on top of viewport and completely offscreen (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
:root {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.target_at_bottom_edge {
|
||||
position: fixed;
|
||||
inset-block-end: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
|
||||
.target {
|
||||
contain: paint;
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="target target_at_bottom_edge">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: massive element on top of viewport partially onscreen (new content)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="massive-element-left-of-viewport-partially-onscreen-ref.html">
|
||||
<meta name="fuzzy" content="massive-element-left-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.target {
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
inline-size: 10px;
|
||||
block-size: 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(*), html::view-transition-new(*) {
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
html::view-transition-old(target) { animation: unset; opacity: 0; }
|
||||
html::view-transition-new(target) { animation: unset; opacity: 1; }
|
||||
|
||||
</style>
|
||||
|
||||
<div class="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
scrollblue.scrollIntoView();
|
||||
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: massive element on top of viewport partially onscreen (old content)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="massive-element-left-of-viewport-partially-onscreen-ref.html">
|
||||
<meta name="fuzzy" content="massive-element-left-of-viewport-partially-onscreen-ref.html:maxDifference=0-3;totalPixels=0-330">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.target {
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
inline-size: 10px;
|
||||
block-size: 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(*), html::view-transition-new(*) {
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
html::view-transition-old(target) { animation: unset; opacity: 1; }
|
||||
html::view-transition-new(target) { animation: unset; opacity: 0; }
|
||||
|
||||
</style>
|
||||
|
||||
<div class="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
scrollblue.scrollIntoView();
|
||||
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<title>View transitions: massive element on top of viewport partially onscreen (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
:root {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.target {
|
||||
contain: paint;
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
inline-size: 10px;
|
||||
block-size: 10px;
|
||||
background: grey;
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
</body>
|
||||
<script>
|
||||
scrollblue.scrollIntoView();
|
||||
</script>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: massive element on top of viewport and completely offscreen (new content)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="massive-element-on-top-of-viewport-offscreen-ref.html">
|
||||
<meta name="fuzzy" content="massive-element-on-top-of-viewport-offscreen-ref.html:maxDifference=0-6;totalPixels=0-920">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.target_before_block_start_edge {
|
||||
position: fixed;
|
||||
inset-block-start: -40100px;
|
||||
inset-inline-start: 0px;
|
||||
}
|
||||
|
||||
.target {
|
||||
contain: paint;
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
inline-size: 10px;
|
||||
block-size: 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(*), html::view-transition-new(*) {
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
/* We should capture at least viewport height worth of content from the element's bottom edge */
|
||||
html::view-transition-group(target) {
|
||||
animation: unset;
|
||||
transform: unset;
|
||||
|
||||
position: fixed;
|
||||
top: unset;
|
||||
right: unset;
|
||||
inset-block-end: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
html::view-transition-old(target) { animation: unset; opacity: 0; }
|
||||
html::view-transition-new(target) { animation: unset; opacity: 1; }
|
||||
|
||||
</style>
|
||||
|
||||
<div class="target target_before_block_start_edge" id="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: massive element on top of viewport and completely offscreen (old content)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="massive-element-on-top-of-viewport-offscreen-ref.html">
|
||||
<meta name="fuzzy" content="massive-element-on-top-of-viewport-offscreen-ref.html:maxDifference=0-3;totalPixels=0-330">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.target_before_block_start_edge {
|
||||
position: fixed;
|
||||
inset-block-start: -40100px;
|
||||
inset-inline-start: 0px;
|
||||
}
|
||||
|
||||
.target {
|
||||
contain: paint;
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
inline-size: 10px;
|
||||
block-size: 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(*), html::view-transition-new(*) {
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
/* We should capture at least viewport height worth of content from the element's bottom edge */
|
||||
html::view-transition-group(target) {
|
||||
animation: unset;
|
||||
transform: unset;
|
||||
|
||||
position: fixed;
|
||||
top: unset;
|
||||
right: unset;
|
||||
inset-block-end: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
html::view-transition-old(target) { animation: unset; opacity: 1; }
|
||||
html::view-transition-new(target) { animation: unset; opacity: 0; }
|
||||
|
||||
</style>
|
||||
|
||||
<div class="target target_before_block_start_edge" id="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<title>View transitions: massive element on top of viewport and completely offscreen (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
.target_at_bottom_edge {
|
||||
position: fixed;
|
||||
inset-block-end: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
|
||||
.target {
|
||||
contain: paint;
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="target target_at_bottom_edge">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: massive element on top of viewport partially onscreen (new content)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="massive-element-on-top-of-viewport-partially-onscreen-ref.html">
|
||||
<meta name="fuzzy" content="massive-element-on-top-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.target {
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
inline-size: 10px;
|
||||
block-size: 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(*), html::view-transition-new(*) {
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
html::view-transition-old(target) { animation: unset; opacity: 0; }
|
||||
html::view-transition-new(target) { animation: unset; opacity: 1; }
|
||||
|
||||
</style>
|
||||
|
||||
<div class="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
scrollblue.scrollIntoView();
|
||||
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: massive element on top of viewport partially onscreen (old content)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="massive-element-on-top-of-viewport-partially-onscreen-ref.html">
|
||||
<meta name="fuzzy" content="massive-element-on-top-of-viewport-partially-onscreen-ref.html:maxDifference=0-3;totalPixels=0-330">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.target {
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
inline-size: 10px;
|
||||
block-size: 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(*), html::view-transition-new(*) {
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
html::view-transition-old(target) { animation: unset; opacity: 1; }
|
||||
html::view-transition-new(target) { animation: unset; opacity: 0; }
|
||||
|
||||
</style>
|
||||
|
||||
<div class="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
scrollblue.scrollIntoView();
|
||||
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -1,37 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<title>View transitions: element with clip max texture size (ref)</title>
|
||||
<title>View transitions: massive element on top of viewport partially onscreen (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: 40000px;
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
width: 100%;
|
||||
height: 39800px;
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
inline-size: 10px;
|
||||
block-size: 10px;
|
||||
background: grey;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: massive element below and on top of viewport partially onscreen (new content)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="massive-element-right-and-left-of-viewport-partially-onscreen-ref.html">
|
||||
<meta name="fuzzy" content="massive-element-right-and-left-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.target {
|
||||
position: fixed;
|
||||
inset-block-start: -90px;
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
inline-size: 10px;
|
||||
block-size: 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(*), html::view-transition-new(*) {
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
html::view-transition-old(target) { animation: unset; opacity: 0; }
|
||||
html::view-transition-new(target) { animation: unset; opacity: 1; }
|
||||
|
||||
</style>
|
||||
|
||||
<div class="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: massive element below and on top of viewport partially onscreen (new content)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="massive-element-right-and-left-of-viewport-partially-onscreen-ref.html">
|
||||
<meta name="fuzzy" content="massive-element-right-and-left-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.target {
|
||||
position: fixed;
|
||||
inset-block-start: -90px;
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
inline-size: 10px;
|
||||
block-size: 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(*), html::view-transition-new(*) {
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
html::view-transition-old(target) { animation: unset; opacity: 1; }
|
||||
html::view-transition-new(target) { animation: unset; opacity: 0; }
|
||||
|
||||
</style>
|
||||
|
||||
<div class="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<title>View transitions: massive element below viewport partially onscreen (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
:root {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.target {
|
||||
position: fixed;
|
||||
inset-block-start: -90px;
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: massive element below viewport and completely offscreen (new content)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="massive-element-right-of-viewport-offscreen-ref.html">
|
||||
<meta name="fuzzy" content="massive-element-right-of-viewport-offscreen-ref.html:maxDifference=0-2;totalPixels=0-445">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.target_after_bottom_edge {
|
||||
position: fixed;
|
||||
inset-block-start: 20000px;
|
||||
inset-inline-start: 0px;
|
||||
}
|
||||
|
||||
.target {
|
||||
contain: paint;
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
position: fixed;
|
||||
inset-block-start: 10000px;
|
||||
inline-size: 10px;
|
||||
block-size: 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(*), html::view-transition-new(*) {
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
/* We should capture at least viewport height worth of content from the element's top edge */
|
||||
html::view-transition-group(target) {
|
||||
animation: unset;
|
||||
transform: unset;
|
||||
|
||||
position: fixed;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
html::view-transition-old(target) { animation: unset; opacity: 0; }
|
||||
html::view-transition-new(target) { animation: unset; opacity: 1; }
|
||||
|
||||
</style>
|
||||
|
||||
<div class="target target_after_bottom_edge" id="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: massive element below viewport and completely offscreen (old content)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="massive-element-right-of-viewport-offscreen-ref.html">
|
||||
<meta name="fuzzy" content="massive-element-right-of-viewport-offscreen-ref.html:maxDifference=0-3;totalPixels=0-445">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.target_after_bottom_edge {
|
||||
position: fixed;
|
||||
inset-block-start: 20000px;
|
||||
inset-inline-start: 0px;
|
||||
}
|
||||
|
||||
.target {
|
||||
contain: paint;
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
position: fixed;
|
||||
inset-block-start: 10000px;
|
||||
inline-size: 10px;
|
||||
block-size: 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(*), html::view-transition-new(*) {
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
/* We should capture at least viewport height worth of content from the element's top edge */
|
||||
html::view-transition-group(target) {
|
||||
animation: unset;
|
||||
transform: unset;
|
||||
|
||||
position: fixed;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
html::view-transition-new(target) { animation: unset; opacity: 0; }
|
||||
html::view-transition-old(target) { animation: unset; opacity: 1; }
|
||||
|
||||
</style>
|
||||
|
||||
<div class="target target_after_bottom_edge" id="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>View transitions: massive element below viewport and completely offscreen (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.target_after_bottom_edge {
|
||||
position: fixed;
|
||||
inset-block-start: 0px;
|
||||
inset-inline-start: 0px;
|
||||
}
|
||||
|
||||
.target {
|
||||
contain: paint;
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="target target_after_bottom_edge" id="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: massive element below viewport partially onscreen (new content)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="massive-element-right-of-viewport-partially-onscreen-ref.html">
|
||||
<meta name="fuzzy" content="massive-element-right-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.target {
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
inline-size: 10px;
|
||||
block-size: 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(*), html::view-transition-new(*) {
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
html::view-transition-old(target) { animation: unset; opacity: 0; }
|
||||
html::view-transition-new(target) { animation: unset; opacity: 1; }
|
||||
|
||||
</style>
|
||||
|
||||
<div class="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: massive element below viewport partially onscreen (new content)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="massive-element-right-of-viewport-partially-onscreen-ref.html">
|
||||
<meta name="fuzzy" content="massive-element-right-of-viewport-partially-onscreen-ref.html:maxDifference=0-3;totalPixels=0-445">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.target {
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
inline-size: 10px;
|
||||
block-size: 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(*), html::view-transition-new(*) {
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
html::view-transition-old(target) { animation: unset; opacity: 1; }
|
||||
html::view-transition-new(target) { animation: unset; opacity: 0; }
|
||||
|
||||
</style>
|
||||
|
||||
<div class="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
|
||||
<script>
|
||||
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
||||
|
||||
async function runTest() {
|
||||
document.startViewTransition(() => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
|
||||
));
|
||||
});
|
||||
}
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<title>View transitions: massive element below viewport partially onscreen (ref)</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
:root {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.target {
|
||||
contain: paint;
|
||||
inline-size: 100px;
|
||||
block-size: 40000px;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.top {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.middle {
|
||||
inline-size: 100%;
|
||||
block-size: 39800px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
inline-size: 100%;
|
||||
block-size: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
contain: paint;
|
||||
inline-size: 10px;
|
||||
block-size: 10px;
|
||||
background: grey;
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="target">
|
||||
<div class="top">This text is at the top of the box</div>
|
||||
<div class="middle">This text is in the middle of the box</div>
|
||||
<div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
|
||||
</div>
|
||||
<div id=hidden class=hidden></div>
|
||||
</body>
|
||||
Загрузка…
Ссылка в новой задаче