From 5f8de423f190bbb79a62f804151bc24824fa32d8 Mon Sep 17 00:00:00 2001
From: "Matt A. Tobin" <mattatobin@localhost.localdomain>
Date: Fri, 2 Feb 2018 04:16:08 -0500
Subject: Add m-esr52 at 52.6.0

---
 layout/reftests/position-sticky/ahem.css           |  4 ++
 .../position-sticky/block-in-inline-1-ref.html     | 41 ++++++++++++++++
 .../position-sticky/block-in-inline-1.html         | 42 +++++++++++++++++
 .../position-sticky/block-in-inline-2-ref.html     | 41 ++++++++++++++++
 .../position-sticky/block-in-inline-2.html         | 45 ++++++++++++++++++
 .../position-sticky/block-in-inline-3-ref.html     | 41 ++++++++++++++++
 .../position-sticky/block-in-inline-3.html         | 46 ++++++++++++++++++
 .../block-in-inline-continuations-inner.html       | 30 ++++++++++++
 .../block-in-inline-continuations-ref-inner.html   | 24 ++++++++++
 .../block-in-inline-continuations-ref.html         | 18 +++++++
 .../block-in-inline-continuations.html             | 20 ++++++++
 layout/reftests/position-sticky/bottom-1-ref.html  | 25 ++++++++++
 layout/reftests/position-sticky/bottom-1.html      | 29 ++++++++++++
 layout/reftests/position-sticky/bottom-2-ref.html  | 25 ++++++++++
 layout/reftests/position-sticky/bottom-2a.html     | 29 ++++++++++++
 layout/reftests/position-sticky/bottom-2b.html     | 29 ++++++++++++
 layout/reftests/position-sticky/bottom-2c.html     | 30 ++++++++++++
 layout/reftests/position-sticky/bottom-3-ref.html  | 32 +++++++++++++
 layout/reftests/position-sticky/bottom-3.html      | 37 +++++++++++++++
 layout/reftests/position-sticky/bottom-4-ref.html  | 34 +++++++++++++
 layout/reftests/position-sticky/bottom-4.html      | 41 ++++++++++++++++
 .../position-sticky/column-contain-1-ref.html      | 42 +++++++++++++++++
 .../position-sticky/column-contain-1a.html         | 45 ++++++++++++++++++
 .../position-sticky/column-contain-1b.html         | 47 ++++++++++++++++++
 .../position-sticky/column-contain-2-ref.html      | 48 +++++++++++++++++++
 .../reftests/position-sticky/column-contain-2.html | 51 ++++++++++++++++++++
 .../position-sticky/containing-block-1-ref.html    | 32 +++++++++++++
 .../position-sticky/containing-block-1.html        | 35 ++++++++++++++
 layout/reftests/position-sticky/initial-1-ref.html | 27 +++++++++++
 layout/reftests/position-sticky/initial-1.html     | 30 ++++++++++++
 .../position-sticky/initial-scroll-1-ref.html      | 35 ++++++++++++++
 .../reftests/position-sticky/initial-scroll-1.html | 38 +++++++++++++++
 layout/reftests/position-sticky/inline-1-ref.html  | 30 ++++++++++++
 layout/reftests/position-sticky/inline-1.html      | 29 ++++++++++++
 layout/reftests/position-sticky/inline-2-ref.html  | 30 ++++++++++++
 layout/reftests/position-sticky/inline-2.html      | 37 +++++++++++++++
 layout/reftests/position-sticky/inline-3-ref.html  | 30 ++++++++++++
 layout/reftests/position-sticky/inline-3.html      | 34 +++++++++++++
 layout/reftests/position-sticky/inline-4-ref.html  | 45 ++++++++++++++++++
 layout/reftests/position-sticky/inline-4.html      | 48 +++++++++++++++++++
 .../position-sticky/inner-table-1-ref.html         | 26 ++++++++++
 layout/reftests/position-sticky/inner-table-1.html | 35 ++++++++++++++
 layout/reftests/position-sticky/left-1-ref.html    | 42 +++++++++++++++++
 layout/reftests/position-sticky/left-1.html        | 51 ++++++++++++++++++++
 layout/reftests/position-sticky/left-2-ref.html    | 37 +++++++++++++++
 layout/reftests/position-sticky/left-2.html        | 51 ++++++++++++++++++++
 layout/reftests/position-sticky/left-3-ref.html    | 39 +++++++++++++++
 layout/reftests/position-sticky/left-3.html        | 51 ++++++++++++++++++++
 .../reftests/position-sticky/left-right-1-ref.html | 42 +++++++++++++++++
 layout/reftests/position-sticky/left-right-1.html  | 46 ++++++++++++++++++
 .../reftests/position-sticky/left-right-2-ref.html | 33 +++++++++++++
 layout/reftests/position-sticky/left-right-2.html  | 50 ++++++++++++++++++++
 .../reftests/position-sticky/left-right-3-ref.html | 34 +++++++++++++
 layout/reftests/position-sticky/left-right-3.html  | 50 ++++++++++++++++++++
 layout/reftests/position-sticky/margin-1-ref.html  | 31 ++++++++++++
 layout/reftests/position-sticky/margin-1.html      | 41 ++++++++++++++++
 .../position-sticky/overconstrained-1-ref.html     | 25 ++++++++++
 .../position-sticky/overconstrained-1.html         | 31 ++++++++++++
 .../position-sticky/overconstrained-2-ref.html     | 40 ++++++++++++++++
 .../position-sticky/overconstrained-2.html         | 46 ++++++++++++++++++
 .../position-sticky/overconstrained-3-ref.html     | 28 +++++++++++
 .../position-sticky/overconstrained-3.html         | 51 ++++++++++++++++++++
 .../position-sticky/overcontain-1-ref.html         | 20 ++++++++
 layout/reftests/position-sticky/overcontain-1.html | 25 ++++++++++
 layout/reftests/position-sticky/padding-1-ref.html | 40 ++++++++++++++++
 layout/reftests/position-sticky/padding-1.html     | 37 +++++++++++++++
 layout/reftests/position-sticky/padding-2-ref.html | 29 ++++++++++++
 layout/reftests/position-sticky/padding-2.html     | 41 ++++++++++++++++
 layout/reftests/position-sticky/padding-3-ref.html | 40 ++++++++++++++++
 layout/reftests/position-sticky/padding-3.html     | 39 +++++++++++++++
 layout/reftests/position-sticky/reftest-stylo.list | 55 ++++++++++++++++++++++
 layout/reftests/position-sticky/reftest.list       | 51 ++++++++++++++++++++
 layout/reftests/position-sticky/right-1-ref.html   | 40 ++++++++++++++++
 layout/reftests/position-sticky/right-1.html       | 54 +++++++++++++++++++++
 layout/reftests/position-sticky/right-2-ref.html   | 41 ++++++++++++++++
 layout/reftests/position-sticky/right-2.html       | 54 +++++++++++++++++++++
 layout/reftests/position-sticky/right-3-ref.html   | 41 ++++++++++++++++
 layout/reftests/position-sticky/right-3.html       | 54 +++++++++++++++++++++
 .../position-sticky/scrollframe-auto-1-ref.html    | 34 +++++++++++++
 .../position-sticky/scrollframe-auto-1.html        | 36 ++++++++++++++
 .../position-sticky/scrollframe-reflow-1-ref.html  | 25 ++++++++++
 .../position-sticky/scrollframe-reflow-1.html      | 36 ++++++++++++++
 .../position-sticky/scrollframe-reflow-2-ref.html  | 25 ++++++++++
 .../position-sticky/scrollframe-reflow-2.html      | 36 ++++++++++++++
 .../position-sticky/stacking-context-1-ref.html    | 39 +++++++++++++++
 .../position-sticky/stacking-context-1.html        | 45 ++++++++++++++++++
 layout/reftests/position-sticky/top-1-ref.html     | 34 +++++++++++++
 layout/reftests/position-sticky/top-1.html         | 41 ++++++++++++++++
 layout/reftests/position-sticky/top-2-ref.html     | 34 +++++++++++++
 layout/reftests/position-sticky/top-2.html         | 45 ++++++++++++++++++
 layout/reftests/position-sticky/top-3-ref.html     | 38 +++++++++++++++
 layout/reftests/position-sticky/top-3.html         | 45 ++++++++++++++++++
 layout/reftests/position-sticky/top-4-ref.html     | 30 ++++++++++++
 layout/reftests/position-sticky/top-4.html         | 45 ++++++++++++++++++
 layout/reftests/position-sticky/top-5-ref.html     | 28 +++++++++++
 layout/reftests/position-sticky/top-5.html         | 45 ++++++++++++++++++
 layout/reftests/position-sticky/top-6-ref.html     | 32 +++++++++++++
 layout/reftests/position-sticky/top-6.html         | 49 +++++++++++++++++++
 .../reftests/position-sticky/top-bottom-1-ref.html | 27 +++++++++++
 layout/reftests/position-sticky/top-bottom-1.html  | 31 ++++++++++++
 .../reftests/position-sticky/top-bottom-2-ref.html | 23 +++++++++
 layout/reftests/position-sticky/top-bottom-2.html  | 35 ++++++++++++++
 .../reftests/position-sticky/top-bottom-3-ref.html | 25 ++++++++++
 layout/reftests/position-sticky/top-bottom-3.html  | 35 ++++++++++++++
 104 files changed, 3835 insertions(+)
 create mode 100644 layout/reftests/position-sticky/ahem.css
 create mode 100644 layout/reftests/position-sticky/block-in-inline-1-ref.html
 create mode 100644 layout/reftests/position-sticky/block-in-inline-1.html
 create mode 100644 layout/reftests/position-sticky/block-in-inline-2-ref.html
 create mode 100644 layout/reftests/position-sticky/block-in-inline-2.html
 create mode 100644 layout/reftests/position-sticky/block-in-inline-3-ref.html
 create mode 100644 layout/reftests/position-sticky/block-in-inline-3.html
 create mode 100644 layout/reftests/position-sticky/block-in-inline-continuations-inner.html
 create mode 100644 layout/reftests/position-sticky/block-in-inline-continuations-ref-inner.html
 create mode 100644 layout/reftests/position-sticky/block-in-inline-continuations-ref.html
 create mode 100644 layout/reftests/position-sticky/block-in-inline-continuations.html
 create mode 100644 layout/reftests/position-sticky/bottom-1-ref.html
 create mode 100644 layout/reftests/position-sticky/bottom-1.html
 create mode 100644 layout/reftests/position-sticky/bottom-2-ref.html
 create mode 100644 layout/reftests/position-sticky/bottom-2a.html
 create mode 100644 layout/reftests/position-sticky/bottom-2b.html
 create mode 100644 layout/reftests/position-sticky/bottom-2c.html
 create mode 100644 layout/reftests/position-sticky/bottom-3-ref.html
 create mode 100644 layout/reftests/position-sticky/bottom-3.html
 create mode 100644 layout/reftests/position-sticky/bottom-4-ref.html
 create mode 100644 layout/reftests/position-sticky/bottom-4.html
 create mode 100644 layout/reftests/position-sticky/column-contain-1-ref.html
 create mode 100644 layout/reftests/position-sticky/column-contain-1a.html
 create mode 100644 layout/reftests/position-sticky/column-contain-1b.html
 create mode 100644 layout/reftests/position-sticky/column-contain-2-ref.html
 create mode 100644 layout/reftests/position-sticky/column-contain-2.html
 create mode 100644 layout/reftests/position-sticky/containing-block-1-ref.html
 create mode 100644 layout/reftests/position-sticky/containing-block-1.html
 create mode 100644 layout/reftests/position-sticky/initial-1-ref.html
 create mode 100644 layout/reftests/position-sticky/initial-1.html
 create mode 100644 layout/reftests/position-sticky/initial-scroll-1-ref.html
 create mode 100644 layout/reftests/position-sticky/initial-scroll-1.html
 create mode 100644 layout/reftests/position-sticky/inline-1-ref.html
 create mode 100644 layout/reftests/position-sticky/inline-1.html
 create mode 100644 layout/reftests/position-sticky/inline-2-ref.html
 create mode 100644 layout/reftests/position-sticky/inline-2.html
 create mode 100644 layout/reftests/position-sticky/inline-3-ref.html
 create mode 100644 layout/reftests/position-sticky/inline-3.html
 create mode 100644 layout/reftests/position-sticky/inline-4-ref.html
 create mode 100644 layout/reftests/position-sticky/inline-4.html
 create mode 100644 layout/reftests/position-sticky/inner-table-1-ref.html
 create mode 100644 layout/reftests/position-sticky/inner-table-1.html
 create mode 100644 layout/reftests/position-sticky/left-1-ref.html
 create mode 100644 layout/reftests/position-sticky/left-1.html
 create mode 100644 layout/reftests/position-sticky/left-2-ref.html
 create mode 100644 layout/reftests/position-sticky/left-2.html
 create mode 100644 layout/reftests/position-sticky/left-3-ref.html
 create mode 100644 layout/reftests/position-sticky/left-3.html
 create mode 100644 layout/reftests/position-sticky/left-right-1-ref.html
 create mode 100644 layout/reftests/position-sticky/left-right-1.html
 create mode 100644 layout/reftests/position-sticky/left-right-2-ref.html
 create mode 100644 layout/reftests/position-sticky/left-right-2.html
 create mode 100644 layout/reftests/position-sticky/left-right-3-ref.html
 create mode 100644 layout/reftests/position-sticky/left-right-3.html
 create mode 100644 layout/reftests/position-sticky/margin-1-ref.html
 create mode 100644 layout/reftests/position-sticky/margin-1.html
 create mode 100644 layout/reftests/position-sticky/overconstrained-1-ref.html
 create mode 100644 layout/reftests/position-sticky/overconstrained-1.html
 create mode 100644 layout/reftests/position-sticky/overconstrained-2-ref.html
 create mode 100644 layout/reftests/position-sticky/overconstrained-2.html
 create mode 100644 layout/reftests/position-sticky/overconstrained-3-ref.html
 create mode 100644 layout/reftests/position-sticky/overconstrained-3.html
 create mode 100644 layout/reftests/position-sticky/overcontain-1-ref.html
 create mode 100644 layout/reftests/position-sticky/overcontain-1.html
 create mode 100644 layout/reftests/position-sticky/padding-1-ref.html
 create mode 100644 layout/reftests/position-sticky/padding-1.html
 create mode 100644 layout/reftests/position-sticky/padding-2-ref.html
 create mode 100644 layout/reftests/position-sticky/padding-2.html
 create mode 100644 layout/reftests/position-sticky/padding-3-ref.html
 create mode 100644 layout/reftests/position-sticky/padding-3.html
 create mode 100644 layout/reftests/position-sticky/reftest-stylo.list
 create mode 100644 layout/reftests/position-sticky/reftest.list
 create mode 100644 layout/reftests/position-sticky/right-1-ref.html
 create mode 100644 layout/reftests/position-sticky/right-1.html
 create mode 100644 layout/reftests/position-sticky/right-2-ref.html
 create mode 100644 layout/reftests/position-sticky/right-2.html
 create mode 100644 layout/reftests/position-sticky/right-3-ref.html
 create mode 100644 layout/reftests/position-sticky/right-3.html
 create mode 100644 layout/reftests/position-sticky/scrollframe-auto-1-ref.html
 create mode 100644 layout/reftests/position-sticky/scrollframe-auto-1.html
 create mode 100644 layout/reftests/position-sticky/scrollframe-reflow-1-ref.html
 create mode 100644 layout/reftests/position-sticky/scrollframe-reflow-1.html
 create mode 100644 layout/reftests/position-sticky/scrollframe-reflow-2-ref.html
 create mode 100644 layout/reftests/position-sticky/scrollframe-reflow-2.html
 create mode 100644 layout/reftests/position-sticky/stacking-context-1-ref.html
 create mode 100644 layout/reftests/position-sticky/stacking-context-1.html
 create mode 100644 layout/reftests/position-sticky/top-1-ref.html
 create mode 100644 layout/reftests/position-sticky/top-1.html
 create mode 100644 layout/reftests/position-sticky/top-2-ref.html
 create mode 100644 layout/reftests/position-sticky/top-2.html
 create mode 100644 layout/reftests/position-sticky/top-3-ref.html
 create mode 100644 layout/reftests/position-sticky/top-3.html
 create mode 100644 layout/reftests/position-sticky/top-4-ref.html
 create mode 100644 layout/reftests/position-sticky/top-4.html
 create mode 100644 layout/reftests/position-sticky/top-5-ref.html
 create mode 100644 layout/reftests/position-sticky/top-5.html
 create mode 100644 layout/reftests/position-sticky/top-6-ref.html
 create mode 100644 layout/reftests/position-sticky/top-6.html
 create mode 100644 layout/reftests/position-sticky/top-bottom-1-ref.html
 create mode 100644 layout/reftests/position-sticky/top-bottom-1.html
 create mode 100644 layout/reftests/position-sticky/top-bottom-2-ref.html
 create mode 100644 layout/reftests/position-sticky/top-bottom-2.html
 create mode 100644 layout/reftests/position-sticky/top-bottom-3-ref.html
 create mode 100644 layout/reftests/position-sticky/top-bottom-3.html

