summaryrefslogtreecommitdiffstats
path: root/layout/reftests/z-index
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 17:32:43 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 17:32:43 +0000
commit6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch)
treea68f146d7fa01f0134297619fbe7e33db084e0aa /layout/reftests/z-index
parentInitial commit. (diff)
downloadthunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.tar.xz
thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.zip
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/z-index')
-rw-r--r--layout/reftests/z-index/480053-1-ref.html7
-rw-r--r--layout/reftests/z-index/480053-1.html7
-rw-r--r--layout/reftests/z-index/overlayscrollbar-sorting-1.html26
-rw-r--r--layout/reftests/z-index/overlayscrollbar-sorting-2.html38
-rw-r--r--layout/reftests/z-index/overlayscrollbar-sorting-3.html33
-rw-r--r--layout/reftests/z-index/overlayscrollbar-sorting-4.html35
-rw-r--r--layout/reftests/z-index/overlayscrollbar-sorting-5.html43
-rw-r--r--layout/reftests/z-index/overlayscrollbar-sorting-ref-hidden.html24
-rw-r--r--layout/reftests/z-index/overlayscrollbar-sorting-ref-visible.html24
-rw-r--r--layout/reftests/z-index/reftest.list12
-rw-r--r--layout/reftests/z-index/stacking-context-backface-visibility.html17
-rw-r--r--layout/reftests/z-index/stacking-context-common.css26
-rw-r--r--layout/reftests/z-index/stacking-context-no.html11
-rw-r--r--layout/reftests/z-index/stacking-context-perspective.html17
-rw-r--r--layout/reftests/z-index/stacking-context-yes.html16
-rw-r--r--layout/reftests/z-index/z-index-1-ref.html59
-rw-r--r--layout/reftests/z-index/z-index-1.html74
17 files changed, 469 insertions, 0 deletions
diff --git a/layout/reftests/z-index/480053-1-ref.html b/layout/reftests/z-index/480053-1-ref.html
new file mode 100644
index 0000000000..c6c8782a59
--- /dev/null
+++ b/layout/reftests/z-index/480053-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div style="overflow:scroll; width:300px; height:100px; background-color:lime;"></div>
+<div style="background-color:yellow; width:300px; height:100px; margin-top:-50px; position:relative; z-index:1;"></div>
+</body>
+</html>
diff --git a/layout/reftests/z-index/480053-1.html b/layout/reftests/z-index/480053-1.html
new file mode 100644
index 0000000000..03ef8b815f
--- /dev/null
+++ b/layout/reftests/z-index/480053-1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div style="overflow:scroll; width:300px; height:100px; background-color:lime;"></div>
+<div style="background-color:yellow; width:300px; height:100px; margin-top:-50px"></div>
+</body>
+</html>
diff --git a/layout/reftests/z-index/overlayscrollbar-sorting-1.html b/layout/reftests/z-index/overlayscrollbar-sorting-1.html
new file mode 100644
index 0000000000..4e332da5dc
--- /dev/null
+++ b/layout/reftests/z-index/overlayscrollbar-sorting-1.html
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that overlay scrollbars are on top of positioned content</title>
+
+<style>
+
+#outer {
+ width: 200px;
+ height: 200px;
+ overflow: auto;
+}
+
+#content {
+ height: 400px;
+ background: cyan;
+ position: relative;
+ z-index: 1;
+}
+
+</style>
+
+<div id="outer"><div id="content"></div></div>
diff --git a/layout/reftests/z-index/overlayscrollbar-sorting-2.html b/layout/reftests/z-index/overlayscrollbar-sorting-2.html
new file mode 100644
index 0000000000..1272433775
--- /dev/null
+++ b/layout/reftests/z-index/overlayscrollbar-sorting-2.html
@@ -0,0 +1,38 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that overlay scrollbars are not covered by overlapping non-positioned siblings</title>
+
+<style>
+
+#outer {
+ width: 200px;
+ height: 200px;
+ overflow: auto;
+ background: cyan;
+}
+
+#content {
+ height: 400px;
+}
+
+/* This test has different behavior depending on the type of scrollbar used.
+ * We want the scrollbar to be visible. But for non-overlay scrollbars, the
+ * cover would cover them so we disable the cover.
+ */
+@media all and (-moz-overlay-scrollbars) {
+ #cover {
+ margin-top: -200px;
+ width: 200px;
+ height: 200px;
+ background: cyan;
+ }
+}
+
+</style>
+
+<div id="outer"><div id="content"></div></div>
+<div id="cover"></div>
diff --git a/layout/reftests/z-index/overlayscrollbar-sorting-3.html b/layout/reftests/z-index/overlayscrollbar-sorting-3.html
new file mode 100644
index 0000000000..eb3e0dc165
--- /dev/null
+++ b/layout/reftests/z-index/overlayscrollbar-sorting-3.html
@@ -0,0 +1,33 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that overlay scrollbars are covered by overlapping positioned siblings</title>
+
+<style>
+
+#outer {
+ width: 200px;
+ height: 200px;
+ overflow: auto;
+ background: cyan;
+}
+
+#content {
+ height: 400px;
+}
+
+#cover {
+ margin-top: -200px;
+ width: 200px;
+ height: 200px;
+ background: cyan;
+ position: relative;
+}
+
+</style>
+
+<div id="outer"><div id="content"></div></div>
+<div id="cover"></div>
diff --git a/layout/reftests/z-index/overlayscrollbar-sorting-4.html b/layout/reftests/z-index/overlayscrollbar-sorting-4.html
new file mode 100644
index 0000000000..e1f9c07cda
--- /dev/null
+++ b/layout/reftests/z-index/overlayscrollbar-sorting-4.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that overlay scrollbars are covered by positioned siblings with higher z-index even when the scrollable frame has a positioned descendant</title>
+
+<style>
+
+#outer {
+ width: 200px;
+ height: 200px;
+ overflow: auto;
+}
+
+#content {
+ height: 400px;
+ background: cyan;
+ position: relative;
+ z-index: 1;
+}
+
+#cover {
+ width: 200px;
+ height: 200px;
+ background: cyan;
+ position: absolute;
+ z-index: 2;
+}
+
+</style>
+
+<div id="cover"></div>
+<div id="outer"><div id="content"></div></div>
diff --git a/layout/reftests/z-index/overlayscrollbar-sorting-5.html b/layout/reftests/z-index/overlayscrollbar-sorting-5.html
new file mode 100644
index 0000000000..c6106f3201
--- /dev/null
+++ b/layout/reftests/z-index/overlayscrollbar-sorting-5.html
@@ -0,0 +1,43 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that overlay scrollbars are on top of positioned siblings when the scrollable frame has a positioned descendant that's higher than the sibling</title>
+
+<style>
+
+#outer {
+ width: 200px;
+ height: 200px;
+ overflow: auto;
+}
+
+#content {
+ height: 400px;
+ background: cyan;
+ position: relative;
+ z-index: 3;
+}
+
+/* This test has different behavior depending on the type of scrollbar used.
+ * We want the scrollbar to be visible. When overlay scrollbars are used,
+ * they should be visible even when #cover gets between #outer and #content,
+ * but for non-overlay scrollbars, that would cover them so we disable the
+ * cover.
+ */
+@media all and (-moz-overlay-scrollbars) {
+ #cover {
+ width: 200px;
+ height: 200px;
+ background: cyan;
+ position: absolute;
+ z-index: 2;
+ }
+}
+
+</style>
+
+<div id="cover"></div>
+<div id="outer"><div id="content"></div></div>
diff --git a/layout/reftests/z-index/overlayscrollbar-sorting-ref-hidden.html b/layout/reftests/z-index/overlayscrollbar-sorting-ref-hidden.html
new file mode 100644
index 0000000000..7dcd8585a5
--- /dev/null
+++ b/layout/reftests/z-index/overlayscrollbar-sorting-ref-hidden.html
@@ -0,0 +1,24 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Reference without scrollbar</title>
+
+<style>
+
+#outer {
+ width: 200px;
+ height: 200px;
+ overflow: auto;
+ background: cyan;
+}
+
+#content {
+ height: 0px;
+}
+
+</style>
+
+<div id="outer"><div id="content"></div></div>
diff --git a/layout/reftests/z-index/overlayscrollbar-sorting-ref-visible.html b/layout/reftests/z-index/overlayscrollbar-sorting-ref-visible.html
new file mode 100644
index 0000000000..f9424cd976
--- /dev/null
+++ b/layout/reftests/z-index/overlayscrollbar-sorting-ref-visible.html
@@ -0,0 +1,24 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Reference with scrollbar</title>
+
+<style>
+
+#outer {
+ width: 200px;
+ height: 200px;
+ overflow: auto;
+ background: cyan;
+}
+
+#content {
+ height: 400px;
+}
+
+</style>
+
+<div id="outer"><div id="content"></div></div>
diff --git a/layout/reftests/z-index/reftest.list b/layout/reftests/z-index/reftest.list
new file mode 100644
index 0000000000..3e0d60cc63
--- /dev/null
+++ b/layout/reftests/z-index/reftest.list
@@ -0,0 +1,12 @@
+== 480053-1.html 480053-1-ref.html
+== z-index-1.html z-index-1-ref.html
+!= stacking-context-yes.html stacking-context-no.html
+fuzzy(0-1,0-1500) == stacking-context-perspective.html stacking-context-yes.html
+== stacking-context-backface-visibility.html stacking-context-no.html
+
+fails-if(Android&&!asyncPan) != overlayscrollbar-sorting-ref-visible.html overlayscrollbar-sorting-ref-hidden.html
+random-if(transparentScrollbars) == overlayscrollbar-sorting-1.html overlayscrollbar-sorting-ref-visible.html
+== overlayscrollbar-sorting-2.html overlayscrollbar-sorting-ref-visible.html
+== overlayscrollbar-sorting-3.html overlayscrollbar-sorting-ref-hidden.html
+== overlayscrollbar-sorting-4.html overlayscrollbar-sorting-ref-hidden.html
+random-if(transparentScrollbars) == overlayscrollbar-sorting-5.html overlayscrollbar-sorting-ref-visible.html
diff --git a/layout/reftests/z-index/stacking-context-backface-visibility.html b/layout/reftests/z-index/stacking-context-backface-visibility.html
new file mode 100644
index 0000000000..c4bccc7a56
--- /dev/null
+++ b/layout/reftests/z-index/stacking-context-backface-visibility.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<meta charset="UTF-8">
+<title>Does 'backface-visibility' create a stacking context?</title>
+<link rel="stylesheet" href="stacking-context-common.css">
+<style>
+.backface-visibility {
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+}
+</style>
+<div class="contain">
+ <div class="maybesc backface-visibility">
+ <div class="inner1"></div>
+ <div class="inner3"></div>
+ </div>
+ <div class="intruder"></div>
+</div>
diff --git a/layout/reftests/z-index/stacking-context-common.css b/layout/reftests/z-index/stacking-context-common.css
new file mode 100644
index 0000000000..1f4f093812
--- /dev/null
+++ b/layout/reftests/z-index/stacking-context-common.css
@@ -0,0 +1,26 @@
+.contain, .maybesc {
+ width: 100px;
+ height: 100px;
+}
+.contain, .maybesc {
+ position: relative;
+}
+.inner1, .inner3, .intruder {
+ position: absolute;
+ top: 0; left: 0; bottom: 0; right: 0;
+}
+.inner1 {
+ left: 5px; right: 30px;
+ background: rgba(0, 255, 255, 0.5); /* aqua */
+ z-index: 1;
+}
+.inner3 {
+ left: 30px; right: 5px;
+ background: rgba(255, 255, 0, 0.5); /* yellow */
+ z-index: 3;
+}
+.intruder {
+ top: 20px; bottom: 20px;
+ background: rgba(255, 0, 255, 0.5); /* fuchsia */
+ z-index: 2;
+}
diff --git a/layout/reftests/z-index/stacking-context-no.html b/layout/reftests/z-index/stacking-context-no.html
new file mode 100644
index 0000000000..168a1761de
--- /dev/null
+++ b/layout/reftests/z-index/stacking-context-no.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<meta charset="UTF-8">
+<title>Reference for things that do not create a stacking context</title>
+<link rel="stylesheet" href="stacking-context-common.css">
+<div class="contain">
+ <div class="maybesc">
+ <div class="inner1"></div>
+ <div class="inner3"></div>
+ </div>
+ <div class="intruder"></div>
+</div>
diff --git a/layout/reftests/z-index/stacking-context-perspective.html b/layout/reftests/z-index/stacking-context-perspective.html
new file mode 100644
index 0000000000..a9b99c86fc
--- /dev/null
+++ b/layout/reftests/z-index/stacking-context-perspective.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<meta charset="UTF-8">
+<title>Does 'perspective' create a stacking context?</title>
+<link rel="stylesheet" href="stacking-context-common.css">
+<style>
+.perspective {
+ -webkit-perspective: 200px;
+ perspective: 200px;
+}
+</style>
+<div class="contain">
+ <div class="maybesc perspective">
+ <div class="inner1"></div>
+ <div class="inner3"></div>
+ </div>
+ <div class="intruder"></div>
+</div>
diff --git a/layout/reftests/z-index/stacking-context-yes.html b/layout/reftests/z-index/stacking-context-yes.html
new file mode 100644
index 0000000000..bdb9567b54
--- /dev/null
+++ b/layout/reftests/z-index/stacking-context-yes.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<meta charset="UTF-8">
+<title>Reference for things that create a stacking context</title>
+<link rel="stylesheet" href="stacking-context-common.css">
+<style>
+.sc {
+ z-index: 0;
+}
+</style>
+<div class="contain">
+ <div class="maybesc sc">
+ <div class="inner1"></div>
+ <div class="inner3"></div>
+ </div>
+ <div class="intruder"></div>
+</div>
diff --git a/layout/reftests/z-index/z-index-1-ref.html b/layout/reftests/z-index/z-index-1-ref.html
new file mode 100644
index 0000000000..44ee8c979f
--- /dev/null
+++ b/layout/reftests/z-index/z-index-1-ref.html
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+.container {
+ position:absolute;
+ width:400px;
+ height:100px;
+ background-color:yellow;
+ z-index:0;
+}
+.container > div {
+ height:100px;
+ margin-bottom:-100px;
+}
+.negative {
+ width:380px;
+ background-color:blue;
+}
+.block {
+ width:360px;
+ background-color:purple;
+}
+.float {
+ width:340px;
+ background-color:green;
+}
+.inline {
+ width:320px;
+ background-color:pink;
+}
+#outline {
+ height:60px;
+ width:260px;
+ border:20px solid gray;
+}
+.positioned {
+ width:280px;
+ background-color:magenta;
+}
+.positive {
+ width:260px;
+ background-color:orange;
+}
+</style>
+</head>
+<body>
+<div class="container">
+ <div class="negative"></div>
+ <div class="block"></div>
+ <div class="float"></div>
+ <div class="inline"></div>
+ <div id="outline"></div>
+
+ <div class="positioned"></div>
+ <div class="positive"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/z-index/z-index-1.html b/layout/reftests/z-index/z-index-1.html
new file mode 100644
index 0000000000..a77e890cd3
--- /dev/null
+++ b/layout/reftests/z-index/z-index-1.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: z-index</title>
+ <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#z-index" />
+ <meta name="flags" content="" />
+<style>
+.container {
+ position:absolute;
+ width:400px;
+ height:100px;
+ font-size:0;
+ background-color:yellow;
+ line-height:0;
+ z-index:0;
+}
+.container > div {
+ height:100px;
+ margin-bottom:-100px;
+}
+.negative {
+ width:380px;
+ background-color:blue;
+ position:relative;
+ z-index:-1;
+}
+.block {
+ width:360px;
+ background-color:purple;
+}
+.float {
+ float:left;
+ width:340px;
+ margin-right:-340px;
+ background-color:green;
+}
+.inline {
+ width:320px;
+ display:inline-block;
+ background-color:pink;
+}
+#outline {
+ width:300px;
+ outline:20px solid gray;
+ outline-offset:-20px;
+}
+.positioned {
+ width:280px;
+ background-color:magenta;
+ position:relative;
+}
+.positive {
+ width:260px;
+ background-color:orange;
+ position:relative;
+ z-index:1;
+}
+</style>
+</head>
+<body>
+<div class="container">
+ <div class="positive"></div>
+ <div class="positioned"></div>
+ <div id="outline"></div>
+ <div class="inline"></div>
+ <div class="float"></div>
+
+ <div class="block"></div>
+ <div class="negative"></div>
+</div>
+</body>
+</html>