Tim Nguyen
bf41e0b41f
Automatic update from web-platform-tests Fix VT reftests to account for Safari dynamically colored scrollbar tracks (#55088) Since macOS Tahoe, Safari has started dynamically coloring the scrollbar tracks based on the root background color. This has lead many reftests to start failing, since they are no longer using the same fixed track background like other browsers. To fix this, we either hide the scrollbar using scrollbar-width: none when the scrollbar isn't critical to the test, or change the root background color to trump the track color heuristic. -- wpt-commits: c8857a02615b2fe02a8ad481023f1f5ef9acec30 wpt-pr: 55088
80 lines
2.0 KiB
HTML
80 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html class=reftest-wait>
|
|
<title>View transitions: element with clip</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
|
|
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
|
<link rel="match" href="content-with-clip-ref.html">
|
|
|
|
<script src="/common/reftest-wait.js"></script>
|
|
<style>
|
|
:root {
|
|
scrollbar-width: none;
|
|
}
|
|
.target {
|
|
contain: paint;
|
|
width: 100px;
|
|
height: 100vh;
|
|
position: relative;
|
|
top: 50vh;
|
|
display: inline-block;
|
|
}
|
|
|
|
.embedded {
|
|
width: 100%;
|
|
height: 50%;
|
|
}
|
|
|
|
.hidden {
|
|
contain: paint;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: grey;
|
|
view-transition-name: hidden;
|
|
}
|
|
|
|
/* Makes sure the viewport height is consistent for scrollbars to align */
|
|
body {
|
|
height: 150vh;
|
|
}
|
|
|
|
html::view-transition {
|
|
background: pink;
|
|
height: 100%;
|
|
}
|
|
html::view-transition-group(hidden) { animation-duration: 300s; }
|
|
html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
|
|
|
|
html::view-transition-group(target1), html::view-transition-group(target2) {
|
|
position: absolute;
|
|
top: -50vh;
|
|
}
|
|
html::view-transition-old(target1) { animation: unset; opacity: 1; }
|
|
html::view-transition-new(target2) { animation: unset; opacity: 1; }
|
|
html::view-transition-group(root) { display: none }
|
|
|
|
</style>
|
|
|
|
<div id="target1" class="target" style="view-transition-name: target1">
|
|
<div class="embedded" style="background: green;"></div>
|
|
<div class="embedded" style="background: blue"></div>
|
|
</div>
|
|
<div id="target2" class="target">
|
|
<div class="embedded" style="background: green;"></div>
|
|
<div class="embedded" style="background: blue"></div>
|
|
</div>
|
|
<div id=hidden class=hidden></div>
|
|
|
|
<script>
|
|
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
|
|
|
|
async function runTest() {
|
|
let transition = document.startViewTransition(() => {
|
|
target1.style = "";
|
|
target2.style = "view-transition-name: target2";
|
|
});
|
|
transition.ready.then(takeScreenshot);
|
|
}
|
|
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
|
</script>
|
|
|