mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update web-platform-tests to revision b'2703c75d5e889bb7c6a918de44841bf9de8d63a7'
This commit is contained in:
WPT Sync Bot
parent
d8e886a792
commit
7bf23c63b3
338 changed files with 9438 additions and 933 deletions
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<title>View transitions: fragmented elements skipped (ref)</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
|
||||
<style>
|
||||
body { background: pink }
|
||||
#spacer {
|
||||
width: 100px;
|
||||
height: 950px;
|
||||
background: lightgreen;
|
||||
}
|
||||
#container {
|
||||
width: 500px;
|
||||
columns: 2;
|
||||
height: 500px;
|
||||
visibility: hidden;
|
||||
}
|
||||
#target {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: green;
|
||||
}
|
||||
#unrelated {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
</style>
|
||||
<div id=container>
|
||||
<div id=spacer></div>
|
||||
<div id=target></div>
|
||||
</div>
|
||||
<div id=unrelated></div>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: fragmented elements skipped</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="fragmented-at-start-ignored-ref.html">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
#spacer {
|
||||
width: 100px;
|
||||
height: 950px;
|
||||
background: lightgreen;
|
||||
}
|
||||
#container {
|
||||
width: 500px;
|
||||
columns: 2;
|
||||
height: 500px;
|
||||
}
|
||||
#target {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: green;
|
||||
view-transition-name: target;
|
||||
}
|
||||
#unrelated {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: lightblue;
|
||||
view-transition-name: unrelated;
|
||||
}
|
||||
|
||||
::view-transition {
|
||||
background: pink;
|
||||
}
|
||||
::view-transition-group(root) {
|
||||
animation-duration: 500s;
|
||||
visibility: hidden;
|
||||
}
|
||||
::view-transition-group(target) {
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<div id=container>
|
||||
<div id=spacer></div>
|
||||
<div id=target></div>
|
||||
</div>
|
||||
<div id=unrelated></div>
|
||||
|
||||
<script>
|
||||
function runTransition() {
|
||||
document.startViewTransition().ready.then(takeScreenshot);
|
||||
}
|
||||
|
||||
requestAnimationFrame(() => requestAnimationFrame(runTransition))
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<title>View transitions: fragmented elements skipped</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
|
||||
<style>
|
||||
#spacer {
|
||||
width: 100px;
|
||||
height: 950px;
|
||||
background: lightgreen;
|
||||
}
|
||||
#container {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
columns: 2;
|
||||
}
|
||||
#target {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: green;
|
||||
}
|
||||
#unrelated {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: lightblue;
|
||||
}
|
||||
</style>
|
||||
<div id=container>
|
||||
<div id=spacer></div>
|
||||
<div id=target></div>
|
||||
</div>
|
||||
<div id=unrelated></div>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: fragmented elements skipped</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="fragmented-during-transition-skips-ref.html">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
#spacer {
|
||||
width: 100px;
|
||||
height: 950px;
|
||||
background: lightgreen;
|
||||
}
|
||||
#container {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
.fragment {
|
||||
columns: 2;
|
||||
}
|
||||
#target {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: green;
|
||||
view-transition-name: target;
|
||||
}
|
||||
#unrelated {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: lightblue;
|
||||
view-transition-name: unrelated;
|
||||
}
|
||||
|
||||
::view-transition {
|
||||
background: pink;
|
||||
}
|
||||
::view-transition-group(root) {
|
||||
animation-duration: 500s;
|
||||
visibility: hidden;
|
||||
}
|
||||
::view-transition-group(target) {
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<div id=container>
|
||||
<div id=spacer></div>
|
||||
<div id=target></div>
|
||||
</div>
|
||||
<div id=unrelated></div>
|
||||
|
||||
<script>
|
||||
function runTransition() {
|
||||
let t = document.startViewTransition();
|
||||
t.ready.then(() => {
|
||||
requestAnimationFrame(() => container.classList.add("fragment"))
|
||||
});
|
||||
t.finished.then(takeScreenshot);
|
||||
}
|
||||
|
||||
requestAnimationFrame(() => requestAnimationFrame(runTransition))
|
||||
</script>
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>View 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 => {
|
||||
assert_implements(document.startViewTransition, "Missing document.startViewTransition");
|
||||
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,105 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>View transitions: ensure input targets document root while rendering is suppressed</title>
|
||||
<link rel="help" href="https://github.com/WICG/view-transitions">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7797">
|
||||
<link rel="author" href="mailto:bokan@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>
|
||||
:root {
|
||||
/* Ensure clicks during the transition fall through the pseudo tree root to
|
||||
* real DOM */
|
||||
view-transition-name: none;
|
||||
}
|
||||
|
||||
::view-transition {
|
||||
/* Ensure clicks during the transition fall through the pseudo tree root to
|
||||
* real DOM */
|
||||
pointer-events: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
::view-transition-group(*) {
|
||||
animation-duration: 30s;
|
||||
}
|
||||
|
||||
#clicktarget {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
#transition {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
contain: paint;
|
||||
view-transition-name: transitionElement;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="clicktarget"></div>
|
||||
<div id="transition"></div>
|
||||
|
||||
<script>
|
||||
const target = document.getElementById("clicktarget");
|
||||
|
||||
async function sendAndWaitForClick() {
|
||||
return new Promise(async (resolve) => {
|
||||
|
||||
function eventHandler(ev) {
|
||||
resolve(ev);
|
||||
}
|
||||
|
||||
document.documentElement.addEventListener("click", eventHandler);
|
||||
|
||||
await new test_driver.Actions()
|
||||
.setContext(window)
|
||||
.addPointer("mousePointer1", "mouse")
|
||||
.pointerMove(10, 10, {origin: 'viewport', sourceName: "mousePointer1"})
|
||||
.pointerDown({sourceName: "mousePointer1"})
|
||||
.pointerUp({sourceName: "mousePointer1"})
|
||||
.send();
|
||||
|
||||
document.documentElement.removeEventListener("click", eventHandler);
|
||||
});
|
||||
}
|
||||
|
||||
promise_test(async t => {
|
||||
assert_implements(document.startViewTransition, "Missing document.startViewTransition");
|
||||
assert_not_equals(target, null, "PRECONDITION: target element is valid");
|
||||
|
||||
// Ensure input is initialized before blocking rendering.
|
||||
await new test_driver.Actions()
|
||||
.setContext(window)
|
||||
.addPointer("mousePointer1", "mouse")
|
||||
.pointerMove(0, 0, {origin: "viewport", sourceName: "mousePointer1"})
|
||||
.send();
|
||||
|
||||
let clickEvent = null;
|
||||
|
||||
let transition = document.startViewTransition(async () => {
|
||||
clickEvent = await sendAndWaitForClick();
|
||||
});
|
||||
|
||||
await transition.ready;
|
||||
|
||||
assert_equals(clickEvent.target, document.documentElement,
|
||||
"Events must target the transition root while render blocked");
|
||||
clickEvent = null;
|
||||
|
||||
clickEvent = await sendAndWaitForClick();
|
||||
|
||||
// This just ensures we're not passing the above check by accident.
|
||||
assert_equals(clickEvent.target, target,
|
||||
"During transition, event should hit real DOM");
|
||||
|
||||
}, "Input when rendering suppressed targets root");
|
||||
</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: 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>
|
||||
|
|
@ -8,7 +8,6 @@
|
|||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
view-transition-name: target;
|
||||
}
|
||||
.child {
|
||||
width: 100px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue