Skip `content-visibility: hidden` content in display lists
Differential Revision: https://phabricator.services.mozilla.com/D142341
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1761995
gecko-commit: ae2ee4d99f50c99802242dcfd5acbabd44553575
gecko-reviewers: emilio
diff --git a/css/css-contain/content-visibility/content-visibility-canvas-ref.html b/css/css-contain/content-visibility/content-visibility-canvas-ref.html
new file mode 100644
index 0000000..dbedcf1
--- /dev/null
+++ b/css/css-contain/content-visibility/content-visibility-canvas-ref.html
@@ -0,0 +1,17 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: hidden canvas (reference)</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+div {
+ width: 200px;
+ height: 200px;
+ background: green;
+ border: 1px solid black;
+}
+</style>
+
+<div></div>
diff --git a/css/css-contain/content-visibility/content-visibility-canvas.html b/css/css-contain/content-visibility/content-visibility-canvas.html
new file mode 100644
index 0000000..fe46948
--- /dev/null
+++ b/css/css-contain/content-visibility/content-visibility-canvas.html
@@ -0,0 +1,43 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: hidden canvas</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-canvas-ref.html">
+<meta name="assert" content="content-visibility hidden canvas element does not paint replaced content">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+canvas {
+ width: 200px;
+ height: 200px;
+ background: green;
+ border: 1px solid black;
+}
+.hidden {
+ content-visibility: hidden;
+}
+</style>
+
+<canvas id="canvas">
+</canvas>
+
+<script>
+async function runTest() {
+ var context = canvas.getContext("2d");
+ context.fillStyle = "red";
+ context.fillRect(0, 0, canvas.width, canvas.height);
+
+ canvas.classList.add("hidden");
+ requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = () => {
+ requestAnimationFrame(() => {
+ requestAnimationFrame(runTest);
+ });
+};
+</script>
+</html>
diff --git a/css/css-contain/content-visibility/content-visibility-video-ref.html b/css/css-contain/content-visibility/content-visibility-video-ref.html
new file mode 100644
index 0000000..5e1e9bd
--- /dev/null
+++ b/css/css-contain/content-visibility/content-visibility-video-ref.html
@@ -0,0 +1,17 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: hidden video (reference)</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+div {
+ width: 200px;
+ height: 200px;
+ background: green;
+ border: 1px solid black;
+}
+</style>
+
+<div></div>
diff --git a/css/css-contain/content-visibility/content-visibility-video.html b/css/css-contain/content-visibility/content-visibility-video.html
new file mode 100644
index 0000000..bed5954
--- /dev/null
+++ b/css/css-contain/content-visibility/content-visibility-video.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>Content Visibility: hidden video</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-video-ref.html">
+<meta name="assert" content="content-visibility hidden video element does not paint replaced content">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+video {
+ width: 200px;
+ height: 200px;
+ background: green;
+ border: 1px solid black;
+}
+.hidden {
+ content-visibility: hidden;
+}
+</style>
+
+<body>
+ <video id="video" poster="../support/blue-100x100.png" src="../support/white.webm" controls></video>
+</body>
+
+<script>
+async function runTest() {
+ video.classList.add("hidden");
+ video.play();
+ requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = () => {
+ requestAnimationFrame(() => {
+ requestAnimationFrame(runTest);
+ });
+};
+</script>
+</html>
