зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1838384 [wpt PR 40541] - Add popover top layer content-visibility tests, a=testonly
Automatic update from web-platform-tests Add popover top layer content-visibility tests (#40541) Copy existing top layer tests that are based on dialog and adapt the tests to use popover instead. -- wpt-commits: d6c561438a8ba351be0aef3350d57694d4f2c282 wpt-pr: 40541
This commit is contained in:
Rob Buis
moz-wptsync-bot
Родитель
de24766618
Коммит
4490c073cc
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf8">
|
||||
<title>CSS Content Visibility: popover doesn't show when hidden</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
|
||||
<link rel="match" href="container-ref.html">
|
||||
<meta name="assert" content="top layer popovers don't render when in skipped subtrees">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<style>
|
||||
.box { width: 150px; height: 150px; background: lightblue }
|
||||
.hidden { content-visibility: hidden }
|
||||
</style>
|
||||
|
||||
<div class="box hidden">
|
||||
Fail
|
||||
<div popover id=popover>Fail<div id=inner></div></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function runTest() {
|
||||
popover.showPopover();
|
||||
takeScreenshot();
|
||||
}
|
||||
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!doctype html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf8">
|
||||
<title>CSS Content Visibility: popover doesn't show when hidden after render</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
|
||||
<link rel="match" href="container-ref.html">
|
||||
<meta name="assert" content="top layer popovers don't render when in skipped subtrees">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<style>
|
||||
.box { width: 150px; height: 150px; background: lightblue }
|
||||
.hidden { content-visibility: hidden }
|
||||
</style>
|
||||
|
||||
<div id=container class=box>
|
||||
Fail
|
||||
<div popover id=popover>Fail<div id=inner></div></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function runTest() {
|
||||
container.classList.add("hidden");
|
||||
popover.showPopover();
|
||||
takeScreenshot();
|
||||
}
|
||||
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!doctype html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf8">
|
||||
<title>CSS Content Visibility: popover doesn't show when hidden after render</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
|
||||
<link rel="match" href="container-ref.html">
|
||||
<meta name="assert" content="top layer popovers don't render when in skipped subtrees">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<style>
|
||||
.box { width: 150px; height: 150px; background: lightblue }
|
||||
.hidden { content-visibility: hidden }
|
||||
</style>
|
||||
|
||||
<div id=container class=box>
|
||||
content
|
||||
<div popover id=popover>popover<div id=inner></div></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function runTest() {
|
||||
container.classList.add("hidden");
|
||||
popover.showPopover();
|
||||
inner.getBoundingClientRect();
|
||||
|
||||
takeScreenshot();
|
||||
}
|
||||
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!doctype html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf8">
|
||||
<title>CSS Content Visibility: popover shows when rendered</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
|
||||
<link rel="match" href="content-with-popover-top-layer-ref.html">
|
||||
<meta name="assert" content="top layer popovers start rendering when c-v is removed">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<style>
|
||||
.box { width: 100px; height: 100px; border: 1px solid black; }
|
||||
.hidden { content-visibility: hidden }
|
||||
#popover { outline: none; }
|
||||
</style>
|
||||
|
||||
<div id=container class=box>
|
||||
This test passes if you can see “PASS” in a white box.
|
||||
<div popover id=popover>PASS<div id=inner></div></div>
|
||||
</div>
|
||||
text
|
||||
|
||||
<script>
|
||||
function unhide() {
|
||||
container.classList.remove("hidden");
|
||||
takeScreenshot();
|
||||
}
|
||||
|
||||
function runTest() {
|
||||
container.classList.add("hidden");
|
||||
popover.showPopover();
|
||||
requestAnimationFrame(unhide);
|
||||
}
|
||||
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!doctype html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf8">
|
||||
<title>CSS Content Visibility: popover shows under c-v auto</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
|
||||
<link rel="match" href="spacer-with-popover-top-layer-ref.html">
|
||||
<meta name="assert" content="top layer popovers render under c-v auto">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<style>
|
||||
.box { width: 100px; height: 100px; border: 1px solid black; }
|
||||
.auto { content-visibility: auto }
|
||||
.spacer { width: 10px; height: 3000px; background: lightblue; }
|
||||
</style>
|
||||
|
||||
<div class=spacer></div>
|
||||
<div id=container class="box auto">
|
||||
content
|
||||
<div popover id=popover>PASS<div id=inner></div></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function runTest() {
|
||||
popover.showPopover();
|
||||
takeScreenshot();
|
||||
}
|
||||
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!doctype html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf8">
|
||||
<title>CSS Content Visibility: popover shows under c-v auto</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
|
||||
<link rel="match" href="spacer-with-popover-top-layer-ref.html">
|
||||
<meta name="assert" content="top layer popovers render under c-v auto">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<style>
|
||||
.box { width: 100px; height: 100px; border: 1px solid black; }
|
||||
.auto { content-visibility: auto }
|
||||
.spacer { width: 10px; height: 3000px; background: lightblue; }
|
||||
</style>
|
||||
|
||||
<div class=spacer></div>
|
||||
<div id=container class="box">
|
||||
content
|
||||
<div popover id=popover><div id=inner class="auto">PASS</div></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function runTest() {
|
||||
popover.showPopover();
|
||||
takeScreenshot();
|
||||
}
|
||||
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf8">
|
||||
<title>CSS Content Visibility: offscreen c-v auto content is relevant when in top layer</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
|
||||
<meta name="assert" content="offscreen c-v auto content is relevant when in top layer">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
#inner {
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: 100px 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div popover id="popover">
|
||||
<div id="spacer" style="height: 100000px;"></div>
|
||||
<div id="inner">
|
||||
<div style="height: 200px; width: 200px;">content</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
test(() => {
|
||||
popover.showPopover();
|
||||
|
||||
// Even though the element with `content-visibility: auto` has an ancestor
|
||||
// in the top layer, this element is not in the top layer list (although
|
||||
// it's in the top layer stacking context). This means it should not be
|
||||
// relevant to the user, because it is not onscreen.
|
||||
assert_equals(inner.getBoundingClientRect().height, 100);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!doctype html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf8">
|
||||
<title>CSS Content Visibility: popover doesn't show when hidden after showModal()</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
|
||||
<link rel="match" href="container-ref.html">
|
||||
<meta name="assert" content="top layer popovers don't render when in skipped subtrees">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<style>
|
||||
.box { width: 150px; height: 150px; background: lightblue }
|
||||
.hidden { content-visibility: hidden }
|
||||
</style>
|
||||
|
||||
<div id=container class=box>
|
||||
FAIL
|
||||
<div popover id=popovers>FAIL<div id=inner></div></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function runTest() {
|
||||
popovers.showPopover();
|
||||
inner.getBoundingClientRect();
|
||||
|
||||
container.classList.add("hidden");
|
||||
|
||||
takeScreenshot();
|
||||
}
|
||||
|
||||
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf8">
|
||||
<title>CSS Content Visibility: popover shows when rendered (ref)</title>
|
||||
|
||||
<style>
|
||||
.box { width: 100px; height: 100px; border: 1px solid black; }
|
||||
#popover { outline: none; }
|
||||
</style>
|
||||
|
||||
<div id=container class=box>
|
||||
This test passes if you can see “PASS” in a white box.
|
||||
<div popover id=popover>PASS<div id=inner></div></div>
|
||||
</div>
|
||||
text
|
||||
|
||||
<script>
|
||||
popover.showPopover();
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf8">
|
||||
<title>CSS Content Visibility: popover shows under c-v auto (ref)</title>
|
||||
|
||||
<style>
|
||||
.box { width: 100px; height: 100px; border: 1px solid black; }
|
||||
.spacer { width: 10px; height: 3000px; background: lightblue; }
|
||||
</style>
|
||||
|
||||
<div class=spacer></div>
|
||||
<div id=container class=box>
|
||||
content
|
||||
<div popover id=popover>PASS<div id=inner></div></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
popover.showPopover();
|
||||
</script>
|
||||
Загрузка…
Ссылка в новой задаче