Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-01-24 21:58:06 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 886646 - Part 7: Reftests for sticky positioning. r=dbaron

Browse Source
This commit is contained in:
Corey Ford 2013-09-06 09:35:16 -04:00
parent fecfb82b09
commit cec6f3ffba
83 changed files with 2922 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
layout/reftests/position-sticky/bottom-1-ref.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
height: 100px;
overflow: hidden;
}
#sticky {
position: relative;
height: 10px;
background-color: black;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 20px"></div>
<div id="sticky"></div>
</div>
</body>
</html>

29
layout/reftests/position-sticky/bottom-1.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - bottom, normal position</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="bottom-1-ref.html">
<meta name="assert" content="Bottom-sticky with a small amount of content above: should stay in its normal position">
<style>
#scroll {
height: 100px;
overflow: hidden;
}
#sticky {
position: sticky;
bottom: 10px;
height: 10px;
background-color: black;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 20px"></div>
<div id="sticky"></div>
</div>
</body>
</html>

25
layout/reftests/position-sticky/bottom-2-ref.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
height: 100px;
overflow: hidden;
}
#sticky {
position: relative;
height: 10px;
background-color: black;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 80px"></div>
<div id="sticky"></div>
</div>
</body>
</html>

29
layout/reftests/position-sticky/bottom-2a.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - bottom, normal position</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="bottom-2-ref.html">
<meta name="assert" content="Bottom-sticky with some content above: should stay in its normal position (but will stick beyond this point)">
<style>
#scroll {
height: 100px;
overflow: hidden;
}
#sticky {
position: sticky;
bottom: 10px;
height: 10px;
background-color: black;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 80px"></div>
<div id="sticky"></div>
</div>
</body>
</html>

29
layout/reftests/position-sticky/bottom-2b.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - bottom, stuck</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="bottom-2-ref.html">
<meta name="assert" content="Bottom-sticky with content above: should stick at the bottom of the scroll container">
<style>
#scroll {
height: 100px;
overflow: hidden;
}
#sticky {
position: sticky;
bottom: 10px;
height: 10px;
background-color: black;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 90px"></div>
<div id="sticky"></div>
</div>
</body>
</html>

30
layout/reftests/position-sticky/bottom-2c.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<!-- -->
<html>
<head>
<title>CSS Test: Sticky Positioning - bottom, stuck</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="bottom-2-ref.html">
<meta name="assert" content="Bottom-sticky with content above: should stick at the bottom of the scroll container">
<style>
#scroll {
height: 100px;
overflow: hidden;
}
#sticky {
position: sticky;
bottom: 10px;
height: 10px;
background-color: black;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 200px"></div>
<div id="sticky"></div>
</div>
</body>
</html>

32
layout/reftests/position-sticky/bottom-3-ref.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
height: 100px;
overflow: hidden;
}
#contain {
height: 200px;
background-color: gray;
}
#sticky {
position: relative;
height: 10px;
background-color: black;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 20px"></div>
<div id="contain">
<div style="height: 60px"></div>
<div id="sticky"></div>
</div>
</div>
</body>
</html>

37
layout/reftests/position-sticky/bottom-3.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<!-- -->
<html>
<head>
<title>CSS Test: Sticky Positioning - bottom, stuck</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="bottom-3-ref.html">
<meta name="assert" content="Bottom-sticky with content above and a containing block: should stick to the bottom of the scroll container">
<style>
#scroll {
height: 100px;
overflow: hidden;
}
#contain {
height: 200px;
background-color: gray;
}
#sticky {
position: sticky;
bottom: 10px;
height: 10px;
background-color: black;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 20px"></div>
<div id="contain">
<div style="height: 100px"></div>
<div id="sticky"></div>
</div>
</div>
</body>
</html>

34
layout/reftests/position-sticky/bottom-4-ref.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
height: 100px;
}
#contain {
height: 5px;
background-color: gray;
padding: 10px 0 0;
border-width: 10px 0 0;
border-style: solid;
border-color: #333;
}
#sticky {
height: 3px;
margin-top: 2px;
background-color: black;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 75px"></div>
<div id="contain">
<div id="sticky"></div>
</div>
</div>
</body>
</html>

41
layout/reftests/position-sticky/bottom-4.html Normal file
View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - bottom, contained</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="bottom-3-ref.html">
<meta name="assert" content="Bottom-sticky with too much content above: should stay within the containing block">
<style>
#scroll {
height: 100px;
overflow: hidden;
}
#contain {
height: 200px;
background-color: gray;
padding: 10px 0;
border-width: 10px 0;
border-style: solid;
border-color: #333;
}
#sticky {
position: sticky;
bottom: 10px;
height: 10px;
margin-top: 2px;
background-color: black;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 75px"></div>
<div id="contain">
<div style="height: 100px"></div>
<div id="sticky"></div>
</div>
</div>
</body>
</html>

32
layout/reftests/position-sticky/containing-block-1-ref.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
body {
height: 200px;
margin: 0;
}
#sticky {
position: relative;
top: 100px;
height: 10px;
background-color: black;
}
#absolute {
position: absolute;
top: 5px;
left: 5px;
width: 10px;
height: 10px;
background-color: blue;
}
</style>
<body>
<div id="sticky">
<div id="absolute"></div>
</div>
</body>
</html>

35
layout/reftests/position-sticky/containing-block-1.html Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - absolute containing block</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="containing-block-1-ref.html">
<meta name="assert" content="Sticky positioned elements should establish a containing block for absolutely positioned descendants">
<style>
body {
height: 200px;
margin: 0;
}
#sticky {
position: sticky;
top: 100px;
height: 10px;
background-color: black;
}
#absolute {
position: absolute;
top: 5px;
left: 5px;
width: 10px;
height: 10px;
background-color: blue;
}
</style>
<body>
<div id="sticky">
<div id="absolute"></div>
</div>
</body>
</html>

