Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-16 10:55:34 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision b'0802d8bd01e17178d9cd2355e6fbaf3c098e7953'

Browse source
This commit is contained in:
WPT Sync Bot 2022-11-11 01:30:14 +00:00
parent aa427dd412
commit 9ed042224a
254 changed files with 10823 additions and 1484 deletions
Download patch file Download diff file Expand all files Collapse all files

94
tests/wpt/web-platform-tests/css/css-view-transitions/shared-transition-author-style.manual.html Normal file
View file

@ -0,0 +1,94 @@
<!DOCTYPE html>
<html>
<title>Shared transitions of different elements and shapes</title>
<link rel="help" href="https://github.com/vmpstr/view-transitions">
<link rel="author" href="mailto:vmpstr@chromium.org">
<style>
body {
background: lightpink;
overflow: hidden;
}
input {
position: absolute;
left: 8px;
top: 8px;
z-index: 10;
}
.top {
top: 0px;
background: green;
}
.bottom {
bottom: 0px;
background: blue;
}
div {
position: absolute;
left: 0px;
right: 0px;
height: 40vh;
contain: paint;
}
</style>
<input id=toggle type=button value="Toggle!"></input>
<div id=target class=top>
The div should alternate being at the bottom and at the top.
The color at the top is green and bottom is blue.
During the animation, the div has an (x, y) offset and its
content is a blend of green and blue. There is also a grey
background with a slight offset from the top.
</div>
<script>
let classes = ["top", "bottom"]
let i = 0;
let transitionStyle =
`html::view-transition {
top: 50px;
}
html::view-transition-group(root) {
background-color: grey;
}
html::view-transition-group(target) {
left: 50px;
}
html::view-transition-old(target) {
opacity: 0.5;
animation-name: none;
}
html::view-transition-new(target) {
opacity: 0.5;
}
`
let pseudoStyle = document.createElement('style');
pseudoStyle.appendChild(document.createTextNode(transitionStyle));
async function runAnimation() {
target.style.viewTransitionName = "target";
let t = document.startViewTransition(() => {
target.classList.remove(classes[i]);
i = (i + 1) % classes.length;
target.classList.add(classes[i]);
document.head.appendChild(pseudoStyle);
});
await t.finished;
document.head.removeChild(pseudoStyle)
}
function init() {
toggle.addEventListener("click", runAnimation);
}
onload = init;
</script>