summaryrefslogtreecommitdiffstats
path: root/layout/reftests/position-sticky
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
commit36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/position-sticky
parentInitial commit. (diff)
downloadfirefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz
firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip
Adding upstream version 115.7.0esr.upstream/115.7.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/position-sticky')
-rw-r--r--layout/reftests/position-sticky/ahem.css4
-rw-r--r--layout/reftests/position-sticky/block-in-inline-1-ref.html41
-rw-r--r--layout/reftests/position-sticky/block-in-inline-1.html42
-rw-r--r--layout/reftests/position-sticky/block-in-inline-2-ref.html41
-rw-r--r--layout/reftests/position-sticky/block-in-inline-2.html45
-rw-r--r--layout/reftests/position-sticky/block-in-inline-3-ref.html41
-rw-r--r--layout/reftests/position-sticky/block-in-inline-3.html46
-rw-r--r--layout/reftests/position-sticky/block-in-inline-continuations-ref.html29
-rw-r--r--layout/reftests/position-sticky/block-in-inline-continuations.html37
-rw-r--r--layout/reftests/position-sticky/bottom-1-ref.html25
-rw-r--r--layout/reftests/position-sticky/bottom-1.html29
-rw-r--r--layout/reftests/position-sticky/bottom-2-ref.html25
-rw-r--r--layout/reftests/position-sticky/bottom-2a.html29
-rw-r--r--layout/reftests/position-sticky/bottom-2b.html29
-rw-r--r--layout/reftests/position-sticky/bottom-2c.html30
-rw-r--r--layout/reftests/position-sticky/bottom-3-ref.html32
-rw-r--r--layout/reftests/position-sticky/bottom-3.html37
-rw-r--r--layout/reftests/position-sticky/bottom-4-ref.html34
-rw-r--r--layout/reftests/position-sticky/bottom-4.html41
-rw-r--r--layout/reftests/position-sticky/column-contain-1-ref.html40
-rw-r--r--layout/reftests/position-sticky/column-contain-1a.html43
-rw-r--r--layout/reftests/position-sticky/column-contain-1b.html45
-rw-r--r--layout/reftests/position-sticky/column-contain-2-ref.html46
-rw-r--r--layout/reftests/position-sticky/column-contain-2.html49
-rw-r--r--layout/reftests/position-sticky/containing-block-1-ref.html32
-rw-r--r--layout/reftests/position-sticky/containing-block-1.html35
-rw-r--r--layout/reftests/position-sticky/iframe-1-helper.html17
-rw-r--r--layout/reftests/position-sticky/iframe-1-ref.html20
-rw-r--r--layout/reftests/position-sticky/iframe-1.html15
-rw-r--r--layout/reftests/position-sticky/initial-1-ref.html27
-rw-r--r--layout/reftests/position-sticky/initial-1.html30
-rw-r--r--layout/reftests/position-sticky/initial-scroll-1-ref.html35
-rw-r--r--layout/reftests/position-sticky/initial-scroll-1.html38
-rw-r--r--layout/reftests/position-sticky/inline-1-ref.html30
-rw-r--r--layout/reftests/position-sticky/inline-1.html29
-rw-r--r--layout/reftests/position-sticky/inline-2-ref.html30
-rw-r--r--layout/reftests/position-sticky/inline-2.html37
-rw-r--r--layout/reftests/position-sticky/inline-3-ref.html30
-rw-r--r--layout/reftests/position-sticky/inline-3.html34
-rw-r--r--layout/reftests/position-sticky/inline-4-ref.html45
-rw-r--r--layout/reftests/position-sticky/inline-4.html49
-rw-r--r--layout/reftests/position-sticky/left-1-ref.html42
-rw-r--r--layout/reftests/position-sticky/left-1.html51
-rw-r--r--layout/reftests/position-sticky/left-2-ref.html37
-rw-r--r--layout/reftests/position-sticky/left-2.html51
-rw-r--r--layout/reftests/position-sticky/left-3-ref.html39
-rw-r--r--layout/reftests/position-sticky/left-3.html51
-rw-r--r--layout/reftests/position-sticky/left-right-1-ref.html42
-rw-r--r--layout/reftests/position-sticky/left-right-1.html46
-rw-r--r--layout/reftests/position-sticky/left-right-2-ref.html33
-rw-r--r--layout/reftests/position-sticky/left-right-2.html50
-rw-r--r--layout/reftests/position-sticky/left-right-3-ref.html34
-rw-r--r--layout/reftests/position-sticky/left-right-3.html50
-rw-r--r--layout/reftests/position-sticky/margin-1-ref.html31
-rw-r--r--layout/reftests/position-sticky/margin-1.html41
-rw-r--r--layout/reftests/position-sticky/nested-sticky-1-ref.html34
-rw-r--r--layout/reftests/position-sticky/nested-sticky-1.html30
-rw-r--r--layout/reftests/position-sticky/nested-sticky-2-ref.html38
-rw-r--r--layout/reftests/position-sticky/nested-sticky-2.html32
-rw-r--r--layout/reftests/position-sticky/overconstrained-1-ref.html25
-rw-r--r--layout/reftests/position-sticky/overconstrained-1.html31
-rw-r--r--layout/reftests/position-sticky/overconstrained-2-ref.html40
-rw-r--r--layout/reftests/position-sticky/overconstrained-2.html46
-rw-r--r--layout/reftests/position-sticky/overconstrained-3-ref.html28
-rw-r--r--layout/reftests/position-sticky/overconstrained-3.html51
-rw-r--r--layout/reftests/position-sticky/overcontain-1-ref.html20
-rw-r--r--layout/reftests/position-sticky/overcontain-1.html25
-rw-r--r--layout/reftests/position-sticky/padding-1-ref.html40
-rw-r--r--layout/reftests/position-sticky/padding-1.html37
-rw-r--r--layout/reftests/position-sticky/padding-2-ref.html29
-rw-r--r--layout/reftests/position-sticky/padding-2.html41
-rw-r--r--layout/reftests/position-sticky/padding-3-ref.html40
-rw-r--r--layout/reftests/position-sticky/padding-3.html39
-rw-r--r--layout/reftests/position-sticky/reftest.list55
-rw-r--r--layout/reftests/position-sticky/right-1-ref.html40
-rw-r--r--layout/reftests/position-sticky/right-1.html54
-rw-r--r--layout/reftests/position-sticky/right-2-ref.html41
-rw-r--r--layout/reftests/position-sticky/right-2.html54
-rw-r--r--layout/reftests/position-sticky/right-3-ref.html41
-rw-r--r--layout/reftests/position-sticky/right-3.html54
-rw-r--r--layout/reftests/position-sticky/scrollframe-auto-1-ref.html34
-rw-r--r--layout/reftests/position-sticky/scrollframe-auto-1.html36
-rw-r--r--layout/reftests/position-sticky/scrollframe-reflow-1-ref.html25
-rw-r--r--layout/reftests/position-sticky/scrollframe-reflow-1.html36
-rw-r--r--layout/reftests/position-sticky/scrollframe-reflow-2-ref.html25
-rw-r--r--layout/reftests/position-sticky/scrollframe-reflow-2.html36
-rw-r--r--layout/reftests/position-sticky/stacking-context-1-ref.html39
-rw-r--r--layout/reftests/position-sticky/stacking-context-1.html45
-rw-r--r--layout/reftests/position-sticky/top-1-ref.html34
-rw-r--r--layout/reftests/position-sticky/top-1.html41
-rw-r--r--layout/reftests/position-sticky/top-2-ref.html34
-rw-r--r--layout/reftests/position-sticky/top-2.html45
-rw-r--r--layout/reftests/position-sticky/top-3-ref.html38
-rw-r--r--layout/reftests/position-sticky/top-3.html45
-rw-r--r--layout/reftests/position-sticky/top-4-ref.html30
-rw-r--r--layout/reftests/position-sticky/top-4.html45
-rw-r--r--layout/reftests/position-sticky/top-5-ref.html28
-rw-r--r--layout/reftests/position-sticky/top-5.html45
-rw-r--r--layout/reftests/position-sticky/top-6-ref.html32
-rw-r--r--layout/reftests/position-sticky/top-6.html49
-rw-r--r--layout/reftests/position-sticky/top-bottom-1-ref.html27
-rw-r--r--layout/reftests/position-sticky/top-bottom-1.html31
-rw-r--r--layout/reftests/position-sticky/top-bottom-2-ref.html23
-rw-r--r--layout/reftests/position-sticky/top-bottom-2.html35
-rw-r--r--layout/reftests/position-sticky/top-bottom-3-ref.html25
-rw-r--r--layout/reftests/position-sticky/top-bottom-3.html35
-rw-r--r--layout/reftests/position-sticky/transformed-1-ref.html8
-rw-r--r--layout/reftests/position-sticky/transformed-1.html8
-rw-r--r--layout/reftests/position-sticky/transformed-2-ref.html14
-rw-r--r--layout/reftests/position-sticky/transformed-2.html8
110 files changed, 3912 insertions, 0 deletions
diff --git a/layout/reftests/position-sticky/ahem.css b/layout/reftests/position-sticky/ahem.css
new file mode 100644
index 0000000000..884a41198b
--- /dev/null
+++ b/layout/reftests/position-sticky/ahem.css
@@ -0,0 +1,4 @@
+@font-face {
+ font-family: "Ahem";
+ src: url(../fonts/Ahem.ttf);
+}
diff --git a/layout/reftests/position-sticky/block-in-inline-1-ref.html b/layout/reftests/position-sticky/block-in-inline-1-ref.html
new file mode 100644
index 0000000000..ce6f258062
--- /dev/null
+++ b/layout/reftests/position-sticky/block-in-inline-1-ref.html
@@ -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 - block inside inline, normal position</title>
+ <link rel="author" title="L. David Baron" href="mailto:dbaron@mozilla.com">
+ <link rel="stylesheet" type="text/css" href="ahem.css">
+ <style>
+ #scroll {
+ height: 100px;
+ overflow: hidden;
+ font: 20px/1 Ahem;
+ }
+ #contain {
+ height: 100px;
+ }
+ .sticky {
+ position: relative;
+ top: 0;
+ }
+ .notsticky {
+ position: relative;
+ top: 0;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="scroll">
+ <div style="height: 20px"></div>
+ <div id="contain">
+ <span class="notsticky">before inline</span>
+ <span class="sticky">before block</span>
+ <div><span class="sticky">in block</span></div>
+ <span class="sticky">after block</span>
+ <span class="notsticky">after inline</span>
+ </div>
+ <div style="height: 100px"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/block-in-inline-1.html b/layout/reftests/position-sticky/block-in-inline-1.html
new file mode 100644
index 0000000000..a613421d92
--- /dev/null
+++ b/layout/reftests/position-sticky/block-in-inline-1.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <head>
+ <title>CSS Test: Sticky Positioning - block inside inline, normal position</title>
+ <link rel="author" title="L. David Baron" href="mailto:dbaron@mozilla.com">
+ <link rel="match" href="block-in-inline-1-ref.html">
+ <meta name="assert" content="Inline elements split because they contain blocks should always have all parts moved the same offset from their normal position">
+ <link rel="stylesheet" type="text/css" href="ahem.css">
+ <style>
+ #scroll {
+ height: 100px;
+ overflow: hidden;
+ font: 20px/1 Ahem;
+ }
+ #contain {
+ height: 100px;
+ }
+ #sticky {
+ display: inline;
+ position: sticky;
+ top: 10px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="scroll">
+ <div style="height: 20px"></div>
+ <div id="contain">
+ before inline
+ <div id="sticky">
+ before block
+ <div>in block</div>
+ after block
+ </div>
+ after inline
+ </div>
+ <div style="height: 100px"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/block-in-inline-2-ref.html b/layout/reftests/position-sticky/block-in-inline-2-ref.html
new file mode 100644
index 0000000000..08239c50b2
--- /dev/null
+++ b/layout/reftests/position-sticky/block-in-inline-2-ref.html
@@ -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 - block inside inline, normal position</title>
+ <link rel="author" title="L. David Baron" href="mailto:dbaron@mozilla.com">
+ <link rel="stylesheet" type="text/css" href="ahem.css">
+ <style>
+ #scroll {
+ height: 100px;
+ overflow: hidden;
+ font: 20px/1 Ahem;
+ }
+ #contain {
+ height: 100px;
+ }
+ .sticky {
+ position: relative;
+ top: -10px;
+ }
+ .notsticky {
+ position: relative;
+ top: -30px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="scroll">
+ <div style="height: 20px"></div>
+ <div id="contain">
+ <span class="notsticky">before inline</span>
+ <span class="sticky">before block</span>
+ <div><span class="sticky">in block</span></div>
+ <span class="sticky">after block</span>
+ <span class="notsticky">after inline</span>
+ </div>
+ <div style="height: 100px"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/block-in-inline-2.html b/layout/reftests/position-sticky/block-in-inline-2.html
new file mode 100644
index 0000000000..084f9b04f3
--- /dev/null
+++ b/layout/reftests/position-sticky/block-in-inline-2.html
@@ -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 - block inside inline, stuck position</title>
+ <link rel="author" title="L. David Baron" href="mailto:dbaron@mozilla.com">
+ <link rel="match" href="block-in-inline-2-ref.html">
+ <meta name="assert" content="Inline elements split because they contain blocks should always have all parts moved the same offset from their normal position">
+ <link rel="stylesheet" type="text/css" href="ahem.css">
+ <style>
+ #scroll {
+ height: 100px;
+ overflow: hidden;
+ font: 20px/1 Ahem;
+ }
+ #contain {
+ height: 100px;
+ }
+ #sticky {
+ display: inline;
+ position: sticky;
+ top: 10px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="scroll">
+ <div style="height: 20px"></div>
+ <div id="contain">
+ before inline
+ <div id="sticky">
+ before block
+ <div>in block</div>
+ after block
+ </div>
+ after inline
+ </div>
+ <div style="height: 100px"></div>
+ </div>
+ <script type="application/javascript">
+ document.getElementById("scroll").scrollTop = 30;
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/block-in-inline-3-ref.html b/layout/reftests/position-sticky/block-in-inline-3-ref.html
new file mode 100644
index 0000000000..13e29a9f77
--- /dev/null
+++ b/layout/reftests/position-sticky/block-in-inline-3-ref.html
@@ -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 - block inside inline, normal position</title>
+ <link rel="author" title="L. David Baron" href="mailto:dbaron@mozilla.com">
+ <link rel="stylesheet" type="text/css" href="ahem.css">
+ <style>
+ #scroll {
+ height: 100px;
+ overflow: hidden;
+ font: 20px/1 Ahem;
+ }
+ #contain {
+ height: 100px;
+ }
+ .sticky {
+ position: relative;
+ top: -20px;
+ }
+ .notsticky {
+ position: relative;
+ top: -60px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="scroll">
+ <div style="height: 20px"></div>
+ <div id="contain">
+ <span class="notsticky">before inline</span>
+ <span class="sticky">before block</span>
+ <div><span class="sticky">in block</span></div>
+ <span class="sticky">after block</span>
+ <span class="notsticky">after inline</span>
+ </div>
+ <div style="height: 100px"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/block-in-inline-3.html b/layout/reftests/position-sticky/block-in-inline-3.html
new file mode 100644
index 0000000000..f4acbc7f15
--- /dev/null
+++ b/layout/reftests/position-sticky/block-in-inline-3.html
@@ -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 - block inside inline, contained position</title>
+ <link rel="author" title="L. David Baron" href="mailto:dbaron@mozilla.com">
+ <link rel="match" href="block-in-inline-3-ref.html">
+ <meta name="assert" content="Inline elements split because they contain blocks should always have all parts moved the same offset from their normal position">
+ <link rel="stylesheet" type="text/css" href="ahem.css">
+ <style>
+ #scroll {
+ height: 100px;
+ overflow: hidden;
+ font: 20px/1 Ahem;
+ }
+ #contain {
+ height: 100px;
+ }
+ #sticky {
+ display: inline;
+ position: sticky;
+ top: 10px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="scroll">
+ <div style="height: 20px"></div>
+ <div id="contain">
+ before inline
+ <div id="sticky">
+ before block
+ <div>in block</div>
+ after block
+ </div>
+ after inline
+ </div>
+ <div style="height: 100px"></div>
+ </div>
+ <script type="application/javascript">
+ // should start moving after 40px
+ document.getElementById("scroll").scrollTop = 60;
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/block-in-inline-continuations-ref.html b/layout/reftests/position-sticky/block-in-inline-continuations-ref.html
new file mode 100644
index 0000000000..8ac42e85b4
--- /dev/null
+++ b/layout/reftests/position-sticky/block-in-inline-continuations-ref.html
@@ -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 Reference: Sticky Positioning - continuations have no effect when resizing</title>
+ <link rel="author" title="Abel Lin" href="mailto:alin@mozilla.com">
+ <link rel="stylesheet" href="ahem.css">
+ <style>
+ #scroll {
+ height: 100px;
+ overflow: hidden;
+ font: 20px/1 Ahem;
+ }
+ </style>
+ <script>
+ function run() {
+ document.getElementById("scroll").style.width = "750px";
+ }
+ </script>
+ </head>
+ <body onload="run()">
+ <div id="scroll">
+ <div style="height: 20px"></div>
+ <div><span class="sticky">in block</span></div>
+ <span class="sticky">after block</span>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/block-in-inline-continuations.html b/layout/reftests/position-sticky/block-in-inline-continuations.html
new file mode 100644
index 0000000000..62cad478b2
--- /dev/null
+++ b/layout/reftests/position-sticky/block-in-inline-continuations.html
@@ -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 - continuations have no effect when resizing</title>
+ <link rel="author" title="Abel Lin" href="mailto:alin@mozilla.com">
+ <link rel="match" href="block-in-inline-continuations-ref.html">
+ <meta name="assert" content="Inline elements split and contain blocks should always have all parts moved the same offset from their normal position">
+ <link rel="stylesheet" href="ahem.css">
+ <style>
+ #scroll {
+ height: 100px;
+ overflow: hidden;
+ font: 20px/1 Ahem;
+ }
+ #sticky {
+ display: inline;
+ position: sticky;
+ top: 20px;
+ }
+ </style>
+ <script>
+ function run() {
+ document.getElementById("scroll").style.width = "750px";
+ }
+ </script>
+ </head>
+ <body onload="run()">
+ <div id="scroll">
+ <div id="sticky">
+ <div>in block</div>
+ after block
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/bottom-1-ref.html b/layout/reftests/position-sticky/bottom-1-ref.html
new file mode 100644
index 0000000000..ac107c0d03
--- /dev/null
+++ b/layout/reftests/position-sticky/bottom-1-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/bottom-1.html b/layout/reftests/position-sticky/bottom-1.html
new file mode 100644
index 0000000000..183e012f02
--- /dev/null
+++ b/layout/reftests/position-sticky/bottom-1.html
@@ -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>
diff --git a/layout/reftests/position-sticky/bottom-2-ref.html b/layout/reftests/position-sticky/bottom-2-ref.html
new file mode 100644
index 0000000000..368dc22d4c
--- /dev/null
+++ b/layout/reftests/position-sticky/bottom-2-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/bottom-2a.html b/layout/reftests/position-sticky/bottom-2a.html
new file mode 100644
index 0000000000..5a52cb9048
--- /dev/null
+++ b/layout/reftests/position-sticky/bottom-2a.html
@@ -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>
diff --git a/layout/reftests/position-sticky/bottom-2b.html b/layout/reftests/position-sticky/bottom-2b.html
new file mode 100644
index 0000000000..62ba2499b9
--- /dev/null
+++ b/layout/reftests/position-sticky/bottom-2b.html
@@ -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>
diff --git a/layout/reftests/position-sticky/bottom-2c.html b/layout/reftests/position-sticky/bottom-2c.html
new file mode 100644
index 0000000000..2408b7d7e0
--- /dev/null
+++ b/layout/reftests/position-sticky/bottom-2c.html
@@ -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>
diff --git a/layout/reftests/position-sticky/bottom-3-ref.html b/layout/reftests/position-sticky/bottom-3-ref.html
new file mode 100644
index 0000000000..c40d5c9659
--- /dev/null
+++ b/layout/reftests/position-sticky/bottom-3-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/bottom-3.html b/layout/reftests/position-sticky/bottom-3.html
new file mode 100644
index 0000000000..996b022683
--- /dev/null
+++ b/layout/reftests/position-sticky/bottom-3.html
@@ -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>
diff --git a/layout/reftests/position-sticky/bottom-4-ref.html b/layout/reftests/position-sticky/bottom-4-ref.html
new file mode 100644
index 0000000000..822565bfd1
--- /dev/null
+++ b/layout/reftests/position-sticky/bottom-4-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/bottom-4.html b/layout/reftests/position-sticky/bottom-4.html
new file mode 100644
index 0000000000..5a06b4ec9a
--- /dev/null
+++ b/layout/reftests/position-sticky/bottom-4.html
@@ -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>
diff --git a/layout/reftests/position-sticky/column-contain-1-ref.html b/layout/reftests/position-sticky/column-contain-1-ref.html
new file mode 100644
index 0000000000..97ee55f273
--- /dev/null
+++ b/layout/reftests/position-sticky/column-contain-1-ref.html
@@ -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 {
+ overflow: hidden;
+ height: 200px;
+ line-height: 1;
+ }
+ #contain {
+ column-count: 2;
+ column-rule: 1px solid black;
+ height: 200px;
+ width: 200px;
+ }
+ #fill {
+ height: 390px;
+ background: blue;
+ }
+ #sticky {
+ position: relative;
+ left: 190px;
+ width: 10px;
+ height: 10px;
+ background: black;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="scroll">
+ <div id="contain">
+ <div id="sticky"></div>
+ <div id="fill"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/column-contain-1a.html b/layout/reftests/position-sticky/column-contain-1a.html
new file mode 100644
index 0000000000..1e696c6249
--- /dev/null
+++ b/layout/reftests/position-sticky/column-contain-1a.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <head>
+ <title>CSS Test: Sticky Positioning - multiframe containing-block element</title>
+ <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+ <link rel="match" href="column-contain-1-ref.html">
+ <meta name="assert" content="Sticky positioning with a multiple-frame containing-block element should stay contained within the bounding box of all that element's frames">
+ <style>
+ #scroll {
+ overflow: hidden;
+ height: 200px;
+ line-height: 1;
+ }
+ #contain {
+ column-count: 2;
+ column-rule: 1px solid black;
+ height: 200px;
+ width: 200px;
+ }
+ #fill {
+ height: 390px;
+ background: blue;
+ }
+ #sticky {
+ position: sticky;
+ left: 190px;
+ width: 10px;
+ height: 10px;
+ background: black;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="scroll">
+ <div id="contain">
+ <div id="sticky"></div>
+ <div id="fill"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/column-contain-1b.html b/layout/reftests/position-sticky/column-contain-1b.html
new file mode 100644
index 0000000000..c6f7e83780
--- /dev/null
+++ b/layout/reftests/position-sticky/column-contain-1b.html
@@ -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 - multiframe containing-block element</title>
+ <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+ <link rel="match" href="column-contain-1-ref.html">
+ <meta name="assert" content="Sticky positioning with a multiple-frame containing-block element should stay contained within the bounding box of all that element's frames">
+ <style>
+ #scroll {
+ overflow: hidden;
+ height: 200px;
+ line-height: 1;
+ }
+ #columns {
+ column-count: 2;
+ column-rule: 1px solid black;
+ height: 200px;
+ width: 200px;
+ }
+ #fill {
+ height: 390px;
+ background: blue;
+ }
+ #sticky {
+ position: sticky;
+ left: 190px;
+ width: 10px;
+ height: 10px;
+ background: black;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="scroll">
+ <div id="columns">
+ <div id="contain">
+ <div id="sticky"></div>
+ <div id="fill"></div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/column-contain-2-ref.html b/layout/reftests/position-sticky/column-contain-2-ref.html
new file mode 100644
index 0000000000..42771486db
--- /dev/null
+++ b/layout/reftests/position-sticky/column-contain-2-ref.html
@@ -0,0 +1,46 @@
+<!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:corey@coreyford.name">
+ <style>
+ #scroll {
+ overflow: hidden;
+ height: 200px;
+ line-height: 1;
+ }
+ #columns {
+ column-count: 2;
+ column-rule: 1px solid black;
+ height: 200px;
+ width: 200px;
+ }
+ #contain {
+ padding-bottom: 10px;
+ border-bottom: 10px solid gray;
+ }
+ #fill {
+ height: 370px;
+ background: blue;
+ }
+ #sticky {
+ position: relative;
+ top: 190px;
+ width: 10px;
+ height: 10px;
+ background: black;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="scroll">
+ <div id="columns">
+ <div id="contain">
+ <div id="sticky"></div>
+ <div id="fill"></div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/column-contain-2.html b/layout/reftests/position-sticky/column-contain-2.html
new file mode 100644
index 0000000000..ec29285609
--- /dev/null
+++ b/layout/reftests/position-sticky/column-contain-2.html
@@ -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 - multiframe containing-block element</title>
+ <link rel="author" title="Corey Ford" href="mailto:corey@coreyford.name">
+ <link rel="match" href="column-contain-2-ref.html">
+ <meta name="assert" content="Sticky positioning where the containing-block element has multiple frames and border/padding should stay contained within the union of the content boxes of all frames">
+ <style>
+ #scroll {
+ overflow: hidden;
+ height: 200px;
+ line-height: 1;
+ }
+ #columns {
+ column-count: 2;
+ column-rule: 1px solid black;
+ height: 200px;
+ width: 200px;
+ }
+ #contain {
+ padding-bottom: 10px;
+ border-bottom: 10px solid gray;
+ }
+ #fill {
+ height: 370px;
+ background: blue;
+ }
+ #sticky {
+ position: sticky;
+ top: 195px;
+ width: 10px;
+ height: 10px;
+ background: black;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="scroll">
+ <div id="columns">
+ <div id="contain">
+ <div id="sticky"></div>
+ <div id="fill"></div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/containing-block-1-ref.html b/layout/reftests/position-sticky/containing-block-1-ref.html
new file mode 100644
index 0000000000..ccb25d8109
--- /dev/null
+++ b/layout/reftests/position-sticky/containing-block-1-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/containing-block-1.html b/layout/reftests/position-sticky/containing-block-1.html
new file mode 100644
index 0000000000..cb09717e5a
--- /dev/null
+++ b/layout/reftests/position-sticky/containing-block-1.html
@@ -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>
diff --git a/layout/reftests/position-sticky/iframe-1-helper.html b/layout/reftests/position-sticky/iframe-1-helper.html
new file mode 100644
index 0000000000..9f71b50c42
--- /dev/null
+++ b/layout/reftests/position-sticky/iframe-1-helper.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ }
+ </style>
+ </head>
+ <body>
+ <div style="overflow: auto; width: 150px; height: 200px">
+ <div style="position: sticky; top: 0; width: 100px; height: 100px; background-color: green"></div>
+ <div style="height: 300px; width: 100px"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/iframe-1-ref.html b/layout/reftests/position-sticky/iframe-1-ref.html
new file mode 100644
index 0000000000..d3254ac576
--- /dev/null
+++ b/layout/reftests/position-sticky/iframe-1-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Sticky-positioned item inside a scrollframe inside an iframe</title>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ }
+ </style>
+ </head>
+ <body>
+ <div style="overflow: auto; margin-top: 100px; width: 150px; height: 200px">
+ <div style="width: 100px; height: 100px; background-color: green"></div>
+ <div style="height: 300px; width: 100px"></div>
+ </div>
+ </body>
+</html>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/iframe-1.html b/layout/reftests/position-sticky/iframe-1.html
new file mode 100644
index 0000000000..164f5ac4cd
--- /dev/null
+++ b/layout/reftests/position-sticky/iframe-1.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Sticky-positioned item inside a scrollframe inside an iframe</title>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ }
+ </style>
+ </head>
+ <body>
+ <iframe src="iframe-1-helper.html" style="margin-top: 100px; border: none; height: 300px"></iframe>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/initial-1-ref.html b/layout/reftests/position-sticky/initial-1-ref.html
new file mode 100644
index 0000000000..70b0b6eb03
--- /dev/null
+++ b/layout/reftests/position-sticky/initial-1-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/initial-1.html b/layout/reftests/position-sticky/initial-1.html
new file mode 100644
index 0000000000..6e0bb67057
--- /dev/null
+++ b/layout/reftests/position-sticky/initial-1.html
@@ -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>
diff --git a/layout/reftests/position-sticky/initial-scroll-1-ref.html b/layout/reftests/position-sticky/initial-scroll-1-ref.html
new file mode 100644
index 0000000000..bb021dbe7a
--- /dev/null
+++ b/layout/reftests/position-sticky/initial-scroll-1-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/initial-scroll-1.html b/layout/reftests/position-sticky/initial-scroll-1.html
new file mode 100644
index 0000000000..343c6295ee
--- /dev/null
+++ b/layout/reftests/position-sticky/initial-scroll-1.html
@@ -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>
diff --git a/layout/reftests/position-sticky/inline-1-ref.html b/layout/reftests/position-sticky/inline-1-ref.html
new file mode 100644
index 0000000000..2c3bc2470f
--- /dev/null
+++ b/layout/reftests/position-sticky/inline-1-ref.html
@@ -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">
+ <link rel="stylesheet" type="text/css" href="ahem.css">
+ <style>
+ #scroll {
+ overflow: hidden;
+ height: 200px;
+ position: relative;
+ font: 10px/1 Ahem;
+ }
+ #sticky {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ }
+ #hidden {
+ visibility: hidden;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="scroll">
+ hello <div id="sticky"><span id="hidden">hello </span>there<br>everyone</div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/inline-1.html b/layout/reftests/position-sticky/inline-1.html
new file mode 100644
index 0000000000..f2569fc794
--- /dev/null
+++ b/layout/reftests/position-sticky/inline-1.html
@@ -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 - inline</title>
+ <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+ <link rel="match" href="inline-1-ref.html">
+ <meta name="assert" content="Sticky positioning on inline elements should use the bounding box of all continuations">
+ <link rel="stylesheet" type="text/css" href="ahem.css">
+ <style>
+ #scroll {
+ overflow: hidden;
+ height: 200px;
+ font: 10px/1 Ahem;
+ }
+ #sticky {
+ position: sticky;
+ top: 20px;
+ left: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="scroll">
+ hello <span id="sticky">there<br>everyone</span>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/inline-2-ref.html b/layout/reftests/position-sticky/inline-2-ref.html
new file mode 100644
index 0000000000..98aabacc75
--- /dev/null
+++ b/layout/reftests/position-sticky/inline-2-ref.html
@@ -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">
+ <link rel="stylesheet" type="text/css" href="ahem.css">
+ <style>
+ #scroll {
+ overflow: hidden;
+ height: 200px;
+ position: relative;
+ font: 10px/1 Ahem;
+ }
+ #sticky {
+ position: absolute;
+ top: 30px;
+ left: 30px;
+ }
+ #hidden {
+ visibility: hidden;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="scroll">
+ hello <div id="sticky"><span id="hidden">hello </span>there<br>everyone</div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/inline-2.html b/layout/reftests/position-sticky/inline-2.html
new file mode 100644
index 0000000000..f3fbbc0d61
--- /dev/null
+++ b/layout/reftests/position-sticky/inline-2.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html class="reftest-wait">
+ <head>
+ <title>CSS Test: Sticky Positioning - inline, dynamic changes</title>
+ <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+ <link rel="match" href="inline-2-ref.html">
+ <meta name="assert" content="Sticky positioning on inline elements should move all continuations when the offsets are changed">
+ <meta name="flags" content="dom">
+ <link rel="stylesheet" type="text/css" href="ahem.css">
+ <style>
+ #scroll {
+ overflow: hidden;
+ height: 200px;
+ font: 10px/1 Ahem;
+ }
+ #sticky {
+ position: sticky;
+ top: 20px;
+ left: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="scroll">
+ hello <span id="sticky">there<br>everyone</span>
+ </div>
+ <script type="text/javascript">
+ document.addEventListener("MozReftestInvalidate", function() {
+ document.getElementById("sticky").style.top = "30px";
+ document.getElementById("sticky").style.left = "30px";
+ document.documentElement.removeAttribute("class");
+ });
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/inline-3-ref.html b/layout/reftests/position-sticky/inline-3-ref.html
new file mode 100644
index 0000000000..847860a3cf
--- /dev/null
+++ b/layout/reftests/position-sticky/inline-3-ref.html
@@ -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:corey@coreyford.name">
+ <link rel="stylesheet" type="text/css" href="ahem.css">
+ <style>
+ #scroll {
+ overflow: hidden;
+ height: 200px;
+ position: relative;
+ font: 10px/1 Ahem;
+ }
+ #sticky {
+ position: absolute;
+ top: 0;
+ left: 10px;
+ }
+ #hidden {
+ visibility: hidden;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="scroll">
+ test <span id="sticky"><span id="hidden">test </span>test<br>test</span>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/inline-3.html b/layout/reftests/position-sticky/inline-3.html
new file mode 100644
index 0000000000..f06f55d530
--- /dev/null
+++ b/layout/reftests/position-sticky/inline-3.html
@@ -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 - inline with margins</title>
+ <link rel="author" title="Corey Ford" href="mailto:corey@coreyford.name">
+ <link rel="match" href="inline-3-ref.html">
+ <meta name="assert" content="Sticky positioning on inline elements should keep the bounding box of all continuations' margin boxes contained">
+ <link rel="stylesheet" type="text/css" href="ahem.css">
+ <style>
+ #scroll {
+ overflow: hidden;
+ height: 200px;
+ font: 10px/1 Ahem;
+ }
+ #sticky {
+ position: sticky;
+ left: 20px;
+ margin-right: 10px;
+ }
+ #contain {
+ width: 100px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="scroll">
+ <div id="contain">
+ test <span id="sticky">test<br>test</span>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/inline-4-ref.html b/layout/reftests/position-sticky/inline-4-ref.html
new file mode 100644
index 0000000000..136ff07371
--- /dev/null
+++ b/layout/reftests/position-sticky/inline-4-ref.html
@@ -0,0 +1,45 @@
+<!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:corey@coreyford.name">
+ <link rel="stylesheet" type="text/css" href="ahem.css">
+ <style>
+ #scroller {
+ margin-top: 100px;
+ height: 200px;
+ width: 500px;
+ overflow: hidden;
+ }
+ #container {
+ background: pink;
+ position: relative;
+ margin: 50px;
+ height: 400px;
+ margin-bottom: 1000px;
+ }
+ #sticky {
+ position: sticky;
+ left: 0px;
+ top: 75px;
+ outline: 1px dotted purple;
+ font: 10px/1 Ahem;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="scroller">
+ <div id="container">
+ <span id="sticky">
+ First line<br>
+ Second line<br>
+ Third line<br>
+ </span>
+ </div>
+ </div>
+ <script>
+ document.getElementById("scroller").scrollTop = 30;
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/inline-4.html b/layout/reftests/position-sticky/inline-4.html
new file mode 100644
index 0000000000..9913cfe25b
--- /dev/null
+++ b/layout/reftests/position-sticky/inline-4.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html reftest-async-scroll>
+ <head>
+ <title>CSS Test: Sticky Positioning - inline, async scrolling</title>
+ <link rel="author" title="Corey Ford" href="mailto:corey@coreyford.name">
+ <link rel="match" href="inline-4-ref.html">
+ <meta name="assert" content="Sticky positioning on inline elements should keep continuations aligned during async scrolling">
+ <link rel="stylesheet" type="text/css" href="ahem.css">
+ <style>
+ #scroller {
+ margin-top: 100px;
+ height: 200px;
+ width: 500px;
+ overflow: scroll;
+ scrollbar-width: none;
+ }
+ #container {
+ background: pink;
+ position: relative;
+ margin: 50px;
+ height: 400px;
+ margin-bottom: 1000px;
+ }
+ #sticky {
+ position: sticky;
+ left: 0px;
+ top: 75px;
+ outline: 1px dotted purple;
+ font: 10px/1 Ahem;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="scroller"
+ reftest-displayport-x="0" reftest-displayport-y="0"
+ reftest-displayport-w="500" reftest-displayport-h="300"
+ reftest-async-scroll-y="30">
+ <div id="container">
+ <span id="sticky">
+ First line<br>
+ Second line<br>
+ Third line<br>
+ </span>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/left-1-ref.html b/layout/reftests/position-sticky/left-1-ref.html
new file mode 100644
index 0000000000..ebcf46f4fb
--- /dev/null
+++ b/layout/reftests/position-sticky/left-1-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/left-1.html b/layout/reftests/position-sticky/left-1.html
new file mode 100644
index 0000000000..779f930977
--- /dev/null
+++ b/layout/reftests/position-sticky/left-1.html
@@ -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>
diff --git a/layout/reftests/position-sticky/left-2-ref.html b/layout/reftests/position-sticky/left-2-ref.html
new file mode 100644
index 0000000000..ca5c35a688
--- /dev/null
+++ b/layout/reftests/position-sticky/left-2-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/left-2.html b/layout/reftests/position-sticky/left-2.html
new file mode 100644
index 0000000000..b3c3e4ee37
--- /dev/null
+++ b/layout/reftests/position-sticky/left-2.html
@@ -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>
diff --git a/layout/reftests/position-sticky/left-3-ref.html b/layout/reftests/position-sticky/left-3-ref.html
new file mode 100644
index 0000000000..1ae2eaf411
--- /dev/null
+++ b/layout/reftests/position-sticky/left-3-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/left-3.html b/layout/reftests/position-sticky/left-3.html
new file mode 100644
index 0000000000..ef9e2b303d
--- /dev/null
+++ b/layout/reftests/position-sticky/left-3.html
@@ -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>
diff --git a/layout/reftests/position-sticky/left-right-1-ref.html b/layout/reftests/position-sticky/left-right-1-ref.html
new file mode 100644
index 0000000000..89b7a06081
--- /dev/null
+++ b/layout/reftests/position-sticky/left-right-1-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/left-right-1.html b/layout/reftests/position-sticky/left-right-1.html
new file mode 100644
index 0000000000..ca7a77ff75
--- /dev/null
+++ b/layout/reftests/position-sticky/left-right-1.html
@@ -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>
diff --git a/layout/reftests/position-sticky/left-right-2-ref.html b/layout/reftests/position-sticky/left-right-2-ref.html
new file mode 100644
index 0000000000..2670683391
--- /dev/null
+++ b/layout/reftests/position-sticky/left-right-2-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/left-right-2.html b/layout/reftests/position-sticky/left-right-2.html
new file mode 100644
index 0000000000..7d9068f2a0
--- /dev/null
+++ b/layout/reftests/position-sticky/left-right-2.html
@@ -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>
diff --git a/layout/reftests/position-sticky/left-right-3-ref.html b/layout/reftests/position-sticky/left-right-3-ref.html
new file mode 100644
index 0000000000..9648f4b284
--- /dev/null
+++ b/layout/reftests/position-sticky/left-right-3-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/left-right-3.html b/layout/reftests/position-sticky/left-right-3.html
new file mode 100644
index 0000000000..e62978220b
--- /dev/null
+++ b/layout/reftests/position-sticky/left-right-3.html
@@ -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>
diff --git a/layout/reftests/position-sticky/margin-1-ref.html b/layout/reftests/position-sticky/margin-1-ref.html
new file mode 100644
index 0000000000..f577b077a5
--- /dev/null
+++ b/layout/reftests/position-sticky/margin-1-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/margin-1.html b/layout/reftests/position-sticky/margin-1.html
new file mode 100644
index 0000000000..7a084d8048
--- /dev/null
+++ b/layout/reftests/position-sticky/margin-1.html
@@ -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>
diff --git a/layout/reftests/position-sticky/nested-sticky-1-ref.html b/layout/reftests/position-sticky/nested-sticky-1-ref.html
new file mode 100644
index 0000000000..4c08d36cd4
--- /dev/null
+++ b/layout/reftests/position-sticky/nested-sticky-1-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<style>
+html, body {
+ margin: 0;
+}
+thead tr {
+ position: relative;
+ top: 50px;
+}
+th {
+ background-color: green;
+ height: 20px;
+}
+td {
+ background-color: blue;
+}
+</style>
+<body>
+<table cellspacing=0>
+ <thead>
+ <tr><th></th></tr>
+ </thead>
+ <tbody>
+ <tr><td style="height: 2000px; vertical-align: top">table cell</td></tr>
+ </tbody>
+</table>
+<script>
+ addEventListener('load', function() {
+ document.scrollingElement.scrollTop = 50;
+ document.documentElement.classList.remove('reftest-wait');
+ }, false);
+</script>
+</html>
diff --git a/layout/reftests/position-sticky/nested-sticky-1.html b/layout/reftests/position-sticky/nested-sticky-1.html
new file mode 100644
index 0000000000..6125f4263a
--- /dev/null
+++ b/layout/reftests/position-sticky/nested-sticky-1.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html reftest-async-scroll reftest-async-scroll-y="50">
+<style>
+html, body {
+ margin: 0;
+}
+thead tr {
+ position: sticky;
+ top: 0;
+}
+th {
+ position: sticky;
+ top: -2px;
+ background-color: green;
+ height: 20px;
+}
+td {
+ background-color: blue;
+}
+</style>
+<body>
+<table cellspacing=0>
+ <thead>
+ <tr><th></th></tr>
+ </thead>
+ <tbody>
+ <tr><td style="height: 2000px; vertical-align: top">table cell</td></tr>
+ </tbody>
+</table>
+</html>
diff --git a/layout/reftests/position-sticky/nested-sticky-2-ref.html b/layout/reftests/position-sticky/nested-sticky-2-ref.html
new file mode 100644
index 0000000000..c49d088960
--- /dev/null
+++ b/layout/reftests/position-sticky/nested-sticky-2-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<style>
+html, body {
+ margin: 0;
+}
+thead tr {
+ position: relative;
+ top: 50px;
+}
+th {
+ background-color: green;
+ height: 20px;
+}
+th:first-child {
+ position: relative;
+ top: 10px;
+}
+td {
+ background-color: blue;
+}
+</style>
+<body>
+<table cellspacing=0>
+ <thead>
+ <tr><th></th><th></th></tr>
+ </thead>
+ <tbody>
+ <tr><td style="height: 2000px; vertical-align: top">table cell</td><td>sibling</td></tr>
+ </tbody>
+</table>
+<script>
+ addEventListener('load', function() {
+ document.scrollingElement.scrollTop = 50;
+ document.documentElement.classList.remove('reftest-wait');
+ }, false);
+</script>
+</html>
diff --git a/layout/reftests/position-sticky/nested-sticky-2.html b/layout/reftests/position-sticky/nested-sticky-2.html
new file mode 100644
index 0000000000..b37885d7ad
--- /dev/null
+++ b/layout/reftests/position-sticky/nested-sticky-2.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html reftest-async-scroll reftest-async-scroll-y="50">
+<style>
+html, body {
+ margin: 0;
+}
+thead tr {
+ position: sticky;
+ top: 0;
+}
+th {
+ background-color: green;
+ height: 20px;
+}
+th:first-child {
+ position: sticky;
+ top: 10px;
+}
+td {
+ background-color: blue;
+}
+</style>
+<body>
+<table cellspacing=0>
+ <thead>
+ <tr><th></th><th></th></tr>
+ </thead>
+ <tbody>
+ <tr><td style="height: 2000px; vertical-align: top">table cell</td><td>sibling</td></tr>
+ </tbody>
+</table>
+</html>
diff --git a/layout/reftests/position-sticky/overconstrained-1-ref.html b/layout/reftests/position-sticky/overconstrained-1-ref.html
new file mode 100644
index 0000000000..f458c239d9
--- /dev/null
+++ b/layout/reftests/position-sticky/overconstrained-1-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/overconstrained-1.html b/layout/reftests/position-sticky/overconstrained-1.html
new file mode 100644
index 0000000000..95d46b2412
--- /dev/null
+++ b/layout/reftests/position-sticky/overconstrained-1.html
@@ -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>
diff --git a/layout/reftests/position-sticky/overconstrained-2-ref.html b/layout/reftests/position-sticky/overconstrained-2-ref.html
new file mode 100644
index 0000000000..8593fa3f5a
--- /dev/null
+++ b/layout/reftests/position-sticky/overconstrained-2-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/overconstrained-2.html b/layout/reftests/position-sticky/overconstrained-2.html
new file mode 100644
index 0000000000..f399c912e9
--- /dev/null
+++ b/layout/reftests/position-sticky/overconstrained-2.html
@@ -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>
diff --git a/layout/reftests/position-sticky/overconstrained-3-ref.html b/layout/reftests/position-sticky/overconstrained-3-ref.html
new file mode 100644
index 0000000000..387c28eda8
--- /dev/null
+++ b/layout/reftests/position-sticky/overconstrained-3-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/overconstrained-3.html b/layout/reftests/position-sticky/overconstrained-3.html
new file mode 100644
index 0000000000..852d356835
--- /dev/null
+++ b/layout/reftests/position-sticky/overconstrained-3.html
@@ -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>
diff --git a/layout/reftests/position-sticky/overcontain-1-ref.html b/layout/reftests/position-sticky/overcontain-1-ref.html
new file mode 100644
index 0000000000..fd9c2fc551
--- /dev/null
+++ b/layout/reftests/position-sticky/overcontain-1-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/overcontain-1.html b/layout/reftests/position-sticky/overcontain-1.html
new file mode 100644
index 0000000000..25f31dc593
--- /dev/null
+++ b/layout/reftests/position-sticky/overcontain-1.html
@@ -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>
diff --git a/layout/reftests/position-sticky/padding-1-ref.html b/layout/reftests/position-sticky/padding-1-ref.html
new file mode 100644
index 0000000000..e23b7c9d39
--- /dev/null
+++ b/layout/reftests/position-sticky/padding-1-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/padding-1.html b/layout/reftests/position-sticky/padding-1.html
new file mode 100644
index 0000000000..1a154a2e53
--- /dev/null
+++ b/layout/reftests/position-sticky/padding-1.html
@@ -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>
diff --git a/layout/reftests/position-sticky/padding-2-ref.html b/layout/reftests/position-sticky/padding-2-ref.html
new file mode 100644
index 0000000000..643c507307
--- /dev/null
+++ b/layout/reftests/position-sticky/padding-2-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/padding-2.html b/layout/reftests/position-sticky/padding-2.html
new file mode 100644
index 0000000000..03080bf101
--- /dev/null
+++ b/layout/reftests/position-sticky/padding-2.html
@@ -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>
diff --git a/layout/reftests/position-sticky/padding-3-ref.html b/layout/reftests/position-sticky/padding-3-ref.html
new file mode 100644
index 0000000000..54b81e9b53
--- /dev/null
+++ b/layout/reftests/position-sticky/padding-3-ref.html
@@ -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: 110px"></div>
+ <div id="sticky"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-sticky/padding-3.html b/layout/reftests/position-sticky/padding-3.html
new file mode 100644
index 0000000000..fc84983d69
--- /dev/null
+++ b/layout/reftests/position-sticky/padding-3.html
@@ -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>
diff --git a/layout/reftests/position-sticky/reftest.list b/layout/reftests/position-sticky/reftest.list
new file mode 100644
index 0000000000..f77ea2ab1e
--- /dev/null
+++ b/layout/reftests/position-sticky/reftest.list
@@ -0,0 +1,55 @@
+== top-1.html top-1-ref.html
+fuzzy-if(Android,0-6,0-1568) == top-2.html top-2-ref.html
+fuzzy-if(Android,0-6,0-2729) == top-3.html top-3-ref.html
+== top-4.html top-4-ref.html
+== top-5.html top-5-ref.html
+fuzzy-if(Android,0-2,0-1568) == 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,0-2,0-4) == left-1.html left-1-ref.html
+fuzzy-if(Android,0-2,0-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,0-2,0-4) == right-2.html right-2-ref.html
+fuzzy-if(Android,0-2,0-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
+fuzzy-if(Android,0-2,0-3) == 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
+fuzzy-if(Android,0-4,0-810) == 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
+== inline-1.html inline-1-ref.html
+== inline-2.html inline-2-ref.html
+fuzzy-if(OSX,0-99,0-210) == inline-3.html inline-3-ref.html
+skip-if(!asyncPan) fuzzy-if(swgl&&!Android,1-1,2-3) fails-if(useDrawSnapshot) == inline-4.html inline-4-ref.html
+== column-contain-1a.html column-contain-1-ref.html
+== column-contain-1b.html column-contain-1-ref.html
+== column-contain-2.html column-contain-2-ref.html
+== block-in-inline-1.html block-in-inline-1-ref.html
+fuzzy(0-1,0-22) fuzzy-if(winWidget&&!layersGPUAccelerated,0-116,0-1320) fuzzy-if(Android,0-8,0-1533) == block-in-inline-2.html block-in-inline-2-ref.html
+fuzzy(0-1,0-220) fuzzy-if(winWidget&&!layersGPUAccelerated,0-116,0-1320) == block-in-inline-3.html block-in-inline-3-ref.html
+== block-in-inline-continuations.html block-in-inline-continuations-ref.html
+== iframe-1.html iframe-1-ref.html
+== transformed-1.html transformed-1-ref.html
+fuzzy-if(Android,0-8,0-9) fuzzy-if(gtkWidget,10-17,12-32) fuzzy-if(cocoaWidget,7-8,18-42) skip-if(!asyncPan) fails-if(useDrawSnapshot) == transformed-2.html transformed-2-ref.html # Bug 1604644
+skip-if(!asyncPan) fuzzy-if(Android,0-14,0-11) fuzzy-if(gtkWidget,19-30,12-32) fuzzy-if(cocoaWidget,13-16,20-44) fails-if(useDrawSnapshot) == nested-sticky-1.html nested-sticky-1-ref.html # Bug 1604644
+skip-if(!asyncPan) fuzzy-if(Android,0-14,0-11) fuzzy-if(gtkWidget,19-30,12-32) fuzzy-if(cocoaWidget,13-16,20-44) fails-if(useDrawSnapshot) == nested-sticky-2.html nested-sticky-2-ref.html # Bug 1604644
diff --git a/layout/reftests/position-sticky/right-1-ref.html b/layout/reftests/position-sticky/right-1-ref.html
new file mode 100644
index 0000000000..dc2457e871
--- /dev/null
+++ b/layout/reftests/position-sticky/right-1-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/right-1.html b/layout/reftests/position-sticky/right-1.html
new file mode 100644
index 0000000000..8e0d96a48f
--- /dev/null
+++ b/layout/reftests/position-sticky/right-1.html
@@ -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>
diff --git a/layout/reftests/position-sticky/right-2-ref.html b/layout/reftests/position-sticky/right-2-ref.html
new file mode 100644
index 0000000000..6b3549293c
--- /dev/null
+++ b/layout/reftests/position-sticky/right-2-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/right-2.html b/layout/reftests/position-sticky/right-2.html
new file mode 100644
index 0000000000..a8d7a14fd6
--- /dev/null
+++ b/layout/reftests/position-sticky/right-2.html
@@ -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>
diff --git a/layout/reftests/position-sticky/right-3-ref.html b/layout/reftests/position-sticky/right-3-ref.html
new file mode 100644
index 0000000000..a2462b40f2
--- /dev/null
+++ b/layout/reftests/position-sticky/right-3-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/right-3.html b/layout/reftests/position-sticky/right-3.html
new file mode 100644
index 0000000000..25b6431425
--- /dev/null
+++ b/layout/reftests/position-sticky/right-3.html
@@ -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>
diff --git a/layout/reftests/position-sticky/scrollframe-auto-1-ref.html b/layout/reftests/position-sticky/scrollframe-auto-1-ref.html
new file mode 100644
index 0000000000..f35afdf7fe
--- /dev/null
+++ b/layout/reftests/position-sticky/scrollframe-auto-1-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/scrollframe-auto-1.html b/layout/reftests/position-sticky/scrollframe-auto-1.html
new file mode 100644
index 0000000000..4132154ceb
--- /dev/null
+++ b/layout/reftests/position-sticky/scrollframe-auto-1.html
@@ -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>
diff --git a/layout/reftests/position-sticky/scrollframe-reflow-1-ref.html b/layout/reftests/position-sticky/scrollframe-reflow-1-ref.html
new file mode 100644
index 0000000000..b3fa4f230d
--- /dev/null
+++ b/layout/reftests/position-sticky/scrollframe-reflow-1-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/scrollframe-reflow-1.html b/layout/reftests/position-sticky/scrollframe-reflow-1.html
new file mode 100644
index 0000000000..3feb1eca44
--- /dev/null
+++ b/layout/reftests/position-sticky/scrollframe-reflow-1.html
@@ -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>
diff --git a/layout/reftests/position-sticky/scrollframe-reflow-2-ref.html b/layout/reftests/position-sticky/scrollframe-reflow-2-ref.html
new file mode 100644
index 0000000000..e5b029687c
--- /dev/null
+++ b/layout/reftests/position-sticky/scrollframe-reflow-2-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/scrollframe-reflow-2.html b/layout/reftests/position-sticky/scrollframe-reflow-2.html
new file mode 100644
index 0000000000..b48fe00379
--- /dev/null
+++ b/layout/reftests/position-sticky/scrollframe-reflow-2.html
@@ -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>
diff --git a/layout/reftests/position-sticky/stacking-context-1-ref.html b/layout/reftests/position-sticky/stacking-context-1-ref.html
new file mode 100644
index 0000000000..7d7db098fe
--- /dev/null
+++ b/layout/reftests/position-sticky/stacking-context-1-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/stacking-context-1.html b/layout/reftests/position-sticky/stacking-context-1.html
new file mode 100644
index 0000000000..103f32a124
--- /dev/null
+++ b/layout/reftests/position-sticky/stacking-context-1.html
@@ -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>
diff --git a/layout/reftests/position-sticky/top-1-ref.html b/layout/reftests/position-sticky/top-1-ref.html
new file mode 100644
index 0000000000..edb94fdbe8
--- /dev/null
+++ b/layout/reftests/position-sticky/top-1-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/top-1.html b/layout/reftests/position-sticky/top-1.html
new file mode 100644
index 0000000000..a7bdb58e36
--- /dev/null
+++ b/layout/reftests/position-sticky/top-1.html
@@ -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>
diff --git a/layout/reftests/position-sticky/top-2-ref.html b/layout/reftests/position-sticky/top-2-ref.html
new file mode 100644
index 0000000000..93788f3fe2
--- /dev/null
+++ b/layout/reftests/position-sticky/top-2-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/top-2.html b/layout/reftests/position-sticky/top-2.html
new file mode 100644
index 0000000000..d3d14f4ed9
--- /dev/null
+++ b/layout/reftests/position-sticky/top-2.html
@@ -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>
diff --git a/layout/reftests/position-sticky/top-3-ref.html b/layout/reftests/position-sticky/top-3-ref.html
new file mode 100644
index 0000000000..8e72c08039
--- /dev/null
+++ b/layout/reftests/position-sticky/top-3-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/top-3.html b/layout/reftests/position-sticky/top-3.html
new file mode 100644
index 0000000000..a44baae2e6
--- /dev/null
+++ b/layout/reftests/position-sticky/top-3.html
@@ -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>
diff --git a/layout/reftests/position-sticky/top-4-ref.html b/layout/reftests/position-sticky/top-4-ref.html
new file mode 100644
index 0000000000..8eaed81980
--- /dev/null
+++ b/layout/reftests/position-sticky/top-4-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/top-4.html b/layout/reftests/position-sticky/top-4.html
new file mode 100644
index 0000000000..71f7ff01c1
--- /dev/null
+++ b/layout/reftests/position-sticky/top-4.html
@@ -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>
diff --git a/layout/reftests/position-sticky/top-5-ref.html b/layout/reftests/position-sticky/top-5-ref.html
new file mode 100644
index 0000000000..70d821344e
--- /dev/null
+++ b/layout/reftests/position-sticky/top-5-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/top-5.html b/layout/reftests/position-sticky/top-5.html
new file mode 100644
index 0000000000..2795806956
--- /dev/null
+++ b/layout/reftests/position-sticky/top-5.html
@@ -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>
diff --git a/layout/reftests/position-sticky/top-6-ref.html b/layout/reftests/position-sticky/top-6-ref.html
new file mode 100644
index 0000000000..9e96ee8bec
--- /dev/null
+++ b/layout/reftests/position-sticky/top-6-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/top-6.html b/layout/reftests/position-sticky/top-6.html
new file mode 100644
index 0000000000..1e2909561e
--- /dev/null
+++ b/layout/reftests/position-sticky/top-6.html
@@ -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>
diff --git a/layout/reftests/position-sticky/top-bottom-1-ref.html b/layout/reftests/position-sticky/top-bottom-1-ref.html
new file mode 100644
index 0000000000..3d1d6a35b5
--- /dev/null
+++ b/layout/reftests/position-sticky/top-bottom-1-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/top-bottom-1.html b/layout/reftests/position-sticky/top-bottom-1.html
new file mode 100644
index 0000000000..b73d40e825
--- /dev/null
+++ b/layout/reftests/position-sticky/top-bottom-1.html
@@ -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>
diff --git a/layout/reftests/position-sticky/top-bottom-2-ref.html b/layout/reftests/position-sticky/top-bottom-2-ref.html
new file mode 100644
index 0000000000..3e440bc8fe
--- /dev/null
+++ b/layout/reftests/position-sticky/top-bottom-2-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/top-bottom-2.html b/layout/reftests/position-sticky/top-bottom-2.html
new file mode 100644
index 0000000000..31443f5dff
--- /dev/null
+++ b/layout/reftests/position-sticky/top-bottom-2.html
@@ -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>
diff --git a/layout/reftests/position-sticky/top-bottom-3-ref.html b/layout/reftests/position-sticky/top-bottom-3-ref.html
new file mode 100644
index 0000000000..d1a8e2429c
--- /dev/null
+++ b/layout/reftests/position-sticky/top-bottom-3-ref.html
@@ -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>
diff --git a/layout/reftests/position-sticky/top-bottom-3.html b/layout/reftests/position-sticky/top-bottom-3.html
new file mode 100644
index 0000000000..b42f08919b
--- /dev/null
+++ b/layout/reftests/position-sticky/top-bottom-3.html
@@ -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>
diff --git a/layout/reftests/position-sticky/transformed-1-ref.html b/layout/reftests/position-sticky/transformed-1-ref.html
new file mode 100644
index 0000000000..0d08d67aec
--- /dev/null
+++ b/layout/reftests/position-sticky/transformed-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html style="margin: 0">
+ <body style="margin: 0">
+ <div style="height: 70px; background-color: blue"></div>
+ <div style="height: 2000px;">
+ <div style="margin-top: 50px; width: 100px; height: 100px; background-color: green"></div>
+ </div>
+</html>
diff --git a/layout/reftests/position-sticky/transformed-1.html b/layout/reftests/position-sticky/transformed-1.html
new file mode 100644
index 0000000000..98f82b1150
--- /dev/null
+++ b/layout/reftests/position-sticky/transformed-1.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html style="margin: 0">
+ <body style="margin: 0">
+ <div style="height: 70px; background-color: blue"></div>
+ <div style="height: 2000px; transform: translateY(50px)">
+ <div style="position:sticky; top: 70px; width: 100px; height: 100px; background-color: green"></div>
+ </div>
+</html>
diff --git a/layout/reftests/position-sticky/transformed-2-ref.html b/layout/reftests/position-sticky/transformed-2-ref.html
new file mode 100644
index 0000000000..bf2dc6704c
--- /dev/null
+++ b/layout/reftests/position-sticky/transformed-2-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html style="margin: 0" class="reftest-wait">
+ <body style="margin: 0">
+ <div style="height: 70px; background-color: blue"></div>
+ <div style="height: 1950px;">
+ <div style="margin-top: 100px; width: 100px; height: 100px; background-color: green"></div>
+ </div>
+ <script>
+ addEventListener('load', function() {
+ document.scrollingElement.scrollTop = 50;
+ document.documentElement.classList.remove('reftest-wait');
+ }, false);
+ </script>
+</html>
diff --git a/layout/reftests/position-sticky/transformed-2.html b/layout/reftests/position-sticky/transformed-2.html
new file mode 100644
index 0000000000..8d549fcfde
--- /dev/null
+++ b/layout/reftests/position-sticky/transformed-2.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html style="margin: 0" reftest-async-scroll reftest-async-scroll-y="50">
+ <body style="margin: 0">
+ <div style="height: 70px; background-color: blue"></div>
+ <div style="height: 2000px; transform: translateY(50px)">
+ <div style="position:sticky; top: 70px; width: 100px; height: 100px; background-color: green"></div>
+ </div>
+</html>