27
layout/reftests/position-sticky/initial-1-ref.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
body {
height: 100px;
margin: 0;
/* Without this, we do multiple passes of reflow, and
* the sticky element ends up positioned correctly.
*/
overflow-y: scroll;
}
#sticky {
position: relative;
top: 10px;
height: 10px;
margin-bottom: 10px;
background-color: black;
}
</style>
<body>
<div id="sticky"></div>
</body>
</html>

30
layout/reftests/position-sticky/initial-1.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - initial reflow</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="initial-1-ref.html">
<meta name="assert" content="Sticky positioning should be calculated correctly on initial page reflow">
<style>
body {
height: 100px;
margin: 0;
/* Without this, we do multiple passes of reflow, and
* the sticky element ends up positioned correctly.
*/
overflow-y: scroll;
}
#sticky {
position: sticky;
top: 10px;
height: 10px;
margin-bottom: 10px;
background-color: black;
}
</style>
<body>
<div id="sticky"></div>
</body>
</html>

35
layout/reftests/position-sticky/initial-scroll-1-ref.html Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
width: 100px;
height: 100px;
overflow: hidden;
direction: rtl;
}
#inner {
width: 200px;
height: 200px;
direction: ltr;
}
#sticky {
position: relative;
left: 110px;
width: 10px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div id="inner">
<div id="sticky">
</div>
</div>
</div>
</body>
</html>

38
layout/reftests/position-sticky/initial-scroll-1.html Normal file
View File

@ -0,0 +1,38 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - initial scroll position</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="initial-scroll-1-ref.html">
<meta name="assert" content="When the initial scroll position of the scroll container is not (0, 0), a sticky element inside it should be positioned correctly">
<style>
#scroll {
width: 100px;
height: 100px;
overflow: hidden;
direction: rtl;
}
#inner {
width: 200px;
height: 200px;
direction: ltr;
}
#sticky {
position: sticky;
left: 10px;
width: 10px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div id="inner">
<div id="sticky">
</div>
</div>
</div>
</body>
</html>

42
layout/reftests/position-sticky/left-1-ref.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
width: 100px;
height: 100px;
overflow: hidden;
border: 1px solid black;
white-space: nowrap;
}
#scroll div {
display: inline-block;
}
.fill {
width: 100px;
height: 1px;
}
#contain {
width: 200px;
height: 10px;
background-color: gray;
}
#sticky {
width: 10px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div class="fill" style="width: 20px"></div
><div id="contain">
<div id="sticky"></div>
</div
><div class="fill"></div>
</div>
</body>
</html>

51
layout/reftests/position-sticky/left-1.html Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - left, normal position</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="left-1-ref.html">
<meta name="flags" content="dom">
<meta name="assert" content="Sticky-left with not enough scrolling: should be in its normal position">
<style>
#scroll {
width: 100px;
height: 100px;
overflow: hidden;
border: 1px solid black;
white-space: nowrap;
}
#scroll div {
display: inline-block;
}
.fill {
width: 100px;
height: 1px;
}
#contain {
width: 200px;
height: 10px;
background-color: gray;
}
#sticky {
position: sticky;
left: 10px;
width: 10px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div class="fill"></div
><div id="contain">
<div id="sticky"></div>
</div
><div class="fill"></div>
</div>
<script type="text/javascript">
document.getElementById("scroll").scrollLeft = 80;
</script>
</body>
</html>

37
layout/reftests/position-sticky/left-2-ref.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
width: 100px;
height: 100px;
border: 1px solid black;
white-space: nowrap;
}
#scroll div {
display: inline-block;
}
#contain {
width: 100%;
height: 10px;
background-color: gray;
}
#sticky {
position: relative;
left: 10px;
width: 10px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div id="contain">
<div id="sticky"></div>
</div>
</div>
</body>
</html>

51
layout/reftests/position-sticky/left-2.html Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - left, stuck</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="left-2-ref.html">
<meta name="flags" content="dom">
<meta name="assert" content="Sticky-left with scrolling: should stick to the left edge of the scrolling container">
<style>
#scroll {
width: 100px;
height: 100px;
overflow: hidden;
border: 1px solid black;
white-space: nowrap;
}
#scroll div {
display: inline-block;
}
.fill {
width: 100px;
height: 1px;
}
#contain {
width: 200px;
height: 10px;
background-color: gray;
}
#sticky {
position: sticky;
left: 10px;
width: 10px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div class="fill"></div
><div id="contain">
<div id="sticky"></div>
</div
><div class="fill"></div>
</div>
<script type="text/javascript">
document.getElementById("scroll").scrollLeft = 100;
</script>
</body>
</html>

39
layout/reftests/position-sticky/left-3-ref.html Normal file
View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
width: 100px;
height: 100px;
border: 1px solid black;
white-space: nowrap;
}
#scroll div {
display: inline-block;
}
.fill {
width: 100px;
height: 1px;
}
#contain {
width: 5px;
height: 10px;
background-color: gray;
}
#sticky {
width: 5px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div id="contain">
<div id="sticky"></div>
</div>
</div>
</body>
</html>

51
layout/reftests/position-sticky/left-3.html Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - left, contained</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="left-3-ref.html">
<meta name="flags" content="dom">
<meta name="assert" content="Sticky-left with too much scrolling: should stay within the containing block">
<style>
#scroll {
width: 100px;
height: 100px;
overflow: hidden;
border: 1px solid black;
white-space: nowrap;
}
#scroll div {
display: inline-block;
}
.fill {
width: 100px;
height: 1px;
}
#contain {
width: 200px;
height: 10px;
background-color: gray;
}
#sticky {
position: sticky;
left: 10px;
width: 10px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div class="fill"></div
><div id="contain">
<div id="sticky"></div>
</div
><div class="fill"></div>
</div>
<script type="text/javascript">
document.getElementById("scroll").scrollLeft = 295;
</script>
</body>
</html>

