diff options
Diffstat (limited to 'layout/reftests/z-index')
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> |