(limited to 'layout/reftests/position-sticky')

diff --git a/layout/reftests/position-sticky/ahem.css b/layout/reftests/position-sticky/ahem.css
new file mode 100644
index 000000000..884a41198
--- /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 000000000..ce6f25806
--- /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 000000000..a613421d9
--- /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 000000000..08239c50b
--- /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 000000000..084f9b04f
--- /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 000000000..13e29a9f7
--- /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 000000000..f4acbc7f1
--- /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-inner.html b/layout/reftests/position-sticky/block-in-inline-continuations-inner.html
new file mode 100644
index 000000000..316c959f9
--- /dev/null
+++ b/layout/reftests/position-sticky/block-in-inline-continuations-inner.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>iframe for CSS Test: Sticky Positioning - continuations have no effect when resizing</title>
+    <link rel="author" title="Abel Lin" href="mailto:alin@mozilla.com">
+    <link rel="stylesheet" type="text/css" href="ahem.css">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+        font: 20px/1 Ahem;
+      }
+      #sticky {
+        display: inline;
+        position: sticky;
+        top: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div id="sticky">
+          <div>in block</div>
+          after block
+      </div>
+    </div>
+</body>
+</html>
diff --git a/layout/reftests/position-sticky/block-in-inline-continuations-ref-inner.html b/layout/reftests/position-sticky/block-in-inline-continuations-ref-inner.html
new file mode 100644
index 000000000..912a30e31
--- /dev/null
+++ b/layout/reftests/position-sticky/block-in-inline-continuations-ref-inner.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>iframe for 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" type="text/css" href="ahem.css">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+        font: 20px/1 Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <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-ref.html b/layout/reftests/position-sticky/block-in-inline-continuations-ref.html
new file mode 100644
index 000000000..3aded638b
--- /dev/null
+++ b/layout/reftests/position-sticky/block-in-inline-continuations-ref.html
@@ -0,0 +1,18 @@
+<!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">
+    <script>
+    function run() {
+      document.getElementById("toresize").width = "750px";
+    }
+    </script>
+  </head>
+  <body onload="run()">
+    <iframe id="toresize" src="block-in-inline-continuations-ref-inner.html">
+    </iframe>
+  </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 000000000..fc5cba5f5
--- /dev/null
+++ b/layout/reftests/position-sticky/block-in-inline-continuations.html
@@ -0,0 +1,20 @@
+<!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">
+    <script>
+    function run() {
+      document.getElementById("toresize").width = "750px";
+    }
+    </script>
+  </head>
+  <body onload="run()">
+    <iframe id="toresize" src="block-in-inline-continuations-inner.html">
+    </iframe>
+  </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 000000000..ac107c0d0
--- /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 000000000..183e012f0
--- /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 000000000..368dc22d4
--- /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 000000000..5a52cb904
--- /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 000000000..62ba2499b
--- /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 000000000..2408b7d7e
--- /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 000000000..c40d5c965
--- /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 000000000..996b02268
--- /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 000000000..822565bfd
--- /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 000000000..5a06b4ec9
--- /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 000000000..39ed2b1cb
--- /dev/null
+++ b/layout/reftests/position-sticky/column-contain-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 {
+        overflow: hidden;
+        height: 200px;
+        line-height: 1;
+      }
+      #contain {
+        -moz-column-count: 2;
+        column-count: 2;
+        -moz-column-rule: 1px solid black;
+        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 000000000..136851dc9
--- /dev/null
+++ b/layout/reftests/position-sticky/column-contain-1a.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;
+      }
+      #contain {
+        -moz-column-count: 2;
+        column-count: 2;
+        -moz-column-rule: 1px solid black;
+        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 000000000..f9e16681e
--- /dev/null
+++ b/layout/reftests/position-sticky/column-contain-1b.html
@@ -0,0 +1,47 @@
+<!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 {
+        -moz-column-count: 2;
+        column-count: 2;
+        -moz-column-rule: 1px solid black;
+        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 000000000..1a552d540
--- /dev/null
+++ b/layout/reftests/position-sticky/column-contain-2-ref.html
@@ -0,0 +1,48 @@
+<!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 {
+        -moz-column-count: 2;
+        column-count: 2;
+        -moz-column-rule: 1px solid black;
+        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 000000000..5538b7391
--- /dev/null
+++ b/layout/reftests/position-sticky/column-contain-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 - 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 {
+        -moz-column-count: 2;
+        column-count: 2;
+        -moz-column-rule: 1px solid black;
+        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 000000000..ccb25d810
--- /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 000000000..cb09717e5
--- /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/initial-1-ref.html b/layout/reftests/position-sticky/initial-1-ref.html
new file mode 100644
index 000000000..70b0b6eb0
--- /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 000000000..6e0bb6705
--- /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 000000000..bb021dbe7
--- /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 000000000..343c6295e
--- /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 000000000..2c3bc2470
--- /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 000000000..f2569fc79
--- /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 000000000..98aabacc7
--- /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 000000000..7ebfa2a34
--- /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");
+      }, false);
+    </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 000000000..847860a3c
--- /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 000000000..f06f55d53
--- /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 000000000..136ff0737
--- /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 000000000..2626d15af
--- /dev/null
+++ b/layout/reftests/position-sticky/inline-4.html
@@ -0,0 +1,48 @@
+<!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: 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"
+         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/inner-table-1-ref.html b/layout/reftests/position-sticky/inner-table-1-ref.html
new file mode 100644
index 000000000..379841fae
--- /dev/null
+++ b/layout/reftests/position-sticky/inner-table-1-ref.html
@@ -0,0 +1,26 @@
+<!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">
+  </head>
+  <body>
+    <table>
+      <thead>
+        <tr>
+          <td>a</td>
+        </tr>
+      </thead>
+      <tr>
+        <td>b</td>
+      </tr>
+      <tr>
+        <td>c</td>
+      </tr>
+      <tr>
+        <td>d</td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/inner-table-1.html b/layout/reftests/position-sticky/inner-table-1.html
new file mode 100644
index 000000000..212e658fd
--- /dev/null
+++ b/layout/reftests/position-sticky/inner-table-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 - inner table elements</title>
+    <link rel="author" title="Corey Ford" href="mailto:corey@coreyford.name">
+    <link rel="match" href="inner-table-1-ref.html">
+    <meta name="assert" content="Sticky positioning on inner table elements should have no effect (until bug 35168 is fixed)">
+    <style>
+      .sticky {
+        position: sticky;
+        top: 1000px;
+      }
+    </style>
+  </head>
+  <body>
+    <table>
+      <thead class="sticky">
+        <tr>
+          <td>a</td>
+        </tr>
+      </thead>
+      <tr class="sticky">
+        <td>b</td>
+      </tr>
+      <tr>
+        <td class="sticky">c</td>
+      </tr>
+      <tr>
+        <td>d</td>
+      </tr>
+    </table>
+  </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 000000000..ebcf46f4f
--- /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 000000000..779f93097
--- /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 000000000..ca5c35a68
--- /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 000000000..b3c3e4ee3
--- /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 000000000..1ae2eaf41
--- /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 000000000..ef9e2b303
--- /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 000000000..89b7a0608
--- /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 000000000..ca7a77ff7
--- /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 000000000..267068339
--- /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 000000000..7d9068f2a
--- /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 000000000..9648f4b28
--- /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 000000000..e62978220
--- /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 000000000..f577b077a
--- /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 000000000..7a084d804
--- /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/overconstrained-1-ref.html b/layout/reftests/position-sticky/overconstrained-1-ref.html
new file mode 100644
index 000000000..f458c239d
--- /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 000000000..95d46b241
--- /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 000000000..8593fa3f5
--- /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 000000000..f399c912e
--- /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 000000000..387c28eda
--- /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 000000000..852d35683
--- /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 000000000..fd9c2fc55
--- /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 000000000..25f31dc59
--- /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 000000000..e23b7c9d3
--- /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 000000000..1a154a2e5
--- /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 000000000..643c50730
--- /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 000000000..03080bf10
--- /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 000000000..153560bb5
--- /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: 100px"></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 000000000..fc84983d6
--- /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-stylo.list b/layout/reftests/position-sticky/reftest-stylo.list
new file mode 100644
index 000000000..490b11f63
--- /dev/null
+++ b/layout/reftests/position-sticky/reftest-stylo.list
@@ -0,0 +1,55 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== top-1.html top-1.html
+fuzzy-if(Android,6,1568) == top-2.html top-2.html
+fuzzy-if(Android,6,2729) == top-3.html top-3.html
+== top-4.html top-4.html
+== top-5.html top-5.html
+fuzzy-if(Android,2,1568) == top-6.html top-6.html
+== bottom-1.html bottom-1.html
+== bottom-2a.html bottom-2a.html
+== bottom-2b.html bottom-2b.html
+== bottom-2c.html bottom-2c.html
+== bottom-3.html bottom-3.html
+== bottom-4.html bottom-4.html
+fuzzy-if(Android,2,4) == left-1.html left-1.html
+fuzzy-if(Android,2,4) == left-2.html left-2.html
+== left-3.html left-3.html
+== right-1.html right-1.html
+fuzzy-if(Android,2,4) == right-2.html right-2.html
+fuzzy-if(Android,2,4) == right-3.html right-3.html
+== margin-1.html margin-1.html
+== padding-1.html padding-1.html
+== padding-2.html padding-2.html
+random-if(B2G||Mulet) == padding-3.html padding-3.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== overcontain-1.html overcontain-1.html
+== initial-1.html initial-1.html
+== initial-scroll-1.html initial-scroll-1.html
+== scrollframe-reflow-1.html scrollframe-reflow-1.html
+== scrollframe-reflow-2.html scrollframe-reflow-2.html
+== scrollframe-auto-1.html scrollframe-auto-1.html
+== stacking-context-1.html stacking-context-1.html
+== top-bottom-1.html top-bottom-1.html
+== top-bottom-2.html top-bottom-2.html
+== top-bottom-3.html top-bottom-3.html
+== left-right-1.html left-right-1.html
+== left-right-2.html left-right-2.html
+== left-right-3.html left-right-3.html
+fuzzy-if(Android,4,810) == containing-block-1.html containing-block-1.html
+== overconstrained-1.html overconstrained-1.html
+== overconstrained-2.html overconstrained-2.html
+== overconstrained-3.html overconstrained-3.html
+== inline-1.html inline-1.html
+== inline-2.html inline-2.html
+fuzzy-if(OSX==1006||OSX==1007,64,100) fuzzy-if(OSX>=1008,99,210) == inline-3.html inline-3.html
+skip-if(!asyncPan) == inline-4.html inline-4.html
+== column-contain-1a.html column-contain-1a.html
+== column-contain-1b.html column-contain-1b.html
+== column-contain-2.html column-contain-2.html
+== block-in-inline-1.html block-in-inline-1.html
+fuzzy-if(skiaContent,1,22) fuzzy-if(winWidget&&!layersGPUAccelerated,116,1320) fuzzy-if(Android,8,1533) skip-if((B2G&&browserIsRemote)||Mulet) == block-in-inline-2.html block-in-inline-2.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+fuzzy-if(winWidget&&!layersGPUAccelerated,116,1320) fuzzy-if(Android,8,630) fuzzy-if(OSX>=1008,1,11) skip-if((B2G&&browserIsRemote)||Mulet) fuzzy-if(skiaContent,1,124) == block-in-inline-3.html block-in-inline-3.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== block-in-inline-continuations.html block-in-inline-continuations.html
+fuzzy-if(winWidget&&!layersGPUAccelerated,121,111) == inner-table-1.html inner-table-1.html
diff --git a/layout/reftests/position-sticky/reftest.list b/layout/reftests/position-sticky/reftest.list
new file mode 100644
index 000000000..2705d08fd
--- /dev/null
+++ b/layout/reftests/position-sticky/reftest.list
@@ -0,0 +1,51 @@
+== top-1.html top-1-ref.html
+fuzzy-if(Android,6,1568) == top-2.html top-2-ref.html
+fuzzy-if(Android,6,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,2,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,2,4) == left-1.html left-1-ref.html
+fuzzy-if(Android,2,4) == left-2.html left-2-ref.html
+== left-3.html left-3-ref.html
+== right-1.html right-1-ref.html
+fuzzy-if(Android,2,4) == right-2.html right-2-ref.html
+fuzzy-if(Android,2,4) == right-3.html right-3-ref.html
+== margin-1.html margin-1-ref.html
+== padding-1.html padding-1-ref.html
+== padding-2.html padding-2-ref.html
+== padding-3.html padding-3-ref.html
+== overcontain-1.html overcontain-1-ref.html
+== initial-1.html initial-1-ref.html
+== initial-scroll-1.html initial-scroll-1-ref.html
+== scrollframe-reflow-1.html scrollframe-reflow-1-ref.html
+== scrollframe-reflow-2.html scrollframe-reflow-2-ref.html
+== scrollframe-auto-1.html scrollframe-auto-1-ref.html
+fuzzy-if(Android,2,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,4,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==1006||OSX==1007,64,100) fuzzy-if(OSX>=1008,99,210) == inline-3.html inline-3-ref.html
+skip-if(!asyncPan) == inline-4.html inline-4-ref.html
+fails == 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-if(skiaContent,1,22) fuzzy-if(winWidget&&!layersGPUAccelerated,116,1320) fuzzy-if(Android,8,1533) == block-in-inline-2.html block-in-inline-2-ref.html
+fuzzy-if(Android,8,630) fuzzy-if(OSX>=1008,1,11) fuzzy-if(skiaContent,1,220) fuzzy-if(winWidget&&!layersGPUAccelerated,116,1320) == block-in-inline-3.html block-in-inline-3-ref.html
+== block-in-inline-continuations.html block-in-inline-continuations-ref.html
+fuzzy-if(winWidget&&!layersGPUAccelerated,140,140) == inner-table-1.html inner-table-1-ref.html
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 000000000..dc2457e87
--- /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 000000000..8e0d96a48
--- /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 000000000..6b3549293
--- /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 000000000..a8d7a14fd
--- /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 000000000..a2462b40f
--- /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 000000000..25b643142
--- /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 000000000..f35afdf7f
--- /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 000000000..4132154ce
--- /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 000000000..b3fa4f230
--- /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 000000000..3feb1eca4
--- /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 000000000..e5b029687
--- /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 000000000..b48fe0037
--- /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 000000000..7d7db098f
--- /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 000000000..103f32a12
--- /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 000000000..edb94fdbe
--- /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 000000000..a7bdb58e3
--- /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 000000000..93788f3fe
--- /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 000000000..d3d14f4ed
--- /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 000000000..8e72c0803
--- /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 000000000..a44baae2e
--- /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 000000000..8eaed8198
--- /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 000000000..71f7ff01c
--- /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 000000000..70d821344
--- /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 000000000..279580695
--- /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 000000000..9e96ee8be
--- /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 000000000..1e2909561
--- /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 000000000..3d1d6a35b
--- /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 000000000..b73d40e82
--- /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 000000000..3e440bc8f
--- /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 000000000..31443f5df
--- /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 000000000..d1a8e2429
--- /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 000000000..b42f08919
--- /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>
-- 
cgit v1.2.3