42
layout/reftests/position-sticky/left-right-1-ref.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
width: 100px;
height: 100px;
overflow: hidden;
border: 1px solid black;
white-space: nowrap;
}
#scroll div {
display: inline-block;
}
.fill {
width: 100px;
height: 1px;
}
#contain {
width: 200px;
height: 10px;
background-color: gray;
}
#sticky {
position: relative;
right: 20px;
width: 10px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div class="fill"></div
><div id="sticky"></div
><div class="fill"></div>
</div>
</body>
</html>

46
layout/reftests/position-sticky/left-right-1.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - left+right, at left</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="left-right-1-ref.html">
<meta name="assert" content="Left+right sticky, scrolled to the left: should act as right-sticky">
<style>
#scroll {
width: 100px;
height: 100px;
overflow: hidden;
border: 1px solid black;
white-space: nowrap;
}
#scroll div {
display: inline-block;
}
.fill {
width: 100px;
height: 1px;
}
#contain {
width: 200px;
height: 10px;
background-color: gray;
}
#sticky {
position: sticky;
left: 10px;
right: 10px;
width: 10px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div class="fill"></div
><div id="sticky"></div
><div class="fill"></div>
</div>
</body>
</html>

33
layout/reftests/position-sticky/left-right-2-ref.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
width: 100px;
height: 100px;
border: 1px solid black;
white-space: nowrap;
}
#scroll div {
display: inline-block;
}
.fill {
width: 100px;
height: 1px;
}
#sticky {
width: 10px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div class="fill" style="width: 50px"></div
><div id="sticky"></div>
</div>
</body>
</html>

50
layout/reftests/position-sticky/left-right-2.html Normal file
View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - left+right, at middle</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="left-right-2-ref.html">
<meta name="flags" content="dom">
<meta name="assert" content="Left+right sticky, scrolled to the middle: should stay in its normal position">
<style>
#scroll {
width: 100px;
height: 100px;
overflow: hidden;
border: 1px solid black;
white-space: nowrap;
}
#scroll div {
display: inline-block;
}
.fill {
width: 100px;
height: 1px;
}
#contain {
width: 200px;
height: 10px;
background-color: gray;
}
#sticky {
position: sticky;
left: 10px;
right: 10px;
width: 10px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div class="fill"></div
><div id="sticky"></div
><div class="fill"></div>
</div>
<script type="text/javascript">
document.getElementById("scroll").scrollLeft = 50;
</script>
</body>
</html>

34
layout/reftests/position-sticky/left-right-3-ref.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
width: 100px;
height: 100px;
border: 1px solid black;
white-space: nowrap;
}
#scroll div {
display: inline-block;
}
.fill {
width: 100px;
height: 1px;
}
#sticky {
position: relative;
left: 10px;
width: 10px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div id="sticky"></div>
</div>
</body>
</html>

50
layout/reftests/position-sticky/left-right-3.html Normal file
View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - left+right, at right</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="left-right-3-ref.html">
<meta name="flags" content="dom">
<meta name="assert" content="Left+right sticky, scrolled to the right: should act as left-sticky">
<style>
#scroll {
width: 100px;
height: 100px;
overflow: hidden;
border: 1px solid black;
white-space: nowrap;
}
#scroll div {
display: inline-block;
}
.fill {
width: 100px;
height: 1px;
}
#contain {
width: 200px;
height: 10px;
background-color: gray;
}
#sticky {
position: sticky;
left: 10px;
right: 10px;
width: 10px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div class="fill"></div
><div id="sticky"></div
><div class="fill"></div>
</div>
<script type="text/javascript">
document.getElementById("scroll").scrollLeft = 110;
</script>
</body>
</html>

31
layout/reftests/position-sticky/margin-1-ref.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
height: 100px;
}
#contain {
height: 20px;
background-color: gray;
}
#sticky {
position: relative;
top: 5px;
height: 10px;
margin-bottom: 5px;
background-color: black;
}
</style>
</head>
<body>
<div id="scroll">
<div id="contain">
<div id="sticky"></div>
</div>
</div>
</body>
</html>

41
layout/reftests/position-sticky/margin-1.html Normal file
View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - element margin</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="margin-1-ref.html">
<meta name="flags" content="dom">
<meta name="assert" content="Sticky-top with margin-bottom on the sticky element: the element's margin box should stay within the containing block">
<style>
#scroll {
height: 100px;
overflow: hidden;
}
#contain {
height: 300px;
background-color: gray;
}
#sticky {
position: sticky;
top: 10px;
height: 10px;
margin-bottom: 5px;
background-color: black;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 20px"></div>
<div id="contain">
<div id="sticky"></div>
</div>
<div style="height: 100px"></div>
</div>
<script type="application/javascript">
document.getElementById("scroll").scrollTop = 300;
</script>
</body>
</html>

25
layout/reftests/position-sticky/overconstrained-1-ref.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
height: 100px;
overflow: hidden;
}
#sticky {
height: 81px;
background-color: black;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 95px"></div>
<div id="sticky"></div>
<div style="height: 100px"></div>
</div>
</body>
</html>

31
layout/reftests/position-sticky/overconstrained-1.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - top+bottom, overconstrained</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="overconstrained-1-ref.html">
<meta name="assert" content="Top+bottom-sticky with a tall element: should not act as bottom-sticky">
<style>
#scroll {
height: 100px;
overflow: hidden;
}
#sticky {
position: sticky;
top: 10px;
bottom: 10px;
height: 81px;
background-color: black;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 95px"></div>
<div id="sticky"></div>
<div style="height: 100px"></div>
</div>
</body>
</html>

40
layout/reftests/position-sticky/overconstrained-2-ref.html Normal file
View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
width: 100px;
height: 100px;
overflow: hidden;
border: 1px solid black;
white-space: nowrap;
}
#scroll div {
display: inline-block;
}
.fill {
width: 99px;
height: 1px;
}
#contain {
width: 200px;
height: 10px;
background-color: gray;
}
#sticky {
width: 81px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div class="fill"></div
><div id="sticky"></div
><div class="fill"></div>
</div>
</body>
</html>

