mirror of
https://github.com/servo/servo.git
synced 2025-08-03 04:30:10 +01:00
Update web-platform-tests to revision b'eed89e3016c6fd9de02af8a9dcb06933244c54f9'
This commit is contained in:
parent
4f381683ba
commit
f1afee3fc8
157 changed files with 3703 additions and 1428 deletions
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<title>View transitions: break-inside: avoid child (ref)</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
|
||||
<style>
|
||||
.columns {
|
||||
columns: 2;
|
||||
contain: layout;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.inner {
|
||||
break-inside: avoid;
|
||||
position: relative;
|
||||
top: 300px;
|
||||
left: 0;
|
||||
background: lightblue;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="columns">
|
||||
<div class="inner"></div>
|
||||
</div>
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: break-inside: avoid child</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="break-inside-avoid-child-ref.html">
|
||||
<meta name="fuzzy" content="break-inside-avoid-child-ref.html:0-5;0-1600">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<style>
|
||||
.old {
|
||||
position: relative;
|
||||
top: 300px;
|
||||
left: 0;
|
||||
background: lightblue;
|
||||
}
|
||||
.new {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: green;
|
||||
}
|
||||
.columns {
|
||||
columns: 2;
|
||||
contain: layout;
|
||||
border: 1px solid black;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
.inner {
|
||||
break-inside: avoid;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
html::view-transition-container(root) { animation-duration: 300s; }
|
||||
html::view-transition-old(target) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
}
|
||||
html::view-transition-new(target) {
|
||||
animation: unset;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="columns">
|
||||
<div id="inner" class="inner old"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function runTest() {
|
||||
let transition = document.startViewTransition(() => {
|
||||
inner.classList.replace("old", "new");
|
||||
});
|
||||
transition.ready.then(() => requestAnimationFrame(takeScreenshot));
|
||||
}
|
||||
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<title>View transitions: scroller child element (ref)</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
|
||||
<style>
|
||||
#target {
|
||||
contain: layout;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: yellow;
|
||||
}
|
||||
#scroller {
|
||||
overflow: scroll;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
#child {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
top: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="target">
|
||||
<div id="scroller">
|
||||
<div id="child"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
onload = () => { scroller.scrollTop = 300; };
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: scroller child element</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="scroller-child-abspos-ref.html">
|
||||
<meta name="fuzzy" content="scroller-child-abspos-ref.html:0-5;0-800">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<style>
|
||||
#target {
|
||||
contain: layout;
|
||||
view-transition-name: target;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: yellow;
|
||||
}
|
||||
#scroller {
|
||||
overflow: scroll;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
#child {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
top: 200px;
|
||||
}
|
||||
|
||||
html::view-transition-container(root) { animation-duration: 300s; }
|
||||
html::view-transition-old(target) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
}
|
||||
html::view-transition-new(target) {
|
||||
animation: unset;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="target">
|
||||
<div id="scroller">
|
||||
<div id="child"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function runTest() {
|
||||
scroller.scrollTop = 300;
|
||||
|
||||
let transition = document.startViewTransition();
|
||||
transition.ready.then(() => requestAnimationFrame(takeScreenshot));
|
||||
}
|
||||
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<title>View transitions: scroller child element (ref)</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
|
||||
<style>
|
||||
#target {
|
||||
contain: layout;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background: yellow;
|
||||
}
|
||||
#scroller {
|
||||
overflow: scroll;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
#child {
|
||||
position: relative;
|
||||
width: 2000px;
|
||||
height: 2000px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="target">
|
||||
<div id="scroller">
|
||||
<div id="child"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
onload = () => { scroller.scrollTop = 300; };
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: scroller child element</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="scroller-child-ref.html">
|
||||
<meta name="fuzzy" content="scroller-child-ref.html:0-5;0-800">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<style>
|
||||
#target {
|
||||
contain: layout;
|
||||
view-transition-name: target;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background: yellow;
|
||||
}
|
||||
#scroller {
|
||||
overflow: scroll;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
#child {
|
||||
position: relative;
|
||||
width: 2000px;
|
||||
height: 2000px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
html::view-transition-container(root) { animation-duration: 300s; }
|
||||
html::view-transition-old(target) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
}
|
||||
html::view-transition-new(target) {
|
||||
animation: unset;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="target">
|
||||
<div id="scroller">
|
||||
<div id="child"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function runTest() {
|
||||
scroller.scrollTop = 300;
|
||||
|
||||
let transition = document.startViewTransition();
|
||||
transition.ready.then(() => requestAnimationFrame(takeScreenshot));
|
||||
}
|
||||
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<title>View transitions: scroller element (ref)</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
|
||||
<link rel="author" href="mailto:vmpstr@chromium.org">
|
||||
|
||||
<style>
|
||||
#scroller {
|
||||
overflow: scroll;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
contain: layout;
|
||||
}
|
||||
|
||||
#child {
|
||||
position: relative;
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="scroller">
|
||||
<div id="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
onload = () => { scroller.scrollTop = 300; };
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<title>View transitions: scroller element</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="scroller-ref.html">
|
||||
<meta name="fuzzy" content="scroller-ref.html:0-5;0-10">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<style>
|
||||
#scroller {
|
||||
overflow: scroll;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
contain: layout;
|
||||
view-transition-name: target;
|
||||
}
|
||||
|
||||
#child {
|
||||
position: relative;
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
html::view-transition-container(root) { animation-duration: 300s; }
|
||||
html::view-transition-old(target) {
|
||||
animation: unset;
|
||||
opacity: 1;
|
||||
}
|
||||
html::view-transition-new(target) {
|
||||
animation: unset;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="scroller">
|
||||
<div id="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function runTest() {
|
||||
scroller.scrollTop = 300;
|
||||
|
||||
let transition = document.startViewTransition();
|
||||
transition.ready.then(() => requestAnimationFrame(takeScreenshot));
|
||||
}
|
||||
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
Loading…
Add table
Add a link
Reference in a new issue