Update web-platform-tests to revision b'99458bfd6e43f5842a4a510cc5adfd8185e5c64c'

This commit is contained in:
WPT Sync Bot 2022-11-19 01:20:42 +00:00
parent eac515e4ab
commit ec97b29ff1
334 changed files with 5735 additions and 3175 deletions

View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html class=reftest-wait>
<title>View transitions: duplicate tags in the old DOM skip the transition</title>
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
<link rel="author" href="mailto:khushalsagar@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
width: 100px;
height: 100px;
background: blue;
contain: paint;
}
</style>
<div id=first></div>
<div id=second></div>
<script>
promise_test(async t => {
return new Promise((resolve, reject) => {
first.style = "view-transition-name: target";
second.style = "view-transition-name: target";
let transition = document.startViewTransition();
// Ready rejected first since invoking the dom callback is an async task.
let readyRejected = false;
transition.ready.then(reject, () => {readyRejected = true;});
// The domUpdate promise resolves (since there is no callback).
let domUpdatedResolved = false;
transition.domUpdated.then(() => {
assert_true(readyRejected, "ready not rejected before domUpdated");
domUpdatedResolved = true;
}, reject);
// Finally finish resolves.
transition.finished.then(() => {
assert_true(domUpdatedResolved, "domUpdated not resolved before finish");
resolve();
}, reject);
});
}, "Two different elements with the same name in the old DOM should skip the transition");
</script>

View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html class=reftest-wait>
<title>View transitions: duplicate tags in the new DOM skip the transition</title>
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
<link rel="author" href="mailto:khushalsagar@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
width: 100px;
height: 100px;
background: blue;
contain: paint;
}
</style>
<div id=first></div>
<div id=second></div>
<script>
promise_test(async t => {
return new Promise((resolve, reject) => {
first.style = "view-transition-name: target";
let transition = document.startViewTransition(() => {
first.style = "view-transition-name: target";
second.style = "view-transition-name: target";
});
// First domUpdated resolves since the callback runs successfully.
let domUpdatedResolved = false;
transition.domUpdated.then(() => { domUpdatedResolved = true; }, reject);
// Then finished resolves since domUpdated was already resolved.
let finishResolved = false;
transition.domUpdated.then(() => {
assert_true(domUpdatedResolved, "domUpdated not resolved before finish");
finishResolved = true;
}, reject);
// Finally ready rejects.
transition.ready.then(reject, () => {
assert_true(finishResolved, "finish not resolved before ready");
resolve();
});
});
}, "Two different elements with the same name in the new DOM should skip the transition");
</script>

View file

@ -1,46 +0,0 @@
<!DOCTYPE html>
<html class=reftest-wait>
<title>Shared transitions: root tag is reserved</title>
<link rel="help" href="https://github.com/WICG/view-transitions">
<link rel="author" href="mailto:vmpstr@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
width: 100px;
height: 100px;
background: blue;
contain: paint;
}
</style>
<div id=first></div>
<div id=second></div>
<script>
promise_test(async t => {
return new Promise((resolve, reject) => {
first.style = "view-transition-name: target";
second.style = "view-transition-name: target";
let transition = document.startViewTransition();
transition.ready.then(() => {}, () => {});
transition.domUpdated.then(() => {}, () => {});
transition.finished.then(reject, resolve);
});
}, "Two different elements with the same tag rejects capture");
promise_test(async t => {
return new Promise((resolve, reject) => {
first.style = "view-transition-name: target";
let transition = document.startViewTransition(() => {
first.style = "view-transition-name: target";
second.style = "view-transition-name: target";
});
transition.ready.then(() => {}, () => {});
transition.domUpdated.then(() => {}, () => {});
transition.finished.then(reject, resolve);
});
}, "Two different elements with the same tag rejects start");
</script>

View file

@ -27,6 +27,9 @@
contain: paint;
border: 1px solid black;
}
.source {
contain: layout;
}
#target {
background: red;
position: absolute;

View file

@ -29,6 +29,7 @@
width: 10px;
height: 10px;
view-transition-name: hidden;
contain: layout;
}
html::view-transition-group(target) {

View file

@ -21,6 +21,7 @@
width: 10px;
height: 10px;
view-transition-name: hidden;
contain: layout;
}
html::view-transition-group(target) {

View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html class=reftest-wait>
<title>View transitions: transition skipped if no containment on new element after animation started</title>
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
<link rel="author" href="mailto:khushalsagar@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
width: 100px;
height: 100px;
background: blue;
view-transition-name: target;
contain: paint;
}
html::view-transition-group(target) {
animation-duration: 300s;
}
</style>
<div id=first></div>
<script>
promise_test(async t => {
return new Promise(async (resolve, reject) => {
let transition = document.startViewTransition();
await transition.domUpdated;
await transition.ready;
transition.finished.then(resolve, reject);
first.style.contain = "none";
});
}, "new element becoming uncontained should skip the transition");
</script>