46
layout/reftests/position-sticky/overconstrained-2.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - left+right, overconstrained</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="overconstrained-2-ref.html">
<meta name="assert" content="Left+right-sticky with a wide element in an LTR container: should not act as right-sticky">
<style>
#scroll {
width: 100px;
height: 100px;
overflow: hidden;
border: 1px solid black;
white-space: nowrap;
}
#scroll div {
display: inline-block;
}
.fill {
width: 99px;
height: 1px;
}
#contain {
width: 200px;
height: 10px;
background-color: gray;
}
#sticky {
position: sticky;
left: 10px;
right: 10px;
width: 81px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div class="fill"></div
><div id="sticky"></div
><div class="fill"></div>
</div>
</body>
</html>

28
layout/reftests/position-sticky/overconstrained-3-ref.html Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
width: 100px;
height: 100px;
border: 1px solid black;
white-space: nowrap;
}
#scroll div {
display: inline-block;
}
#sticky {
width: 1px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div id="sticky"></div>
</div>
</body>
</html>

51
layout/reftests/position-sticky/overconstrained-3.html Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - left+right, overconstrained</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="overconstrained-3-ref.html">
<meta name="flags" content="dom">
<meta name="assert" content="Left+right-sticky with a wide element in an RTL container: should not act as left-sticky">
<style>
#scroll {
width: 100px;
height: 100px;
overflow: hidden;
border: 1px solid black;
white-space: nowrap;
direction: rtl;
}
#scroll div {
display: inline-block;
}
.fill {
width: 99px;
height: 1px;
}
#contain {
width: 200px;
height: 10px;
background-color: gray;
}
#sticky {
position: sticky;
left: 10px;
right: 10px;
width: 81px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div class="fill"></div
><div id="sticky"></div
><div class="fill"></div>
</div>
<script type="text/javascript">
document.getElementById("scroll").scrollLeft = 179;
</script>
</body>
</html>

20
layout/reftests/position-sticky/overcontain-1-ref.html Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
body {
margin: 0;
}
#sticky {
height: 10px;
margin-bottom: 10px;
background-color: black;
}
</style>
<body>
<div id="sticky"></div>
</body>
</html>

25
layout/reftests/position-sticky/overcontain-1.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - containment and normal position</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="overcontain-1-ref.html">
<meta name="assert" content="Keeping the element's margin box within the containing block's content box should never move the element back past its normal position">
<style>
body {
margin: 0;
}
#sticky {
position: sticky;
top: 10px;
height: 10px;
margin-bottom: 10px;
background-color: black;
}
</style>
<body>
<div id="sticky"></div>
</body>
</html>

40
layout/reftests/position-sticky/padding-1-ref.html Normal file
View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
body {
overflow: scroll;
}
#scroll {
width: 130px;
height: 80px;
overflow: scroll;
border: 10px solid black;
padding: 10px;
}
#inner {
position: relative;
width: 100%;
height: 100%;
}
#sticky {
position: absolute;
width: 10px;
height: 10px;
top: 50%;
left: 50%;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div id="inner">
<div id="sticky">
</div>
</div>
</div>
</body>
</html>

37
layout/reftests/position-sticky/padding-1.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - percentage offsets</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="padding-1-ref.html">
<meta name="assert" content="Percentage offsets should be resolved against the content box of the scrolling container">
<style>
body {
/* Make sure it works on the first pass of reflow */
overflow: scroll;
}
#scroll {
width: 130px;
height: 80px;
overflow: scroll;
border: 10px solid black;
padding: 10px;
}
#sticky {
position: sticky;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div id="sticky">
</div>
</div>
</body>
</html>

29
layout/reftests/position-sticky/padding-2-ref.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
width: 80px;
height: 80px;
overflow: hidden;
border: 10px solid black;
padding: 10px;
}
#sticky {
position: relative;
width: 10px;
height: 10px;
top: 20px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div id="sticky">
</div>
</div>
</body>
</html>

41
layout/reftests/position-sticky/padding-2.html Normal file
View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - offsets reference</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="padding-2-ref.html">
<meta name="flags" content="dom">
<meta name="assert" content="Offsets should position the element with respect to the content box of the scrolling container">
<style>
#scroll {
width: 80px;
height: 80px;
overflow: hidden;
border: 10px solid black;
padding: 10px;
}
#sticky {
position: sticky;
width: 10px;
height: 10px;
top: 20px;
background-color: black;
}
.fill {
width: 1000px;
height: 1000px;
}
</style>
<body>
<div id="scroll">
<div class="fill"></div>
<div id="sticky"></div>
<div class="fill"></div>
</div>
<script type="application/javascript">
document.getElementById('scroll').scrollTop = 1100;
</script>
</body>
</html>

40
layout/reftests/position-sticky/padding-3-ref.html Normal file
View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
body {
font-size: 0px;
}
#scroll {
width: 80px;
height: 80px;
overflow: scroll;
border: 10px solid black;
padding: 10px;
}
#inner {
position: relative;
width: 100%;
height: 100%;
}
#sticky {
position: absolute;
width: 10px;
height: 10px;
bottom: 20px;
right: 20px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div id="inner">
<div style="width: 100px; height: 100px"></div>
<div id="sticky"></div>
</div>
</div>
</body>
</html>

39
layout/reftests/position-sticky/padding-3.html Normal file
View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - offsets reference, bottom/right</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="padding-3-ref.html">
<meta name="assert" content="Bottom/right offsets should position the element with respect to the content box of the scrolling container">
<style>
body {
font-size: 0px;
}
#scroll {
width: 80px;
height: 80px;
overflow: scroll;
border: 10px solid black;
padding: 10px;
white-space: nowrap;
}
#sticky {
position: sticky;
bottom: 20px;
right: 20px;
display: inline-block;
width: 10px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div style="height: 90px; width: 100px"></div>
<div style="display: inline-block; width: 90px; height: 10px"></div
><div id="sticky"></div>
</div>
</body>
</html>

