content-visibility: Ensure that fragment nav doesn't happen for hidden elements.
Currently fragment navigation depends on whether the element has a
layout object, so by default it wouldn't work on content-visibility:hidden
subtrees _unless_ the property was added after a layout object was
created, then it would scroll.
That's inconsistent and we should just not scroll in any case. That's
similar to what display:none would do here, since there would be no
layout object. Note that this only applies to hidden, and not auto. With
auto, or any "activatable" case, we would first create a layout object
by updating the layout tree outside of this code, and then scroll.
R=chrishtr@chromium.org, futhark@chromium.org
Bug: 1241496
Change-Id: Iaeb65a1e2ad512868b4372ee658bf7f0f1f343ca
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3107507
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Chris Harrelson <chrishtr@chromium.org>
Commit-Queue: vmpstr <vmpstr@chromium.org>
Cr-Commit-Position: refs/heads/main@{#913821}
diff --git a/css/css-contain/content-visibility/content-visibility-056.html b/css/css-contain/content-visibility/content-visibility-056.html
index 4c12d2b..4372bab 100644
--- a/css/css-contain/content-visibility/content-visibility-056.html
+++ b/css/css-contain/content-visibility/content-visibility-056.html
@@ -4,8 +4,8 @@
<title>Content Visibility: scrollIntoView prevented</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
-<link rel="match" href="spacer-and-container-scrolled-ref.html">
-<meta name="assert" content="scrollIntoView is not prevented when the target is hidden">
+<link rel="match" href="spacer-and-container-ref.html">
+<meta name="assert" content="scrollIntoView is prevented when the target is hidden">
<script src="/common/reftest-wait.js"></script>
diff --git a/css/css-contain/content-visibility/content-visibility-059.html b/css/css-contain/content-visibility/content-visibility-059.html
deleted file mode 100644
index 1242a5b..0000000
--- a/css/css-contain/content-visibility/content-visibility-059.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!doctype HTML>
-
-<html class="reftest-wait">
-<meta charset="utf8">
-<title>CSS Content Visibility: hidden + scrollIntoView</title>
-<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
-<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
-<link rel="match" href="content-visibility-059-ref.html">
-<meta name="assert" content="scrollIntoView scrolls to element under hidden, not just container">
-<meta name="assert" content="scrollIntoView does not start painting hidden content">
-<script src="/common/reftest-wait.js"></script>
-
-<style>
-.spacer {
- height: 1000px;
- background: lightgreen;
-}
-#container {
- width: 150px;
- height: 150px;
- background: lightblue;
-}
-#target {
- position: relative;
- top: 75px;
-
- width: 50px;
- height: 50px;
- background: red;
-}
-.hidden {
- content-visibility: hidden;
-}
-</style>
-
-<div>top of the page</div>
-<div class=spacer></div>
-<div id=container class=hidden>
- <div id=target></div>
-</div>
-<div class=spacer></div>
-<div>bottom of the page</div>
-
-<script>
-function runTest() {
- document.getElementById("target").scrollIntoView();
- requestAnimationFrame(takeScreenshot);
-}
-
-window.onload = requestAnimationFrame(() => {
- requestAnimationFrame(() => {
- requestAnimationFrame(() => {
- runTest();
- });
- });
-});
-</script>
-</html>
diff --git a/css/css-contain/content-visibility/content-visibility-083.html b/css/css-contain/content-visibility/content-visibility-083.html
new file mode 100644
index 0000000..27f0471
--- /dev/null
+++ b/css/css-contain/content-visibility/content-visibility-083.html
@@ -0,0 +1,42 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: anchor links prevented on hidden</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="spacer-and-container-ref.html">
+<meta name="assert" content="anchor link scroll is prevented when the target is hidden">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+ width: 150px;
+ height: 3000px;
+ background: lightblue;
+}
+#container {
+ width: 150px;
+ height: 150px;
+ background: lightgreen;
+ content-visibility: hidden;
+}
+
+#target {
+ width: 100px;
+ height: 100px;
+}
+</style>
+
+<div class="spacer"></div>
+<div id="container"><div id="target"></div></div>
+
+<script>
+function runTest() {
+ location.href += "#target";
+ requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = () => { requestAnimationFrame(runTest); };
+</script>
+</html>
diff --git a/css/css-contain/content-visibility/content-visibility-084.html b/css/css-contain/content-visibility/content-visibility-084.html
new file mode 100644
index 0000000..33d11cf
--- /dev/null
+++ b/css/css-contain/content-visibility/content-visibility-084.html
@@ -0,0 +1,50 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: anchor links prevented on hidden</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="spacer-and-container-ref.html">
+<meta name="assert" content="anchor link scroll is prevented when the target is hidden">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+ width: 150px;
+ height: 3000px;
+ background: lightblue;
+}
+#container {
+ width: 150px;
+ height: 150px;
+ background: lightgreen;
+}
+
+.hidden {
+ content-visibility: hidden;
+}
+
+#target {
+ width: 100px;
+ height: 100px;
+}
+</style>
+
+<div class="spacer"></div>
+<div id="container"><div id="target"></div></div>
+
+<script>
+function tryToScroll() {
+ location.href += "#target";
+ requestAnimationFrame(takeScreenshot);
+}
+
+function runTest() {
+ container.classList.add("hidden");
+ requestAnimationFrame(tryToScroll);
+}
+
+window.onload = () => { requestAnimationFrame(runTest); };
+</script>
+</html>