View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html class=reftest-wait>
<title>View transitions: transition skipped if no containment on new element</title>
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
<link rel="author" href="mailto:khushalsagar@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
width: 100px;
height: 100px;
background: blue;
view-transition-name: target;
contain: paint;
}
</style>
<div id=first></div>
<script>
promise_test(async t => {
return new Promise(async (resolve, reject) => {
let transition = document.startViewTransition(() => {
first.style.contain = "none";
});
let readyRejected = false;
transition.ready.then(reject, () => { readyRejected = true; });
let domUpdated = false;
transition.domUpdated.then(() => { domUpdated = true; }, reject);
transition.finished.then(() => {
assert_true(readyRejected, "ready not rejected");
assert_true(domUpdated, "dom not updated");
if (window.getComputedStyle(first).contain == "none")
resolve();
else
reject("dom update callback did not run");
}, reject);
});
}, "uncontained new element should skip the transition");
</script>

View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html class=reftest-wait>
<title>View transitions: transition skipped if no containment on old element</title>
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
<link rel="author" href="mailto:khushalsagar@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
width: 100px;
height: 100px;
background: blue;
view-transition-name: target;
}
</style>
<div id=first></div>
<script>
promise_test(async t => {
return new Promise(async (resolve, reject) => {
let transition = document.startViewTransition(() => {
first.style.contain = "paint";
});
let readyRejected = false;
transition.ready.then(reject, () => { readyRejected = true; });
let domUpdated = false;
transition.domUpdated.then(() => { domUpdated = true; }, reject);
transition.finished.then(() => {
assert_true(readyRejected, "ready not rejected");
assert_true(domUpdated, "dom not updated");
if (window.getComputedStyle(first).contain == "paint")
resolve();
else
reject("dom update callback did not run");
}, reject);
});
}, "uncontained old element should skip the transition");
</script>

View file

@ -29,6 +29,7 @@
width: 10px;
height: 10px;
view-transition-name: hidden;
contain: layout;
}
html::view-transition-group(target) {

View file

@ -21,6 +21,7 @@
width: 10px;
height: 10px;
view-transition-name: hidden;
contain: layout;
}
html::view-transition-group(target) {

View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html class=reftest-wait>
<title>View transitions: computed style on pseudo-element stays in sync with the DOM element</title>
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
<link rel="author" href="mailto:khushalsagar@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
width: 100px;
height: 100px;
background: blue;
view-transition-name: target;
contain: paint;
}
</style>
<div id=first></div>
<script>
promise_test(async t => {
return new Promise(async (resolve, reject) => {
let transition = document.startViewTransition();
await transition.domUpdated;
await transition.ready;
let viewbox = window.getComputedStyle(
document.documentElement, "::view-transition-new(target)").objectViewBox;
assert_equals(viewbox, "none", "incorrect viewbox " + viewbox);
first.style.filter = "blur(5px)";
viewbox = window.getComputedStyle(
document.documentElement, "::view-transition-new(target)").objectViewBox;
assert_not_equals(viewbox, "none", "incorrect viewbox " + viewbox);
transition.finished.then(resolve, reject);
});
}, "computed style on pseudo-element stays in sync with the DOM element");
</script>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html class=reftest-wait>
<title>View transitions: skipTransition() invoked before a synchronous updateDOM callback is invoked</title>
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
<link rel="author" href="mailto:khushalsagar@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
width: 100px;
height: 100px;
background: blue;
contain: paint;
}
</style>
<div id=first></div>
<script>
promise_test(async t => {
return new Promise(async (resolve, reject) => {
let transition = document.startViewTransition(() => {
first.style.viewTransitionName = "target";
});
transition.skipTransition();
await transition.finished;
if (window.getComputedStyle(first).viewTransitionName == "target")
resolve();
else
reject();
});
}, "finished promise should be resolved if skipTransition() is invoked before a synchronous domUpdated callback is dispatched");
</script>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html class=reftest-wait>
<title>View transitions: skipTransition() after animations have started running should resolve finished promise</title>
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
<link rel="author" href="mailto:khushalsagar@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
width: 100px;
height: 100px;
background: blue;
contain: paint;
view-transition-name: target;
}
::view-transition-group(target) {
animation-duration: 300s;
}
</style>
<div id=first></div>
<script>
promise_test(async t => {
return new Promise(async (resolve, reject) => {
let transition = document.startViewTransition();
await transition.ready;
transition.skipTransition();
await transition.finished;
resolve();
});
}, "skipTransition() after animations have started running should resolve finished promise");
</script>