20
layout/reftests/position-sticky/pref-1-disabled-ref.html Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
body {
margin: 0;
line-height: 1;
}
</style>
</head>
<body>
<p>
"position: sticky" is:
<div>disabled</div>
</p>
</body>
</html>

20
layout/reftests/position-sticky/pref-1-enabled-ref.html Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
body {
margin: 0;
line-height: 1;
}
</style>
</head>
<body>
<p>
"position: sticky" is:
<div>enabled</div>
</p>
</body>
</html>

34
layout/reftests/position-sticky/pref-1.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - support test</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="pref-1-ref.html">
<meta name="assert" content="This test indicates whether sticky positioning is enabled.">
<style>
body {
margin: 0;
line-height: 1;
}
#sticky {
position: absolute;
position: sticky;
left: -100%;
width: 100%;
padding-bottom: 1em;
margin-bottom: -1em;
background: white;
}
</style>
</head>
<body>
<p>
"position: sticky" is:
<!-- If sticky positioned, this will cover up "disabled" below: -->
<div id="sticky">enabled</div>
<div>disabled</div>
</p>
</body>
</html>

43
layout/reftests/position-sticky/reftest.list Normal file
View File

@ -0,0 +1,43 @@
test-pref(layout.css.sticky.enabled,false) == pref-1.html pref-1-disabled-ref.html
test-pref(layout.css.sticky.enabled,true) == pref-1.html pref-1-enabled-ref.html
default-preferences pref(layout.css.sticky.enabled,true)
== top-1.html top-1-ref.html
fuzzy-if(Android,4,914) == top-2.html top-2-ref.html
fuzzy-if(Android,4,2729) == top-3.html top-3-ref.html
== top-4.html top-4-ref.html
== top-5.html top-5-ref.html
== top-6.html top-6-ref.html
== bottom-1.html bottom-1-ref.html
== bottom-2a.html bottom-2-ref.html
== bottom-2b.html bottom-2-ref.html
== bottom-2c.html bottom-2-ref.html
== bottom-3.html bottom-3-ref.html
== bottom-4.html bottom-4-ref.html
fuzzy-if(Android,2,4) == left-1.html left-1-ref.html
fuzzy-if(Android,2,4) == left-2.html left-2-ref.html
== left-3.html left-3-ref.html
== right-1.html right-1-ref.html
fuzzy-if(Android,2,4) == right-2.html right-2-ref.html
fuzzy-if(Android,2,4) == right-3.html right-3-ref.html
== margin-1.html margin-1-ref.html
== padding-1.html padding-1-ref.html
== padding-2.html padding-2-ref.html
== padding-3.html padding-3-ref.html
== overcontain-1.html overcontain-1-ref.html
== initial-1.html initial-1-ref.html
== initial-scroll-1.html initial-scroll-1-ref.html
== scrollframe-reflow-1.html scrollframe-reflow-1-ref.html
== scrollframe-reflow-2.html scrollframe-reflow-2-ref.html
== scrollframe-auto-1.html scrollframe-auto-1-ref.html
== stacking-context-1.html stacking-context-1-ref.html
== top-bottom-1.html top-bottom-1-ref.html
== top-bottom-2.html top-bottom-2-ref.html
== top-bottom-3.html top-bottom-3-ref.html
== left-right-1.html left-right-1-ref.html
== left-right-2.html left-right-2-ref.html
== left-right-3.html left-right-3-ref.html
== containing-block-1.html containing-block-1-ref.html
== overconstrained-1.html overconstrained-1-ref.html
== overconstrained-2.html overconstrained-2-ref.html
== overconstrained-3.html overconstrained-3-ref.html

40
layout/reftests/position-sticky/right-1-ref.html Normal file
View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
width: 100px;
height: 100px;
border: 1px solid black;
white-space: nowrap;
}
#scroll div {
display: inline-block;
}
.fill {
width: 100px;
height: 1px;
}
#contain {
width: 5px;
height: 10px;
background-color: gray;
}
#sticky {
width: 5px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div class="fill" style="width: 95px"></div
><div id="contain">
<div id="sticky"></div>
</div>
</div>
</body>
</html>

54
layout/reftests/position-sticky/right-1.html Normal file
View File

@ -0,0 +1,54 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - right, stuck</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="right-1-ref.html">
<meta name="flags" content="dom">
<meta name="assert" content="Sticky-right scrolled to the left: should stick to the right edge of the scrolling container">
<style>
#scroll {
width: 100px;
height: 100px;
overflow: hidden;
border: 1px solid black;
white-space: nowrap;
}
#scroll div {
display: inline-block;
}
.fill {
width: 100px;
height: 1px;
}
#contain {
width: 200px;
height: 10px;
background-color: gray;
/* This puts the sticky element's "normal position" at
the right side of the containing block. */
direction: rtl;
}
#sticky {
position: sticky;
right: 10px;
width: 10px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div class="fill"></div
><div id="contain">
<div id="sticky"></div>
</div
><div class="fill"></div>
</div>
<script type="text/javascript">
document.getElementById("scroll").scrollLeft = 5;
</script>
</body>
</html>

41
layout/reftests/position-sticky/right-2-ref.html Normal file
View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
width: 100px;
height: 100px;
border: 1px solid black;
white-space: nowrap;
}
#scroll div {
display: inline-block;
}
.fill {
width: 100px;
height: 1px;
}
#contain {
width: 100px;
height: 10px;
background-color: gray;
}
#sticky {
position: relative;
left: 80px;
width: 10px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div id="contain">
<div id="sticky"></div>
</div>
</div>
</body>
</html>

54
layout/reftests/position-sticky/right-2.html Normal file
View File

@ -0,0 +1,54 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - right, stuck</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="right-2-ref.html">
<meta name="flags" content="dom">
<meta name="assert" content="Sticky-right scrolled to the middle: should stick to the right edge of the scrolling container">
<style>
#scroll {
width: 100px;
height: 100px;
overflow: hidden;
border: 1px solid black;
white-space: nowrap;
}
#scroll div {
display: inline-block;
}
.fill {
width: 100px;
height: 1px;
}
#contain {
width: 200px;
height: 10px;
background-color: gray;
/* This puts the sticky element's "normal position" at
the right side of the containing block. */
direction: rtl;
}
#sticky {
position: sticky;
right: 10px;
width: 10px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div class="fill"></div
><div id="contain">
<div id="sticky"></div>
</div
><div class="fill"></div>
</div>
<script type="text/javascript">
document.getElementById("scroll").scrollLeft = 200;
</script>
</body>
</html>

41
layout/reftests/position-sticky/right-3-ref.html Normal file
View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
width: 100px;
height: 100px;
border: 1px solid black;
white-space: nowrap;
}
#scroll div {
display: inline-block;
}
.fill {
width: 100px;
height: 1px;
}
#contain {
width: 80px;
height: 10px;
background-color: gray;
}
#sticky {
position: relative;
left: 70px;
width: 10px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div id="contain">
<div id="sticky"></div>
</div>
</div>
</body>
</html>

54
layout/reftests/position-sticky/right-3.html Normal file
View File

@ -0,0 +1,54 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - right, contained</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="right-3-ref.html">
<meta name="flags" content="dom">
<meta name="assert" content="Sticky-right with too much scrolling: should stay within the containing block">
<style>
#scroll {
width: 100px;
height: 100px;
overflow: hidden;
border: 1px solid black;
white-space: nowrap;
}
#scroll div {
display: inline-block;
}
.fill {
width: 100px;
height: 1px;
}
#contain {
width: 200px;
height: 10px;
background-color: gray;
/* This puts the sticky element's "normal position" at
the right side of the containing block. */
direction: rtl;
}
#sticky {
position: sticky;
right: 10px;
width: 10px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div class="fill"></div
><div id="contain">
<div id="sticky"></div>
</div
><div class="fill"></div>
</div>
<script type="text/javascript">
document.getElementById("scroll").scrollLeft = 220;
</script>
</body>
</html>

34
layout/reftests/position-sticky/scrollframe-auto-1-ref.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<!-- Percentage sticky offsets should be computed correctly when
- the scroll container is auto-sized -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
body {
overflow: scroll;
}
#scroll {
height: auto;
overflow: hidden;
border: 1px solid black;
}
#sticky {
position: relative;
height: 10px;
top: 105px;
background-color: black;
}
.fill {
height: 200px;
}
</style>
<body>
<div id="scroll">
<div id="sticky"></div>
<div class="fill"></div>
</div>
</body>
</html>

36
layout/reftests/position-sticky/scrollframe-auto-1.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<!-- Percentage sticky offsets should be computed correctly when
- the scroll container is auto-sized -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="scrollframe-auto-1-ref.html">
<style>
body {
/* even on initial reflow */
overflow: scroll;
}
#scroll {
height: auto;
overflow: hidden;
border: 1px solid black;
}
#sticky {
position: sticky;
height: 10px;
top: 50%;
background-color: black;
}
.fill {
height: 200px;
}
</style>
<body>
<div id="scroll">
<div id="sticky"></div>
<div class="fill"></div>
</div>
</body>
</html>

25
layout/reftests/position-sticky/scrollframe-reflow-1-ref.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
height: 120px;
overflow: hidden;
border: 1px solid black;
}
#sticky {
position: relative;
top: 100px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div id="sticky"></div>
</div>
</body>
</html>

36
layout/reftests/position-sticky/scrollframe-reflow-1.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<!-- When the scroll container is resized (without reflowing its contents),
- sticky elements inside it should be repositioned -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="scrollframe-reflow-1-ref.html">
<meta name="flags" content="dom">
<style>
#scroll {
height: 100px;
overflow: hidden;
border: 1px solid black;
}
#sticky {
position: sticky;
height: 10px;
bottom: 10px;
background-color: black;
}
.fill {
height: 1000px;
}
</style>
<body>
<div id="scroll">
<div class="fill"></div>
<div id="sticky"></div>
</div>
<script type="text/javascript">
document.getElementById("scroll").style.height = "120px";
</script>
</body>
</html>

25
layout/reftests/position-sticky/scrollframe-reflow-2-ref.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
height: 120px;
overflow: hidden;
border: 1px solid black;
}
#sticky {
position: relative;
top: 60px;
height: 10px;
background-color: black;
}
</style>
<body>
<div id="scroll">
<div id="sticky"></div>
</div>
</body>
</html>

36
layout/reftests/position-sticky/scrollframe-reflow-2.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<!-- When the scroll container is resized (without reflowing its contents),
- offsets for sticky elements inside it should be recomputed -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="scrollframe-reflow-2-ref.html">
<meta name="flags" content="dom">
<style>
#scroll {
height: 100px;
overflow: hidden;
border: 1px solid black;
}
#sticky {
position: sticky;
height: 10px;
top: 50%;
background-color: black;
}
.fill {
height: 1000px;
}
</style>
<body>
<div id="scroll">
<div id="sticky"></div>
<div class="fill"></div>
</div>
<script type="text/javascript">
document.getElementById("scroll").style.height = "120px";
</script>
</body>
</html>

39
layout/reftests/position-sticky/stacking-context-1-ref.html Normal file
View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
body {
margin: 0;
}
div {
width: 100px;
height: 100px;
}
#static {
position: absolute;
top: 20px;
left: 20px;
background-color: blue;
z-index: 3;
}
#sticky {
background-color: black;
}
#inner {
position: relative;
top: 40px;
left: 40px;
background-color: gray;
z-index: 2;
}
</style>
<body>
<div id="static"></div>
<div id="sticky">
<div id="inner"></div>
</div>
</body>
</html>