View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html class=reftest-wait>
<title>View transitions: transition skipped in animation phase</title>
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
<link rel="author" href="mailto:khushalsagar@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
width: 100px;
height: 100px;
background: blue;
contain: paint;
view-transition-name: target;
}
::view-transition-group(target) {
animation-duration: 300s;
}
</style>
<div id=first></div>
<script>
promise_test(async t => {
return new Promise(async (resolve, reject) => {
let transition = document.startViewTransition(() => {
let foo = bar;
});
let readyRejected = false;
transition.ready.then(reject, () => { readyRejected = true; });
let domUpdateRejected = false;
transition.domUpdated.then(reject, () => { domUpdateRejected = true; });
transition.finished.then(reject, () => {
assert_true(readyRejected, "ready not rejected");
assert_true(domUpdateRejected, "dom update not rejected");
resolve();
});
});
}, "transition skipped because callback has invalid syntax");
</script>

View file

@ -1,57 +0,0 @@
<!DOCTYPE html>
<html class=reftest-wait>
<title>When paint containment is not present we should still run animation.</title>
<link rel="help" href="https://github.com/vmpstr/view-transitions">
<link rel="author" href="mailto:vmpstr@chromium.org">
<script src="/common/rendering-utils.js"></script>
<script src="/common/reftest-wait.js"></script>
<style>
div {
width: 10px;
height: 10px;
top: 10px;
left: 10px;
position: relative;
background: blue;
}
.green { background: green; }
</style>
<div id=first></div>
<div id=second></div>
<script>
function rafAnimation() {
first.classList.toggle("green");
requestAnimationFrame(rafAnimation);
}
async function runTest() {
await waitForAtLeastOneFrame();
// Prepare with a shared element
first.style.viewTransitionName = "shared";
let t = document.startViewTransition(() => {
first.style.viewTransitionName = "";
second.style.viewTransitionName = "shared";
});
// The start() call above starts the capture. Force a hit test, which will
// determine compositing reasons.
document.elementFromPoint(0, 0);
// Wait for the transition to finish. This will note that we don't have
// paint containment and should de-composite the element.
await t.finished;
takeScreenshot();
}
onload = runTest;
// Continually run raf animation which should paint every frame.
rafAnimation();
</script>
</html>

View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html class=reftest-wait>
<title>View transitions: validates that view-transition-name: unset or initial are ignored</title>
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
<link rel="author" href="mailto:khushalsagar@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#first {
width: 100px;
height: 100px;
background: blue;
contain: paint;
view-transition-name: target;
}
#second {
width: 100px;
height: 100px;
background: blue;
view-transition-name: unset;
}
#third {
width: 100px;
height: 100px;
background: blue;
view-transition-name: initial;
}
</style>
<div id=first></div>
<div id=second></div>
<div id=third></div>
<script>
promise_test(async t => {
return new Promise(async (resolve, reject) => {
let transition = document.startViewTransition();
await transition.domUpdated;
// Elements with view-transition-name: initial and unset don't have
// containment. Because they are ignored they don't cause the transition to
// be skipped.
await transition.ready;
transition.finished.then(resolve, reject);
});
}, "validates that view-transition-name: unset or initial are ignored");
</script>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html class=reftest-wait>
<title>View transitions: ensures view-transition-name is tracked on element added by script</title>
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
<link rel="author" href="mailto:khushalsagar@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#first {
width: 100px;
height: 100px;
background: blue;
view-transition-name: first;
}
</style>
<body>
<div>
<div id=first></div>
</div>
</body>
<script>
promise_test(async t => {
return new Promise((resolve, reject) => {
// Remove and add an uncontained element. Even though this element doesn't
// create a stacking context its verified during the transition.
const element = document.getElementById("first");
element.remove();
document.body.appendChild(element);
let transition = document.startViewTransition();
transition.ready.then(reject, resolve);
});
}, "view-transition-name on an element added by script should be visited when discovering named elements");
</script>

View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html class=reftest-wait>
<title>View transitions: ensures view-transition-name is not tracked on element removed by script</title>
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
<link rel="author" href="mailto:khushalsagar@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#first {
width: 100px;
height: 100px;
background: blue;
view-transition-name: first;
}
</style>
<body>
<div>
<div id=first></div>
</div>
</body>
<script>
promise_test(async t => {
return new Promise(async (resolve, reject) => {
// Remove an uncontained element. Because this element is not visited when
// discovering named elements, the transition is not skipped.
first.remove();
let transition = document.startViewTransition();
await transition.ready;
transition.finished.then(resolve, reject);
});
}, "view-transition-name on an element removed by script should not be visited when discovering named elements");
</script>