45
layout/reftests/position-sticky/stacking-context-1.html Normal file
View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - stacking context</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="stacking-context-1-ref.html">
<meta name="assert" content="Sticky positioning should establish a stacking context">
<style>
body {
margin: 0;
}
div {
width: 100px;
height: 100px;
}
#static {
position: absolute;
top: 20px;
left: 20px;
background-color: blue;
z-index: 1;
}
#sticky {
position: sticky;
top: 0;
left: 0;
background-color: black;
}
#inner {
position: relative;
top: 40px;
left: 40px;
background-color: gray;
z-index: 2;
}
</style>
<body>
<div id="static"></div>
<div id="sticky">
<div id="inner"></div>
</div>
</body>
</html>

34
layout/reftests/position-sticky/top-1-ref.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
height: 100px;
}
#contain {
height: 80px;
background-color: gray;
}
#sticky {
height: 10px;
background-color: black;
}
#static {
height: 10px;
background-color: blue;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 20px"></div>
<div id="contain">
<div id="sticky"></div>
<div id="static"></div>
</div>
</div>
</body>
</html>

41
layout/reftests/position-sticky/top-1.html Normal file
View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - top, normal position</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="top-1-ref.html">
<meta name="assert" content="Sticky-top with no scrolling: should be in its normal position">
<style>
#scroll {
height: 100px;
overflow: hidden;
}
#contain {
height: 300px;
background-color: gray;
}
#sticky {
position: sticky;
top: 10px;
height: 10px;
background-color: black;
}
#static {
height: 10px;
background-color: blue;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 20px"></div>
<div id="contain">
<div id="sticky"></div>
<div id="static"></div>
</div>
<div style="height: 100px"></div>
</div>
</body>
</html>

34
layout/reftests/position-sticky/top-2-ref.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
height: 100px;
}
#contain {
height: 90px;
background-color: gray;
}
#sticky {
height: 10px;
background-color: black;
}
#static {
height: 10px;
background-color: blue;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 10px"></div>
<div id="contain">
<div id="sticky"></div>
<div id="static"></div>
</div>
</div>
</body>
</html>

45
layout/reftests/position-sticky/top-2.html Normal file
View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - top, normal position</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="top-2-ref.html">
<meta name="flags" content="dom">
<meta name="assert" content="Sticky-top with not enough scrolling: should be in its normal position">
<style>
#scroll {
height: 100px;
overflow: hidden;
}
#contain {
height: 300px;
background-color: gray;
}
#sticky {
position: sticky;
top: 10px;
height: 10px;
background-color: black;
}
#static {
height: 10px;
background-color: blue;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 20px"></div>
<div id="contain">
<div id="sticky"></div>
<div id="static"></div>
</div>
<div style="height: 100px"></div>
</div>
<script type="application/javascript">
document.getElementById("scroll").scrollTop = 10;
</script>
</body>
</html>

38
layout/reftests/position-sticky/top-3-ref.html Normal file
View File

@ -0,0 +1,38 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
height: 100px;
}
#contain {
height: 100px;
background-color: gray;
}
#sticky {
position: relative;
top: 10px;
height: 10px;
background-color: black;
z-index: 1;
}
#static {
position: relative;
bottom: 1px;
height: 10px;
background-color: blue;
}
</style>
</head>
<body>
<div id="scroll">
<div id="contain">
<div id="sticky"></div>
<div id="static"></div>
</div>
</div>
</body>
</html>

45
layout/reftests/position-sticky/top-3.html Normal file
View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - top, stuck</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="top-3-ref.html">
<meta name="flags" content="dom">
<meta name="assert" content="Sticky-top with scrolling: should move to partially cover static positioned sibling">
<style>
#scroll {
height: 100px;
overflow: hidden;
}
#contain {
height: 300px;
background-color: gray;
}
#sticky {
position: sticky;
top: 10px;
height: 10px;
background-color: black;
}
#static {
height: 10px;
background-color: blue;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 20px"></div>
<div id="contain">
<div id="sticky"></div>
<div id="static"></div>
</div>
<div style="height: 100px"></div>
</div>
<script type="application/javascript">
document.getElementById("scroll").scrollTop = 21;
</script>
</body>
</html>

30
layout/reftests/position-sticky/top-4-ref.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
height: 100px;
}
#contain {
height: 20px;
background-color: gray;
}
#sticky {
position: relative;
top: 10px;
height: 10px;
background-color: black;
}
</style>
</head>
<body>
<div id="scroll">
<div id="contain">
<div id="sticky"></div>
</div>
</div>
</body>
</html>

45
layout/reftests/position-sticky/top-4.html Normal file
View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - top, stuck</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="top-4-ref.html">
<meta name="flags" content="dom">
<meta name="assert" content="Sticky-top with more scrolling: should continue to stick to the top of the scroll container">
<style>
#scroll {
height: 100px;
overflow: hidden;
}
#contain {
height: 300px;
background-color: gray;
}
#sticky {
position: sticky;
top: 10px;
height: 10px;
background-color: black;
}
#static {
height: 10px;
background-color: blue;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 20px"></div>
<div id="contain">
<div id="sticky"></div>
<div id="static"></div>
</div>
<div style="height: 100px"></div>
</div>
<script type="application/javascript">
document.getElementById("scroll").scrollTop = 300;
</script>
</body>
</html>

28
layout/reftests/position-sticky/top-5-ref.html Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
height: 100px;
}
#contain {
height: 10px;
background-color: gray;
}
#sticky {
height: 10px;
background-color: black;
}
</style>
</head>
<body>
<div id="scroll">
<div id="contain">
<div id="sticky"></div>
</div>
</div>
</body>
</html>

45
layout/reftests/position-sticky/top-5.html Normal file
View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - top, contained</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="top-5-ref.html">
<meta name="flags" content="dom">
<meta name="assert" content="Sticky-top with too much scrolling: should stay within the containing block">
<style>
#scroll {
height: 100px;
overflow: hidden;
}
#contain {
height: 300px;
background-color: gray;
}
#sticky {
position: sticky;
top: 10px;
height: 10px;
background-color: black;
}
#static {
height: 10px;
background-color: blue;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 20px"></div>
<div id="contain">
<div id="sticky"></div>
<div id="static"></div>
</div>
<div style="height: 100px"></div>
</div>
<script type="application/javascript">
document.getElementById("scroll").scrollTop = 310;
</script>
</body>
</html>

32
layout/reftests/position-sticky/top-6-ref.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
height: 100px;
}
#contain {
height: 5px;
background-color: gray;
padding: 0 0 10px;
border-width: 0 0 10px;
border-style: solid;
border-color: #333;
}
#sticky {
height: 5px;
background-color: black;
}
</style>
</head>
<body>
<div id="scroll">
<div id="contain">
<div id="sticky"></div>
</div>
</div>
</body>
</html>

49
layout/reftests/position-sticky/top-6.html Normal file
View File

@ -0,0 +1,49 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - top, contained</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="top-6-ref.html">
<meta name="flags" content="dom">
<meta name="assert" content="Sticky-top with too much scrolling: should stay within the containing block">
<style>
#scroll {
height: 100px;
overflow: hidden;
}
#contain {
height: 300px;
background-color: gray;
padding: 10px 0;
border-width: 10px 0;
border-style: solid;
border-color: #333;
}
#sticky {
position: sticky;
top: 10px;
height: 10px;
background-color: black;
}
#static {
height: 10px;
background-color: blue;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 20px"></div>
<div id="contain">
<div id="sticky"></div>
<div id="static"></div>
</div>
<div style="height: 100px"></div>
</div>
<script type="application/javascript">
document.getElementById("scroll").scrollTop = 335;
</script>
</body>
</html>

27
layout/reftests/position-sticky/top-bottom-1-ref.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
height: 100px;
overflow: hidden;
}
#sticky {
position: relative;
bottom: 20px;
height: 10px;
background-color: black;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 100px"></div>
<div id="sticky"></div>
<div style="height: 100px"></div>
</div>
</body>
</html>

31
layout/reftests/position-sticky/top-bottom-1.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - top+bottom, at top</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="top-bottom-1-ref.html">
<meta name="assert" content="Top+bottom sticky, scrolled to the top: should act as bottom-sticky">
<style>
#scroll {
height: 100px;
overflow: hidden;
}
#sticky {
position: sticky;
top: 10px;
bottom: 10px;
height: 10px;
background-color: black;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 100px"></div>
<div id="sticky"></div>
<div style="height: 100px"></div>
</div>
</body>
</html>

23
layout/reftests/position-sticky/top-bottom-2-ref.html Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
height: 100px;
}
#sticky {
height: 10px;
background-color: black;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 50px"></div>
<div id="sticky"></div>
</div>
</body>
</html>

35
layout/reftests/position-sticky/top-bottom-2.html Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - top+bottom, at middle</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="top-bottom-2-ref.html">
<meta name="flags" content="dom">
<meta name="assert" content="Top+bottom sticky, scrolled to the middle: should stay in its normal position">
<style>
#scroll {
height: 100px;
overflow: hidden;
}
#sticky {
position: sticky;
top: 10px;
bottom: 10px;
height: 10px;
background-color: black;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 100px"></div>
<div id="sticky"></div>
<div style="height: 100px"></div>
</div>
<script type="application/javascript">
document.getElementById("scroll").scrollTop = 50;
</script>
</body>
</html>

25
layout/reftests/position-sticky/top-bottom-3-ref.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<style>
#scroll {
height: 100px;
overflow: hidden;
}
#sticky {
position: relative;
top: 10px;
height: 10px;
background-color: black;
}
</style>
</head>
<body>
<div id="scroll">
<div id="sticky"></div>
</div>
</body>
</html>

35
layout/reftests/position-sticky/top-bottom-3.html Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>CSS Test: Sticky Positioning - top+bottom, at bottom</title>
<link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
<link rel="match" href="top-bottom-3-ref.html">
<meta name="flags" content="dom">
<meta name="assert" content="Top+bottom sticky, scrolled to the bottom: should act as top-sticky">
<style>
#scroll {
height: 100px;
overflow: hidden;
}
#sticky {
position: sticky;
top: 10px;
bottom: 10px;
height: 10px;
background-color: black;
}
</style>
</head>
<body>
<div id="scroll">
<div style="height: 100px"></div>
<div id="sticky"></div>
<div style="height: 100px"></div>
</div>
<script type="application/javascript">
document.getElementById("scroll").scrollTop = 110;
</script>
</body>
</html>

3
layout/reftests/reftest.list
View File

@ -250,6 +250,9 @@ skip-if(Android&&AndroidVersion>=15) include scrolling/reftest.list
# selection
include selection/reftest.list
# sticky positioning
include position-sticky/reftest.list
# svg/
include svg/reftest.list

1
layout/reftests/svg/text/ignore-position-ref.svg
View File

@ -7,5 +7,6 @@
<text x="100" y="40">hello there everyone</text>
<text x="100" y="60">hello there everyone</text>
<text x="100" y="80">hello there everyone</text>
<text x="100" y="100">hello there everyone</text>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 393 B

After

Width:  |  Height:  |  Size: 447 B

1
layout/reftests/svg/text/ignore-position.svg
View File

@ -7,5 +7,6 @@
<text x="100" y="40">hello <tspan style="position: relative; left: 20px">there</tspan> everyone</text>
<text x="100" y="60">hello <tspan style="position: absolute; top: 0; left: 0">there</tspan> everyone</text>
<text x="100" y="80">hello <tspan style="position: fixed; top: 0; left: 0">there</tspan> everyone</text>
<text x="100" y="100">hello <tspan style="position: sticky; left: 500px">there</tspan> everyone</text>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 562 B

After

Width:  |  Height:  |  Size: 669 B