From 6bf0a5cb5034a7e684dcc3500e841785237ce2dd Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 19:32:43 +0200
Subject: Adding upstream version 1:115.7.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 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-ref.html         | 29 ++++++++++++
 .../block-in-inline-continuations.html             | 37 +++++++++++++++
 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      | 40 ++++++++++++++++
 .../position-sticky/column-contain-1a.html         | 43 +++++++++++++++++
 .../position-sticky/column-contain-1b.html         | 45 ++++++++++++++++++
 .../position-sticky/column-contain-2-ref.html      | 46 ++++++++++++++++++
 .../reftests/position-sticky/column-contain-2.html | 49 +++++++++++++++++++
 .../position-sticky/containing-block-1-ref.html    | 32 +++++++++++++
 .../position-sticky/containing-block-1.html        | 35 ++++++++++++++
 .../reftests/position-sticky/iframe-1-helper.html  | 17 +++++++
 layout/reftests/position-sticky/iframe-1-ref.html  | 20 ++++++++
 layout/reftests/position-sticky/iframe-1.html      | 15 ++++++
 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      | 49 +++++++++++++++++++
 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/nested-sticky-1-ref.html       | 34 +++++++++++++
 .../reftests/position-sticky/nested-sticky-1.html  | 30 ++++++++++++
 .../position-sticky/nested-sticky-2-ref.html       | 38 +++++++++++++++
 .../reftests/position-sticky/nested-sticky-2.html  | 32 +++++++++++++
 .../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.list       | 55 ++++++++++++++++++++++
 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 ++++++++++++++
 .../position-sticky/transformed-1-ref.html         |  8 ++++
 layout/reftests/position-sticky/transformed-1.html |  8 ++++
 .../position-sticky/transformed-2-ref.html         | 14 ++++++
 layout/reftests/position-sticky/transformed-2.html |  8 ++++
 110 files changed, 3912 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-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/iframe-1-helper.html
 create mode 100644 layout/reftests/position-sticky/iframe-1-ref.html
 create mode 100644 layout/reftests/position-sticky/iframe-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/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/nested-sticky-1-ref.html
 create mode 100644 layout/reftests/position-sticky/nested-sticky-1.html
 create mode 100644 layout/reftests/position-sticky/nested-sticky-2-ref.html
 create mode 100644 layout/reftests/position-sticky/nested-sticky-2.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.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
 create mode 100644 layout/reftests/position-sticky/transformed-1-ref.html
 create mode 100644 layout/reftests/position-sticky/transformed-1.html
 create mode 100644 layout/reftests/position-sticky/transformed-2-ref.html
 create mode 100644 layout/reftests/position-sticky/transformed-2.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 0000000000..884a41198b
--- /dev/null
+++ b/layout/reftests/position-sticky/ahem.css
@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "Ahem";
+  src: url(../fonts/Ahem.ttf);
+}
diff --git a/layout/reftests/position-sticky/block-in-inline-1-ref.html b/layout/reftests/position-sticky/block-in-inline-1-ref.html
new file mode 100644
index 0000000000..ce6f258062
--- /dev/null
+++ b/layout/reftests/position-sticky/block-in-inline-1-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - block inside inline, normal position</title>
+    <link rel="author" title="L. David Baron" href="mailto:dbaron@mozilla.com">
+    <link rel="stylesheet" type="text/css" href="ahem.css">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+        font: 20px/1 Ahem;
+      }
+      #contain {
+        height: 100px;
+      }
+      .sticky {
+        position: relative;
+        top: 0;
+      }
+      .notsticky {
+        position: relative;
+        top: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 20px"></div>
+      <div id="contain">
+        <span class="notsticky">before inline</span>
+        <span class="sticky">before block</span>
+        <div><span class="sticky">in block</span></div>
+        <span class="sticky">after block</span>
+        <span class="notsticky">after inline</span>
+      </div>
+      <div style="height: 100px"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/block-in-inline-1.html b/layout/reftests/position-sticky/block-in-inline-1.html
new file mode 100644
index 0000000000..a613421d92
--- /dev/null
+++ b/layout/reftests/position-sticky/block-in-inline-1.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - block inside inline, normal position</title>
+    <link rel="author" title="L. David Baron" href="mailto:dbaron@mozilla.com">
+    <link rel="match" href="block-in-inline-1-ref.html">
+    <meta name="assert" content="Inline elements split because they contain blocks should always have all parts moved the same offset from their normal position">
+    <link rel="stylesheet" type="text/css" href="ahem.css">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+        font: 20px/1 Ahem;
+      }
+      #contain {
+        height: 100px;
+      }
+      #sticky {
+        display: inline;
+        position: sticky;
+        top: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 20px"></div>
+      <div id="contain">
+        before inline
+        <div id="sticky">
+          before block
+          <div>in block</div>
+          after block
+        </div>
+        after inline
+      </div>
+      <div style="height: 100px"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/block-in-inline-2-ref.html b/layout/reftests/position-sticky/block-in-inline-2-ref.html
new file mode 100644
index 0000000000..08239c50b2
--- /dev/null
+++ b/layout/reftests/position-sticky/block-in-inline-2-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - block inside inline, normal position</title>
+    <link rel="author" title="L. David Baron" href="mailto:dbaron@mozilla.com">
+    <link rel="stylesheet" type="text/css" href="ahem.css">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+        font: 20px/1 Ahem;
+      }
+      #contain {
+        height: 100px;
+      }
+      .sticky {
+        position: relative;
+        top: -10px;
+      }
+      .notsticky {
+        position: relative;
+        top: -30px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 20px"></div>
+      <div id="contain">
+        <span class="notsticky">before inline</span>
+        <span class="sticky">before block</span>
+        <div><span class="sticky">in block</span></div>
+        <span class="sticky">after block</span>
+        <span class="notsticky">after inline</span>
+      </div>
+      <div style="height: 100px"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/block-in-inline-2.html b/layout/reftests/position-sticky/block-in-inline-2.html
new file mode 100644
index 0000000000..084f9b04f3
--- /dev/null
+++ b/layout/reftests/position-sticky/block-in-inline-2.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - block inside inline, stuck position</title>
+    <link rel="author" title="L. David Baron" href="mailto:dbaron@mozilla.com">
+    <link rel="match" href="block-in-inline-2-ref.html">
+    <meta name="assert" content="Inline elements split because they contain blocks should always have all parts moved the same offset from their normal position">
+    <link rel="stylesheet" type="text/css" href="ahem.css">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+        font: 20px/1 Ahem;
+      }
+      #contain {
+        height: 100px;
+      }
+      #sticky {
+        display: inline;
+        position: sticky;
+        top: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 20px"></div>
+      <div id="contain">
+        before inline
+        <div id="sticky">
+          before block
+          <div>in block</div>
+          after block
+        </div>
+        after inline
+      </div>
+      <div style="height: 100px"></div>
+    </div>
+    <script type="application/javascript">
+      document.getElementById("scroll").scrollTop = 30;
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/block-in-inline-3-ref.html b/layout/reftests/position-sticky/block-in-inline-3-ref.html
new file mode 100644
index 0000000000..13e29a9f77
--- /dev/null
+++ b/layout/reftests/position-sticky/block-in-inline-3-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - block inside inline, normal position</title>
+    <link rel="author" title="L. David Baron" href="mailto:dbaron@mozilla.com">
+    <link rel="stylesheet" type="text/css" href="ahem.css">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+        font: 20px/1 Ahem;
+      }
+      #contain {
+        height: 100px;
+      }
+      .sticky {
+        position: relative;
+        top: -20px;
+      }
+      .notsticky {
+        position: relative;
+        top: -60px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 20px"></div>
+      <div id="contain">
+        <span class="notsticky">before inline</span>
+        <span class="sticky">before block</span>
+        <div><span class="sticky">in block</span></div>
+        <span class="sticky">after block</span>
+        <span class="notsticky">after inline</span>
+      </div>
+      <div style="height: 100px"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/block-in-inline-3.html b/layout/reftests/position-sticky/block-in-inline-3.html
new file mode 100644
index 0000000000..f4acbc7f15
--- /dev/null
+++ b/layout/reftests/position-sticky/block-in-inline-3.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - block inside inline, contained position</title>
+    <link rel="author" title="L. David Baron" href="mailto:dbaron@mozilla.com">
+    <link rel="match" href="block-in-inline-3-ref.html">
+    <meta name="assert" content="Inline elements split because they contain blocks should always have all parts moved the same offset from their normal position">
+    <link rel="stylesheet" type="text/css" href="ahem.css">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+        font: 20px/1 Ahem;
+      }
+      #contain {
+        height: 100px;
+      }
+      #sticky {
+        display: inline;
+        position: sticky;
+        top: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 20px"></div>
+      <div id="contain">
+        before inline
+        <div id="sticky">
+          before block
+          <div>in block</div>
+          after block
+        </div>
+        after inline
+      </div>
+      <div style="height: 100px"></div>
+    </div>
+    <script type="application/javascript">
+      // should start moving after 40px
+      document.getElementById("scroll").scrollTop = 60;
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/block-in-inline-continuations-ref.html b/layout/reftests/position-sticky/block-in-inline-continuations-ref.html
new file mode 100644
index 0000000000..8ac42e85b4
--- /dev/null
+++ b/layout/reftests/position-sticky/block-in-inline-continuations-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test Reference: Sticky Positioning - continuations have no effect when resizing</title>
+    <link rel="author" title="Abel Lin" href="mailto:alin@mozilla.com">
+    <link rel="stylesheet" href="ahem.css">
+    <style>
+    #scroll {
+      height: 100px;
+      overflow: hidden;
+      font: 20px/1 Ahem;
+    }
+    </style>
+    <script>
+    function run() {
+      document.getElementById("scroll").style.width = "750px";
+    }
+    </script>
+  </head>
+  <body onload="run()">
+    <div id="scroll">
+      <div style="height: 20px"></div>
+      <div><span class="sticky">in block</span></div>
+      <span class="sticky">after block</span>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/block-in-inline-continuations.html b/layout/reftests/position-sticky/block-in-inline-continuations.html
new file mode 100644
index 0000000000..62cad478b2
--- /dev/null
+++ b/layout/reftests/position-sticky/block-in-inline-continuations.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - continuations have no effect when resizing</title>
+    <link rel="author" title="Abel Lin" href="mailto:alin@mozilla.com">
+    <link rel="match" href="block-in-inline-continuations-ref.html">
+    <meta name="assert" content="Inline elements split and contain blocks should always have all parts moved the same offset from their normal position">
+    <link rel="stylesheet" href="ahem.css">
+    <style>
+    #scroll {
+      height: 100px;
+      overflow: hidden;
+      font: 20px/1 Ahem;
+    }
+    #sticky {
+      display: inline;
+      position: sticky;
+      top: 20px;
+    }
+    </style>
+    <script>
+    function run() {
+      document.getElementById("scroll").style.width = "750px";
+    }
+    </script>
+  </head>
+  <body onload="run()">
+    <div id="scroll">
+      <div id="sticky">
+        <div>in block</div>
+        after block
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/bottom-1-ref.html b/layout/reftests/position-sticky/bottom-1-ref.html
new file mode 100644
index 0000000000..ac107c0d03
--- /dev/null
+++ b/layout/reftests/position-sticky/bottom-1-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+      }
+      #sticky {
+        position: relative;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 20px"></div>
+      <div id="sticky"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/bottom-1.html b/layout/reftests/position-sticky/bottom-1.html
new file mode 100644
index 0000000000..183e012f02
--- /dev/null
+++ b/layout/reftests/position-sticky/bottom-1.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - bottom, normal position</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="bottom-1-ref.html">
+    <meta name="assert" content="Bottom-sticky with a small amount of content above: should stay in its normal position">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+      }
+      #sticky {
+        position: sticky;
+        bottom: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 20px"></div>
+      <div id="sticky"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/bottom-2-ref.html b/layout/reftests/position-sticky/bottom-2-ref.html
new file mode 100644
index 0000000000..368dc22d4c
--- /dev/null
+++ b/layout/reftests/position-sticky/bottom-2-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+      }
+      #sticky {
+        position: relative;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 80px"></div>
+      <div id="sticky"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/bottom-2a.html b/layout/reftests/position-sticky/bottom-2a.html
new file mode 100644
index 0000000000..5a52cb9048
--- /dev/null
+++ b/layout/reftests/position-sticky/bottom-2a.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - bottom, normal position</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="bottom-2-ref.html">
+    <meta name="assert" content="Bottom-sticky with some content above: should stay in its normal position (but will stick beyond this point)">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+      }
+      #sticky {
+        position: sticky;
+        bottom: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 80px"></div>
+      <div id="sticky"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/bottom-2b.html b/layout/reftests/position-sticky/bottom-2b.html
new file mode 100644
index 0000000000..62ba2499b9
--- /dev/null
+++ b/layout/reftests/position-sticky/bottom-2b.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - bottom, stuck</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="bottom-2-ref.html">
+    <meta name="assert" content="Bottom-sticky with content above: should stick at the bottom of the scroll container">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+      }
+      #sticky {
+        position: sticky;
+        bottom: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 90px"></div>
+      <div id="sticky"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/bottom-2c.html b/layout/reftests/position-sticky/bottom-2c.html
new file mode 100644
index 0000000000..2408b7d7e0
--- /dev/null
+++ b/layout/reftests/position-sticky/bottom-2c.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!--  -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - bottom, stuck</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="bottom-2-ref.html">
+    <meta name="assert" content="Bottom-sticky with content above: should stick at the bottom of the scroll container">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+      }
+      #sticky {
+        position: sticky;
+        bottom: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 200px"></div>
+      <div id="sticky"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/bottom-3-ref.html b/layout/reftests/position-sticky/bottom-3-ref.html
new file mode 100644
index 0000000000..c40d5c9659
--- /dev/null
+++ b/layout/reftests/position-sticky/bottom-3-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+      }
+      #contain {
+        height: 200px;
+        background-color: gray;
+      }
+      #sticky {
+        position: relative;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 20px"></div>
+      <div id="contain">
+        <div style="height: 60px"></div>
+        <div id="sticky"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/bottom-3.html b/layout/reftests/position-sticky/bottom-3.html
new file mode 100644
index 0000000000..996b022683
--- /dev/null
+++ b/layout/reftests/position-sticky/bottom-3.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!--  -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - bottom, stuck</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="bottom-3-ref.html">
+    <meta name="assert" content="Bottom-sticky with content above and a containing block: should stick to the bottom of the scroll container">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+      }
+      #contain {
+        height: 200px;
+        background-color: gray;
+      }
+      #sticky {
+        position: sticky;
+        bottom: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 20px"></div>
+      <div id="contain">
+        <div style="height: 100px"></div>
+        <div id="sticky"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/bottom-4-ref.html b/layout/reftests/position-sticky/bottom-4-ref.html
new file mode 100644
index 0000000000..822565bfd1
--- /dev/null
+++ b/layout/reftests/position-sticky/bottom-4-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        height: 100px;
+      }
+      #contain {
+        height: 5px;
+        background-color: gray;
+        padding: 10px 0 0;
+        border-width: 10px 0 0;
+        border-style: solid;
+        border-color: #333;
+      }
+      #sticky {
+        height: 3px;
+        margin-top: 2px;
+        background-color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 75px"></div>
+      <div id="contain">
+        <div id="sticky"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/bottom-4.html b/layout/reftests/position-sticky/bottom-4.html
new file mode 100644
index 0000000000..5a06b4ec9a
--- /dev/null
+++ b/layout/reftests/position-sticky/bottom-4.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - bottom, contained</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="bottom-3-ref.html">
+    <meta name="assert" content="Bottom-sticky with too much content above: should stay within the containing block">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+      }
+      #contain {
+        height: 200px;
+        background-color: gray;
+        padding: 10px 0;
+        border-width: 10px 0;
+        border-style: solid;
+        border-color: #333;
+      }
+      #sticky {
+        position: sticky;
+        bottom: 10px;
+        height: 10px;
+        margin-top: 2px;
+        background-color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 75px"></div>
+      <div id="contain">
+        <div style="height: 100px"></div>
+        <div id="sticky"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/column-contain-1-ref.html b/layout/reftests/position-sticky/column-contain-1-ref.html
new file mode 100644
index 0000000000..97ee55f273
--- /dev/null
+++ b/layout/reftests/position-sticky/column-contain-1-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        overflow: hidden;
+        height: 200px;
+        line-height: 1;
+      }
+      #contain {
+        column-count: 2;
+        column-rule: 1px solid black;
+        height: 200px;
+        width: 200px;
+      }
+      #fill {
+        height: 390px;
+        background: blue;
+      }
+      #sticky {
+        position: relative;
+        left: 190px;
+        width: 10px;
+        height: 10px;
+        background: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div id="contain">
+        <div id="sticky"></div>
+        <div id="fill"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/column-contain-1a.html b/layout/reftests/position-sticky/column-contain-1a.html
new file mode 100644
index 0000000000..1e696c6249
--- /dev/null
+++ b/layout/reftests/position-sticky/column-contain-1a.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - multiframe containing-block element</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="column-contain-1-ref.html">
+    <meta name="assert" content="Sticky positioning with a multiple-frame containing-block element should stay contained within the bounding box of all that element's frames">
+    <style>
+      #scroll {
+        overflow: hidden;
+        height: 200px;
+        line-height: 1;
+      }
+      #contain {
+        column-count: 2;
+        column-rule: 1px solid black;
+        height: 200px;
+        width: 200px;
+      }
+      #fill {
+        height: 390px;
+        background: blue;
+      }
+      #sticky {
+        position: sticky;
+        left: 190px;
+        width: 10px;
+        height: 10px;
+        background: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div id="contain">
+        <div id="sticky"></div>
+        <div id="fill"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/column-contain-1b.html b/layout/reftests/position-sticky/column-contain-1b.html
new file mode 100644
index 0000000000..c6f7e83780
--- /dev/null
+++ b/layout/reftests/position-sticky/column-contain-1b.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - multiframe containing-block element</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="column-contain-1-ref.html">
+    <meta name="assert" content="Sticky positioning with a multiple-frame containing-block element should stay contained within the bounding box of all that element's frames">
+    <style>
+      #scroll {
+        overflow: hidden;
+        height: 200px;
+        line-height: 1;
+      }
+      #columns {
+        column-count: 2;
+        column-rule: 1px solid black;
+        height: 200px;
+        width: 200px;
+      }
+      #fill {
+        height: 390px;
+        background: blue;
+      }
+      #sticky {
+        position: sticky;
+        left: 190px;
+        width: 10px;
+        height: 10px;
+        background: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div id="columns">
+        <div id="contain">
+          <div id="sticky"></div>
+          <div id="fill"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/column-contain-2-ref.html b/layout/reftests/position-sticky/column-contain-2-ref.html
new file mode 100644
index 0000000000..42771486db
--- /dev/null
+++ b/layout/reftests/position-sticky/column-contain-2-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:corey@coreyford.name">
+    <style>
+      #scroll {
+        overflow: hidden;
+        height: 200px;
+        line-height: 1;
+      }
+      #columns {
+        column-count: 2;
+        column-rule: 1px solid black;
+        height: 200px;
+        width: 200px;
+      }
+      #contain {
+        padding-bottom: 10px;
+        border-bottom: 10px solid gray;
+      }
+      #fill {
+        height: 370px;
+        background: blue;
+      }
+      #sticky {
+        position: relative;
+        top: 190px;
+        width: 10px;
+        height: 10px;
+        background: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div id="columns">
+        <div id="contain">
+          <div id="sticky"></div>
+          <div id="fill"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/column-contain-2.html b/layout/reftests/position-sticky/column-contain-2.html
new file mode 100644
index 0000000000..ec29285609
--- /dev/null
+++ b/layout/reftests/position-sticky/column-contain-2.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - multiframe containing-block element</title>
+    <link rel="author" title="Corey Ford" href="mailto:corey@coreyford.name">
+    <link rel="match" href="column-contain-2-ref.html">
+    <meta name="assert" content="Sticky positioning where the containing-block element has multiple frames and border/padding should stay contained within the union of the content boxes of all frames">
+    <style>
+      #scroll {
+        overflow: hidden;
+        height: 200px;
+        line-height: 1;
+      }
+      #columns {
+        column-count: 2;
+        column-rule: 1px solid black;
+        height: 200px;
+        width: 200px;
+      }
+      #contain {
+        padding-bottom: 10px;
+        border-bottom: 10px solid gray;
+      }
+      #fill {
+        height: 370px;
+        background: blue;
+      }
+      #sticky {
+        position: sticky;
+        top: 195px;
+        width: 10px;
+        height: 10px;
+        background: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div id="columns">
+        <div id="contain">
+          <div id="sticky"></div>
+          <div id="fill"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/containing-block-1-ref.html b/layout/reftests/position-sticky/containing-block-1-ref.html
new file mode 100644
index 0000000000..ccb25d8109
--- /dev/null
+++ b/layout/reftests/position-sticky/containing-block-1-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      body {
+        height: 200px;
+        margin: 0;
+      }
+      #sticky {
+        position: relative;
+        top: 100px;
+        height: 10px;
+        background-color: black;
+      }
+      #absolute {
+        position: absolute;
+        top: 5px;
+        left: 5px;
+        width: 10px;
+        height: 10px;
+        background-color: blue;
+      }
+    </style>
+  <body>
+    <div id="sticky">
+      <div id="absolute"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/containing-block-1.html b/layout/reftests/position-sticky/containing-block-1.html
new file mode 100644
index 0000000000..cb09717e5a
--- /dev/null
+++ b/layout/reftests/position-sticky/containing-block-1.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - absolute containing block</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="containing-block-1-ref.html">
+    <meta name="assert" content="Sticky positioned elements should establish a containing block for absolutely positioned descendants">
+    <style>
+      body {
+        height: 200px;
+        margin: 0;
+      }
+      #sticky {
+        position: sticky;
+        top: 100px;
+        height: 10px;
+        background-color: black;
+      }
+      #absolute {
+        position: absolute;
+        top: 5px;
+        left: 5px;
+        width: 10px;
+        height: 10px;
+        background-color: blue;
+      }
+    </style>
+  <body>
+    <div id="sticky">
+      <div id="absolute"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/iframe-1-helper.html b/layout/reftests/position-sticky/iframe-1-helper.html
new file mode 100644
index 0000000000..9f71b50c42
--- /dev/null
+++ b/layout/reftests/position-sticky/iframe-1-helper.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            html, body {
+                margin: 0;
+                padding: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div style="overflow: auto; width: 150px; height: 200px">
+            <div style="position: sticky; top: 0; width: 100px; height: 100px; background-color: green"></div>
+            <div style="height: 300px; width: 100px"></div>
+        </div>
+    </body>
+</html>
diff --git a/layout/reftests/position-sticky/iframe-1-ref.html b/layout/reftests/position-sticky/iframe-1-ref.html
new file mode 100644
index 0000000000..d3254ac576
--- /dev/null
+++ b/layout/reftests/position-sticky/iframe-1-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Sticky-positioned item inside a scrollframe inside an iframe</title>
+        <style>
+            html, body {
+                margin: 0;
+                padding: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div style="overflow: auto; margin-top: 100px; width: 150px; height: 200px">
+            <div style="width: 100px; height: 100px; background-color: green"></div>
+            <div style="height: 300px; width: 100px"></div>
+        </div>
+    </body>
+</html>
+    </body>
+</html>
diff --git a/layout/reftests/position-sticky/iframe-1.html b/layout/reftests/position-sticky/iframe-1.html
new file mode 100644
index 0000000000..164f5ac4cd
--- /dev/null
+++ b/layout/reftests/position-sticky/iframe-1.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Sticky-positioned item inside a scrollframe inside an iframe</title>
+        <style>
+            html, body {
+                margin: 0;
+                padding: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <iframe src="iframe-1-helper.html" style="margin-top: 100px; border: none; height: 300px"></iframe>
+    </body>
+</html>
diff --git a/layout/reftests/position-sticky/initial-1-ref.html b/layout/reftests/position-sticky/initial-1-ref.html
new file mode 100644
index 0000000000..70b0b6eb03
--- /dev/null
+++ b/layout/reftests/position-sticky/initial-1-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      body {
+        height: 100px;
+        margin: 0;
+        /* Without this, we do multiple passes of reflow, and
+         * the sticky element ends up positioned correctly.
+         */
+        overflow-y: scroll;
+      }
+      #sticky {
+        position: relative;
+        top: 10px;
+        height: 10px;
+        margin-bottom: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="sticky"></div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/initial-1.html b/layout/reftests/position-sticky/initial-1.html
new file mode 100644
index 0000000000..6e0bb67057
--- /dev/null
+++ b/layout/reftests/position-sticky/initial-1.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - initial reflow</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="initial-1-ref.html">
+    <meta name="assert" content="Sticky positioning should be calculated correctly on initial page reflow">
+    <style>
+      body {
+        height: 100px;
+        margin: 0;
+        /* Without this, we do multiple passes of reflow, and
+         * the sticky element ends up positioned correctly.
+         */
+        overflow-y: scroll;
+      }
+      #sticky {
+        position: sticky;
+        top: 10px;
+        height: 10px;
+        margin-bottom: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="sticky"></div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/initial-scroll-1-ref.html b/layout/reftests/position-sticky/initial-scroll-1-ref.html
new file mode 100644
index 0000000000..bb021dbe7a
--- /dev/null
+++ b/layout/reftests/position-sticky/initial-scroll-1-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        width: 100px;
+        height: 100px;
+        overflow: hidden;
+        direction: rtl;
+      }
+      #inner {
+        width: 200px;
+        height: 200px;
+        direction: ltr;
+      }
+      #sticky {
+        position: relative;
+        left: 110px;
+        width: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div id="inner">
+        <div id="sticky">
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/initial-scroll-1.html b/layout/reftests/position-sticky/initial-scroll-1.html
new file mode 100644
index 0000000000..343c6295ee
--- /dev/null
+++ b/layout/reftests/position-sticky/initial-scroll-1.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - initial scroll position</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="initial-scroll-1-ref.html">
+    <meta name="assert" content="When the initial scroll position of the scroll container is not (0, 0), a sticky element inside it should be positioned correctly">
+    <style>
+      #scroll {
+        width: 100px;
+        height: 100px;
+        overflow: hidden;
+        direction: rtl;
+      }
+      #inner {
+        width: 200px;
+        height: 200px;
+        direction: ltr;
+      }
+      #sticky {
+        position: sticky;
+        left: 10px;
+        width: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div id="inner">
+        <div id="sticky">
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/inline-1-ref.html b/layout/reftests/position-sticky/inline-1-ref.html
new file mode 100644
index 0000000000..2c3bc2470f
--- /dev/null
+++ b/layout/reftests/position-sticky/inline-1-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="stylesheet" type="text/css" href="ahem.css">
+    <style>
+      #scroll {
+        overflow: hidden;
+        height: 200px;
+        position: relative;
+        font: 10px/1 Ahem;
+      }
+      #sticky {
+        position: absolute;
+        top: 20px;
+        left: 20px;
+      }
+      #hidden {
+        visibility: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      hello <div id="sticky"><span id="hidden">hello </span>there<br>everyone</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/inline-1.html b/layout/reftests/position-sticky/inline-1.html
new file mode 100644
index 0000000000..f2569fc794
--- /dev/null
+++ b/layout/reftests/position-sticky/inline-1.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - inline</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="inline-1-ref.html">
+    <meta name="assert" content="Sticky positioning on inline elements should use the bounding box of all continuations">
+    <link rel="stylesheet" type="text/css" href="ahem.css">
+    <style>
+      #scroll {
+        overflow: hidden;
+        height: 200px;
+        font: 10px/1 Ahem;
+      }
+      #sticky {
+        position: sticky;
+        top: 20px;
+        left: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      hello <span id="sticky">there<br>everyone</span>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/inline-2-ref.html b/layout/reftests/position-sticky/inline-2-ref.html
new file mode 100644
index 0000000000..98aabacc75
--- /dev/null
+++ b/layout/reftests/position-sticky/inline-2-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="stylesheet" type="text/css" href="ahem.css">
+    <style>
+      #scroll {
+        overflow: hidden;
+        height: 200px;
+        position: relative;
+        font: 10px/1 Ahem;
+      }
+      #sticky {
+        position: absolute;
+        top: 30px;
+        left: 30px;
+      }
+      #hidden {
+        visibility: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      hello <div id="sticky"><span id="hidden">hello </span>there<br>everyone</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/inline-2.html b/layout/reftests/position-sticky/inline-2.html
new file mode 100644
index 0000000000..f3fbbc0d61
--- /dev/null
+++ b/layout/reftests/position-sticky/inline-2.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html class="reftest-wait">
+  <head>
+    <title>CSS Test: Sticky Positioning - inline, dynamic changes</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="inline-2-ref.html">
+    <meta name="assert" content="Sticky positioning on inline elements should move all continuations when the offsets are changed">
+    <meta name="flags" content="dom">
+    <link rel="stylesheet" type="text/css" href="ahem.css">
+    <style>
+      #scroll {
+        overflow: hidden;
+        height: 200px;
+        font: 10px/1 Ahem;
+      }
+      #sticky {
+        position: sticky;
+        top: 20px;
+        left: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      hello <span id="sticky">there<br>everyone</span>
+    </div>
+    <script type="text/javascript">
+      document.addEventListener("MozReftestInvalidate", function() {
+        document.getElementById("sticky").style.top = "30px";
+        document.getElementById("sticky").style.left = "30px";
+        document.documentElement.removeAttribute("class");
+      });
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/inline-3-ref.html b/layout/reftests/position-sticky/inline-3-ref.html
new file mode 100644
index 0000000000..847860a3cf
--- /dev/null
+++ b/layout/reftests/position-sticky/inline-3-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:corey@coreyford.name">
+    <link rel="stylesheet" type="text/css" href="ahem.css">
+    <style>
+      #scroll {
+        overflow: hidden;
+        height: 200px;
+        position: relative;
+        font: 10px/1 Ahem;
+      }
+      #sticky {
+        position: absolute;
+        top: 0;
+        left: 10px;
+      }
+      #hidden {
+        visibility: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      test <span id="sticky"><span id="hidden">test </span>test<br>test</span>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/inline-3.html b/layout/reftests/position-sticky/inline-3.html
new file mode 100644
index 0000000000..f06f55d530
--- /dev/null
+++ b/layout/reftests/position-sticky/inline-3.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - inline with margins</title>
+    <link rel="author" title="Corey Ford" href="mailto:corey@coreyford.name">
+    <link rel="match" href="inline-3-ref.html">
+    <meta name="assert" content="Sticky positioning on inline elements should keep the bounding box of all continuations' margin boxes contained">
+    <link rel="stylesheet" type="text/css" href="ahem.css">
+    <style>
+      #scroll {
+        overflow: hidden;
+        height: 200px;
+        font: 10px/1 Ahem;
+      }
+      #sticky {
+        position: sticky;
+        left: 20px;
+        margin-right: 10px;
+      }
+      #contain {
+        width: 100px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div id="contain">
+        test <span id="sticky">test<br>test</span>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/inline-4-ref.html b/layout/reftests/position-sticky/inline-4-ref.html
new file mode 100644
index 0000000000..136ff07371
--- /dev/null
+++ b/layout/reftests/position-sticky/inline-4-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:corey@coreyford.name">
+    <link rel="stylesheet" type="text/css" href="ahem.css">
+    <style>
+      #scroller {
+        margin-top: 100px;
+        height: 200px;
+        width: 500px;
+        overflow: hidden;
+      }
+      #container {
+        background: pink;
+        position: relative;
+        margin: 50px;
+        height: 400px;
+        margin-bottom: 1000px;
+      }
+      #sticky {
+        position: sticky;
+        left: 0px;
+        top: 75px;
+        outline: 1px dotted purple;
+        font: 10px/1 Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroller">
+      <div id="container">
+        <span id="sticky">
+          First line<br>
+          Second line<br>
+          Third line<br>
+        </span>
+      </div>
+    </div>
+    <script>
+      document.getElementById("scroller").scrollTop = 30;
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/inline-4.html b/layout/reftests/position-sticky/inline-4.html
new file mode 100644
index 0000000000..9913cfe25b
--- /dev/null
+++ b/layout/reftests/position-sticky/inline-4.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html reftest-async-scroll>
+  <head>
+    <title>CSS Test: Sticky Positioning - inline, async scrolling</title>
+    <link rel="author" title="Corey Ford" href="mailto:corey@coreyford.name">
+    <link rel="match" href="inline-4-ref.html">
+    <meta name="assert" content="Sticky positioning on inline elements should keep continuations aligned during async scrolling">
+    <link rel="stylesheet" type="text/css" href="ahem.css">
+    <style>
+      #scroller {
+        margin-top: 100px;
+        height: 200px;
+        width: 500px;
+        overflow: scroll;
+        scrollbar-width: none;
+      }
+      #container {
+        background: pink;
+        position: relative;
+        margin: 50px;
+        height: 400px;
+        margin-bottom: 1000px;
+      }
+      #sticky {
+        position: sticky;
+        left: 0px;
+        top: 75px;
+        outline: 1px dotted purple;
+        font: 10px/1 Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroller"
+         reftest-displayport-x="0" reftest-displayport-y="0"
+         reftest-displayport-w="500" reftest-displayport-h="300"
+         reftest-async-scroll-y="30">
+      <div id="container">
+        <span id="sticky">
+          First line<br>
+          Second line<br>
+          Third line<br>
+        </span>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/left-1-ref.html b/layout/reftests/position-sticky/left-1-ref.html
new file mode 100644
index 0000000000..ebcf46f4fb
--- /dev/null
+++ b/layout/reftests/position-sticky/left-1-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        width: 100px;
+        height: 100px;
+        overflow: hidden;
+        border: 1px solid black;
+        white-space: nowrap;
+      }
+      #scroll div {
+        display: inline-block;
+      }
+      .fill {
+        width: 100px;
+        height: 1px;
+      }
+      #contain {
+        width: 200px;
+        height: 10px;
+        background-color: gray;
+      }
+      #sticky {
+        width: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div class="fill" style="width: 20px"></div
+      ><div id="contain">
+        <div id="sticky"></div>
+      </div
+      ><div class="fill"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/left-1.html b/layout/reftests/position-sticky/left-1.html
new file mode 100644
index 0000000000..779f930977
--- /dev/null
+++ b/layout/reftests/position-sticky/left-1.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - left, normal position</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="left-1-ref.html">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Sticky-left with not enough scrolling: should be in its normal position">
+    <style>
+      #scroll {
+        width: 100px;
+        height: 100px;
+        overflow: hidden;
+        border: 1px solid black;
+        white-space: nowrap;
+      }
+      #scroll div {
+        display: inline-block;
+      }
+      .fill {
+        width: 100px;
+        height: 1px;
+      }
+      #contain {
+        width: 200px;
+        height: 10px;
+        background-color: gray;
+      }
+      #sticky {
+        position: sticky;
+        left: 10px;
+        width: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div class="fill"></div
+      ><div id="contain">
+        <div id="sticky"></div>
+      </div
+      ><div class="fill"></div>
+    </div>
+    <script type="text/javascript">
+      document.getElementById("scroll").scrollLeft = 80;
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/left-2-ref.html b/layout/reftests/position-sticky/left-2-ref.html
new file mode 100644
index 0000000000..ca5c35a688
--- /dev/null
+++ b/layout/reftests/position-sticky/left-2-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+        white-space: nowrap;
+      }
+      #scroll div {
+        display: inline-block;
+      }
+      #contain {
+        width: 100%;
+        height: 10px;
+        background-color: gray;
+      }
+      #sticky {
+        position: relative;
+        left: 10px;
+        width: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div id="contain">
+        <div id="sticky"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/left-2.html b/layout/reftests/position-sticky/left-2.html
new file mode 100644
index 0000000000..b3c3e4ee37
--- /dev/null
+++ b/layout/reftests/position-sticky/left-2.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - left, stuck</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="left-2-ref.html">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Sticky-left with scrolling: should stick to the left edge of the scrolling container">
+    <style>
+      #scroll {
+        width: 100px;
+        height: 100px;
+        overflow: hidden;
+        border: 1px solid black;
+        white-space: nowrap;
+      }
+      #scroll div {
+        display: inline-block;
+      }
+      .fill {
+        width: 100px;
+        height: 1px;
+      }
+      #contain {
+        width: 200px;
+        height: 10px;
+        background-color: gray;
+      }
+      #sticky {
+        position: sticky;
+        left: 10px;
+        width: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div class="fill"></div
+      ><div id="contain">
+        <div id="sticky"></div>
+      </div
+      ><div class="fill"></div>
+    </div>
+    <script type="text/javascript">
+      document.getElementById("scroll").scrollLeft = 100;
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/left-3-ref.html b/layout/reftests/position-sticky/left-3-ref.html
new file mode 100644
index 0000000000..1ae2eaf411
--- /dev/null
+++ b/layout/reftests/position-sticky/left-3-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+        white-space: nowrap;
+      }
+      #scroll div {
+        display: inline-block;
+      }
+      .fill {
+        width: 100px;
+        height: 1px;
+      }
+      #contain {
+        width: 5px;
+        height: 10px;
+        background-color: gray;
+      }
+      #sticky {
+        width: 5px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div id="contain">
+        <div id="sticky"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/left-3.html b/layout/reftests/position-sticky/left-3.html
new file mode 100644
index 0000000000..ef9e2b303d
--- /dev/null
+++ b/layout/reftests/position-sticky/left-3.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - left, contained</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="left-3-ref.html">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Sticky-left with too much scrolling: should stay within the containing block">
+    <style>
+      #scroll {
+        width: 100px;
+        height: 100px;
+        overflow: hidden;
+        border: 1px solid black;
+        white-space: nowrap;
+      }
+      #scroll div {
+        display: inline-block;
+      }
+      .fill {
+        width: 100px;
+        height: 1px;
+      }
+      #contain {
+        width: 200px;
+        height: 10px;
+        background-color: gray;
+      }
+      #sticky {
+        position: sticky;
+        left: 10px;
+        width: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div class="fill"></div
+      ><div id="contain">
+        <div id="sticky"></div>
+      </div
+      ><div class="fill"></div>
+    </div>
+    <script type="text/javascript">
+      document.getElementById("scroll").scrollLeft = 295;
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/left-right-1-ref.html b/layout/reftests/position-sticky/left-right-1-ref.html
new file mode 100644
index 0000000000..89b7a06081
--- /dev/null
+++ b/layout/reftests/position-sticky/left-right-1-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        width: 100px;
+        height: 100px;
+        overflow: hidden;
+        border: 1px solid black;
+        white-space: nowrap;
+      }
+      #scroll div {
+        display: inline-block;
+      }
+      .fill {
+        width: 100px;
+        height: 1px;
+      }
+      #contain {
+        width: 200px;
+        height: 10px;
+        background-color: gray;
+      }
+      #sticky {
+        position: relative;
+        right: 20px;
+        width: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div class="fill"></div
+      ><div id="sticky"></div
+      ><div class="fill"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/left-right-1.html b/layout/reftests/position-sticky/left-right-1.html
new file mode 100644
index 0000000000..ca7a77ff75
--- /dev/null
+++ b/layout/reftests/position-sticky/left-right-1.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - left+right, at left</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="left-right-1-ref.html">
+    <meta name="assert" content="Left+right sticky, scrolled to the left: should act as right-sticky">
+    <style>
+      #scroll {
+        width: 100px;
+        height: 100px;
+        overflow: hidden;
+        border: 1px solid black;
+        white-space: nowrap;
+      }
+      #scroll div {
+        display: inline-block;
+      }
+      .fill {
+        width: 100px;
+        height: 1px;
+      }
+      #contain {
+        width: 200px;
+        height: 10px;
+        background-color: gray;
+      }
+      #sticky {
+        position: sticky;
+        left: 10px;
+        right: 10px;
+        width: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div class="fill"></div
+      ><div id="sticky"></div
+      ><div class="fill"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/left-right-2-ref.html b/layout/reftests/position-sticky/left-right-2-ref.html
new file mode 100644
index 0000000000..2670683391
--- /dev/null
+++ b/layout/reftests/position-sticky/left-right-2-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+        white-space: nowrap;
+      }
+      #scroll div {
+        display: inline-block;
+      }
+      .fill {
+        width: 100px;
+        height: 1px;
+      }
+      #sticky {
+        width: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div class="fill" style="width: 50px"></div
+      ><div id="sticky"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/left-right-2.html b/layout/reftests/position-sticky/left-right-2.html
new file mode 100644
index 0000000000..7d9068f2a0
--- /dev/null
+++ b/layout/reftests/position-sticky/left-right-2.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - left+right, at middle</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="left-right-2-ref.html">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Left+right sticky, scrolled to the middle: should stay in its normal position">
+    <style>
+      #scroll {
+        width: 100px;
+        height: 100px;
+        overflow: hidden;
+        border: 1px solid black;
+        white-space: nowrap;
+      }
+      #scroll div {
+        display: inline-block;
+      }
+      .fill {
+        width: 100px;
+        height: 1px;
+      }
+      #contain {
+        width: 200px;
+        height: 10px;
+        background-color: gray;
+      }
+      #sticky {
+        position: sticky;
+        left: 10px;
+        right: 10px;
+        width: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div class="fill"></div
+      ><div id="sticky"></div
+      ><div class="fill"></div>
+    </div>
+    <script type="text/javascript">
+      document.getElementById("scroll").scrollLeft = 50;
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/left-right-3-ref.html b/layout/reftests/position-sticky/left-right-3-ref.html
new file mode 100644
index 0000000000..9648f4b284
--- /dev/null
+++ b/layout/reftests/position-sticky/left-right-3-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+        white-space: nowrap;
+      }
+      #scroll div {
+        display: inline-block;
+      }
+      .fill {
+        width: 100px;
+        height: 1px;
+      }
+      #sticky {
+        position: relative;
+        left: 10px;
+        width: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div id="sticky"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/left-right-3.html b/layout/reftests/position-sticky/left-right-3.html
new file mode 100644
index 0000000000..e62978220b
--- /dev/null
+++ b/layout/reftests/position-sticky/left-right-3.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - left+right, at right</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="left-right-3-ref.html">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Left+right sticky, scrolled to the right: should act as left-sticky">
+    <style>
+      #scroll {
+        width: 100px;
+        height: 100px;
+        overflow: hidden;
+        border: 1px solid black;
+        white-space: nowrap;
+      }
+      #scroll div {
+        display: inline-block;
+      }
+      .fill {
+        width: 100px;
+        height: 1px;
+      }
+      #contain {
+        width: 200px;
+        height: 10px;
+        background-color: gray;
+      }
+      #sticky {
+        position: sticky;
+        left: 10px;
+        right: 10px;
+        width: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div class="fill"></div
+      ><div id="sticky"></div
+      ><div class="fill"></div>
+    </div>
+    <script type="text/javascript">
+      document.getElementById("scroll").scrollLeft = 110;
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/margin-1-ref.html b/layout/reftests/position-sticky/margin-1-ref.html
new file mode 100644
index 0000000000..f577b077a5
--- /dev/null
+++ b/layout/reftests/position-sticky/margin-1-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        height: 100px;
+      }
+      #contain {
+        height: 20px;
+        background-color: gray;
+      }
+      #sticky {
+        position: relative;
+        top: 5px;
+        height: 10px;
+        margin-bottom: 5px;
+        background-color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div id="contain">
+        <div id="sticky"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/margin-1.html b/layout/reftests/position-sticky/margin-1.html
new file mode 100644
index 0000000000..7a084d8048
--- /dev/null
+++ b/layout/reftests/position-sticky/margin-1.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - element margin</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="margin-1-ref.html">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Sticky-top with margin-bottom on the sticky element: the element's margin box should stay within the containing block">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+      }
+      #contain {
+        height: 300px;
+        background-color: gray;
+      }
+      #sticky {
+        position: sticky;
+        top: 10px;
+        height: 10px;
+        margin-bottom: 5px;
+        background-color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 20px"></div>
+      <div id="contain">
+        <div id="sticky"></div>
+      </div>
+      <div style="height: 100px"></div>
+    </div>
+    <script type="application/javascript">
+      document.getElementById("scroll").scrollTop = 300;
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/nested-sticky-1-ref.html b/layout/reftests/position-sticky/nested-sticky-1-ref.html
new file mode 100644
index 0000000000..4c08d36cd4
--- /dev/null
+++ b/layout/reftests/position-sticky/nested-sticky-1-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<style>
+html, body {
+    margin: 0;
+}
+thead tr {
+    position: relative;
+    top: 50px;
+}
+th {
+    background-color: green;
+    height: 20px;
+}
+td {
+    background-color: blue;
+}
+</style>
+<body>
+<table cellspacing=0>
+    <thead>
+        <tr><th></th></tr>
+    </thead>
+    <tbody>
+        <tr><td style="height: 2000px; vertical-align: top">table cell</td></tr>
+    </tbody>
+</table>
+<script>
+  addEventListener('load', function() {
+    document.scrollingElement.scrollTop = 50;
+    document.documentElement.classList.remove('reftest-wait');
+  }, false);
+</script>
+</html>
diff --git a/layout/reftests/position-sticky/nested-sticky-1.html b/layout/reftests/position-sticky/nested-sticky-1.html
new file mode 100644
index 0000000000..6125f4263a
--- /dev/null
+++ b/layout/reftests/position-sticky/nested-sticky-1.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html reftest-async-scroll reftest-async-scroll-y="50">
+<style>
+html, body {
+    margin: 0;
+}
+thead tr {
+    position: sticky;
+    top: 0;
+}
+th {
+    position: sticky;
+    top: -2px;
+    background-color: green;
+    height: 20px;
+}
+td {
+    background-color: blue;
+}
+</style>
+<body>
+<table cellspacing=0>
+    <thead>
+        <tr><th></th></tr>
+    </thead>
+    <tbody>
+        <tr><td style="height: 2000px; vertical-align: top">table cell</td></tr>
+    </tbody>
+</table>
+</html>
diff --git a/layout/reftests/position-sticky/nested-sticky-2-ref.html b/layout/reftests/position-sticky/nested-sticky-2-ref.html
new file mode 100644
index 0000000000..c49d088960
--- /dev/null
+++ b/layout/reftests/position-sticky/nested-sticky-2-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<style>
+html, body {
+    margin: 0;
+}
+thead tr {
+    position: relative;
+    top: 50px;
+}
+th {
+    background-color: green;
+    height: 20px;
+}
+th:first-child {
+    position: relative;
+    top: 10px;
+}
+td {
+    background-color: blue;
+}
+</style>
+<body>
+<table cellspacing=0>
+    <thead>
+        <tr><th></th><th></th></tr>
+    </thead>
+    <tbody>
+        <tr><td style="height: 2000px; vertical-align: top">table cell</td><td>sibling</td></tr>
+    </tbody>
+</table>
+<script>
+  addEventListener('load', function() {
+    document.scrollingElement.scrollTop = 50;
+    document.documentElement.classList.remove('reftest-wait');
+  }, false);
+</script>
+</html>
diff --git a/layout/reftests/position-sticky/nested-sticky-2.html b/layout/reftests/position-sticky/nested-sticky-2.html
new file mode 100644
index 0000000000..b37885d7ad
--- /dev/null
+++ b/layout/reftests/position-sticky/nested-sticky-2.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html reftest-async-scroll reftest-async-scroll-y="50">
+<style>
+html, body {
+    margin: 0;
+}
+thead tr {
+    position: sticky;
+    top: 0;
+}
+th {
+    background-color: green;
+    height: 20px;
+}
+th:first-child {
+    position: sticky;
+    top: 10px;
+}
+td {
+    background-color: blue;
+}
+</style>
+<body>
+<table cellspacing=0>
+    <thead>
+        <tr><th></th><th></th></tr>
+    </thead>
+    <tbody>
+        <tr><td style="height: 2000px; vertical-align: top">table cell</td><td>sibling</td></tr>
+    </tbody>
+</table>
+</html>
diff --git a/layout/reftests/position-sticky/overconstrained-1-ref.html b/layout/reftests/position-sticky/overconstrained-1-ref.html
new file mode 100644
index 0000000000..f458c239d9
--- /dev/null
+++ b/layout/reftests/position-sticky/overconstrained-1-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+      }
+      #sticky {
+        height: 81px;
+        background-color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 95px"></div>
+      <div id="sticky"></div>
+      <div style="height: 100px"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/overconstrained-1.html b/layout/reftests/position-sticky/overconstrained-1.html
new file mode 100644
index 0000000000..95d46b2412
--- /dev/null
+++ b/layout/reftests/position-sticky/overconstrained-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - top+bottom, overconstrained</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="overconstrained-1-ref.html">
+    <meta name="assert" content="Top+bottom-sticky with a tall element: should not act as bottom-sticky">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+      }
+      #sticky {
+        position: sticky;
+        top: 10px;
+        bottom: 10px;
+        height: 81px;
+        background-color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 95px"></div>
+      <div id="sticky"></div>
+      <div style="height: 100px"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/overconstrained-2-ref.html b/layout/reftests/position-sticky/overconstrained-2-ref.html
new file mode 100644
index 0000000000..8593fa3f5a
--- /dev/null
+++ b/layout/reftests/position-sticky/overconstrained-2-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        width: 100px;
+        height: 100px;
+        overflow: hidden;
+        border: 1px solid black;
+        white-space: nowrap;
+      }
+      #scroll div {
+        display: inline-block;
+      }
+      .fill {
+        width: 99px;
+        height: 1px;
+      }
+      #contain {
+        width: 200px;
+        height: 10px;
+        background-color: gray;
+      }
+      #sticky {
+        width: 81px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div class="fill"></div
+      ><div id="sticky"></div
+      ><div class="fill"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/overconstrained-2.html b/layout/reftests/position-sticky/overconstrained-2.html
new file mode 100644
index 0000000000..f399c912e9
--- /dev/null
+++ b/layout/reftests/position-sticky/overconstrained-2.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - left+right, overconstrained</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="overconstrained-2-ref.html">
+    <meta name="assert" content="Left+right-sticky with a wide element in an LTR container: should not act as right-sticky">
+    <style>
+      #scroll {
+        width: 100px;
+        height: 100px;
+        overflow: hidden;
+        border: 1px solid black;
+        white-space: nowrap;
+      }
+      #scroll div {
+        display: inline-block;
+      }
+      .fill {
+        width: 99px;
+        height: 1px;
+      }
+      #contain {
+        width: 200px;
+        height: 10px;
+        background-color: gray;
+      }
+      #sticky {
+        position: sticky;
+        left: 10px;
+        right: 10px;
+        width: 81px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div class="fill"></div
+      ><div id="sticky"></div
+      ><div class="fill"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/overconstrained-3-ref.html b/layout/reftests/position-sticky/overconstrained-3-ref.html
new file mode 100644
index 0000000000..387c28eda8
--- /dev/null
+++ b/layout/reftests/position-sticky/overconstrained-3-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+        white-space: nowrap;
+      }
+      #scroll div {
+        display: inline-block;
+      }
+      #sticky {
+        width: 1px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div id="sticky"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/overconstrained-3.html b/layout/reftests/position-sticky/overconstrained-3.html
new file mode 100644
index 0000000000..852d356835
--- /dev/null
+++ b/layout/reftests/position-sticky/overconstrained-3.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - left+right, overconstrained</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="overconstrained-3-ref.html">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Left+right-sticky with a wide element in an RTL container: should not act as left-sticky">
+    <style>
+      #scroll {
+        width: 100px;
+        height: 100px;
+        overflow: hidden;
+        border: 1px solid black;
+        white-space: nowrap;
+        direction: rtl;
+      }
+      #scroll div {
+        display: inline-block;
+      }
+      .fill {
+        width: 99px;
+        height: 1px;
+      }
+      #contain {
+        width: 200px;
+        height: 10px;
+        background-color: gray;
+      }
+      #sticky {
+        position: sticky;
+        left: 10px;
+        right: 10px;
+        width: 81px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div class="fill"></div
+      ><div id="sticky"></div
+      ><div class="fill"></div>
+    </div>
+    <script type="text/javascript">
+      document.getElementById("scroll").scrollLeft = 179;
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/overcontain-1-ref.html b/layout/reftests/position-sticky/overcontain-1-ref.html
new file mode 100644
index 0000000000..fd9c2fc551
--- /dev/null
+++ b/layout/reftests/position-sticky/overcontain-1-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      body {
+        margin: 0;
+      }
+      #sticky {
+        height: 10px;
+        margin-bottom: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="sticky"></div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/overcontain-1.html b/layout/reftests/position-sticky/overcontain-1.html
new file mode 100644
index 0000000000..25f31dc593
--- /dev/null
+++ b/layout/reftests/position-sticky/overcontain-1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - containment and normal position</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="overcontain-1-ref.html">
+    <meta name="assert" content="Keeping the element's margin box within the containing block's content box should never move the element back past its normal position">
+    <style>
+      body {
+        margin: 0;
+      }
+      #sticky {
+        position: sticky;
+        top: 10px;
+        height: 10px;
+        margin-bottom: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="sticky"></div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/padding-1-ref.html b/layout/reftests/position-sticky/padding-1-ref.html
new file mode 100644
index 0000000000..e23b7c9d39
--- /dev/null
+++ b/layout/reftests/position-sticky/padding-1-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      body {
+        overflow: scroll;
+      }
+      #scroll {
+        width: 130px;
+        height: 80px;
+        overflow: scroll;
+        border: 10px solid black;
+        padding: 10px;
+      }
+      #inner {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+      #sticky {
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        top: 50%;
+        left: 50%;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div id="inner">
+        <div id="sticky">
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/padding-1.html b/layout/reftests/position-sticky/padding-1.html
new file mode 100644
index 0000000000..1a154a2e53
--- /dev/null
+++ b/layout/reftests/position-sticky/padding-1.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - percentage offsets</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="padding-1-ref.html">
+    <meta name="assert" content="Percentage offsets should be resolved against the content box of the scrolling container">
+    <style>
+      body {
+        /* Make sure it works on the first pass of reflow */
+        overflow: scroll;
+      }
+      #scroll {
+        width: 130px;
+        height: 80px;
+        overflow: scroll;
+        border: 10px solid black;
+        padding: 10px;
+      }
+      #sticky {
+        position: sticky;
+        top: 50%;
+        left: 50%;
+        width: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div id="sticky">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/padding-2-ref.html b/layout/reftests/position-sticky/padding-2-ref.html
new file mode 100644
index 0000000000..643c507307
--- /dev/null
+++ b/layout/reftests/position-sticky/padding-2-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        width: 80px;
+        height: 80px;
+        overflow: hidden;
+        border: 10px solid black;
+        padding: 10px;
+      }
+      #sticky {
+        position: relative;
+        width: 10px;
+        height: 10px;
+        top: 20px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div id="sticky">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/padding-2.html b/layout/reftests/position-sticky/padding-2.html
new file mode 100644
index 0000000000..03080bf101
--- /dev/null
+++ b/layout/reftests/position-sticky/padding-2.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - offsets reference</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="padding-2-ref.html">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Offsets should position the element with respect to the content box of the scrolling container">
+    <style>
+      #scroll {
+        width: 80px;
+        height: 80px;
+        overflow: hidden;
+        border: 10px solid black;
+        padding: 10px;
+      }
+      #sticky {
+        position: sticky;
+        width: 10px;
+        height: 10px;
+        top: 20px;
+        background-color: black;
+      }
+      .fill {
+        width: 1000px;
+        height: 1000px;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div class="fill"></div>
+      <div id="sticky"></div>
+      <div class="fill"></div>
+    </div>
+    <script type="application/javascript">
+      document.getElementById('scroll').scrollTop = 1100;
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/padding-3-ref.html b/layout/reftests/position-sticky/padding-3-ref.html
new file mode 100644
index 0000000000..54b81e9b53
--- /dev/null
+++ b/layout/reftests/position-sticky/padding-3-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      body {
+        font-size: 0px;
+      }
+      #scroll {
+        width: 80px;
+        height: 80px;
+        overflow: scroll;
+        border: 10px solid black;
+        padding: 10px;
+      }
+      #inner {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+      #sticky {
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        bottom: 20px;
+        right: 20px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div id="inner">
+        <div style="width: 100px; height: 110px"></div>
+        <div id="sticky"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/padding-3.html b/layout/reftests/position-sticky/padding-3.html
new file mode 100644
index 0000000000..fc84983d69
--- /dev/null
+++ b/layout/reftests/position-sticky/padding-3.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - offsets reference, bottom/right</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="padding-3-ref.html">
+    <meta name="assert" content="Bottom/right offsets should position the element with respect to the content box of the scrolling container">
+    <style>
+      body {
+        font-size: 0px;
+      }
+      #scroll {
+        width: 80px;
+        height: 80px;
+        overflow: scroll;
+        border: 10px solid black;
+        padding: 10px;
+        white-space: nowrap;
+      }
+      #sticky {
+        position: sticky;
+        bottom: 20px;
+        right: 20px;
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div style="height: 90px; width: 100px"></div>
+      <div style="display: inline-block; width: 90px; height: 10px"></div
+      ><div id="sticky"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/reftest.list b/layout/reftests/position-sticky/reftest.list
new file mode 100644
index 0000000000..f77ea2ab1e
--- /dev/null
+++ b/layout/reftests/position-sticky/reftest.list
@@ -0,0 +1,55 @@
+== top-1.html top-1-ref.html
+fuzzy-if(Android,0-6,0-1568) == top-2.html top-2-ref.html
+fuzzy-if(Android,0-6,0-2729) == top-3.html top-3-ref.html
+== top-4.html top-4-ref.html
+== top-5.html top-5-ref.html
+fuzzy-if(Android,0-2,0-1568) == top-6.html top-6-ref.html
+== bottom-1.html bottom-1-ref.html
+== bottom-2a.html bottom-2-ref.html
+== bottom-2b.html bottom-2-ref.html
+== bottom-2c.html bottom-2-ref.html
+== bottom-3.html bottom-3-ref.html
+== bottom-4.html bottom-4-ref.html
+fuzzy-if(Android,0-2,0-4) == left-1.html left-1-ref.html
+fuzzy-if(Android,0-2,0-4) == left-2.html left-2-ref.html
+== left-3.html left-3-ref.html
+== right-1.html right-1-ref.html
+fuzzy-if(Android,0-2,0-4) == right-2.html right-2-ref.html
+fuzzy-if(Android,0-2,0-4) == right-3.html right-3-ref.html
+== margin-1.html margin-1-ref.html
+== padding-1.html padding-1-ref.html
+== padding-2.html padding-2-ref.html
+== padding-3.html padding-3-ref.html
+== overcontain-1.html overcontain-1-ref.html
+== initial-1.html initial-1-ref.html
+== initial-scroll-1.html initial-scroll-1-ref.html
+== scrollframe-reflow-1.html scrollframe-reflow-1-ref.html
+== scrollframe-reflow-2.html scrollframe-reflow-2-ref.html
+== scrollframe-auto-1.html scrollframe-auto-1-ref.html
+fuzzy-if(Android,0-2,0-3) == stacking-context-1.html stacking-context-1-ref.html
+== top-bottom-1.html top-bottom-1-ref.html
+== top-bottom-2.html top-bottom-2-ref.html
+== top-bottom-3.html top-bottom-3-ref.html
+== left-right-1.html left-right-1-ref.html
+== left-right-2.html left-right-2-ref.html
+== left-right-3.html left-right-3-ref.html
+fuzzy-if(Android,0-4,0-810) == containing-block-1.html containing-block-1-ref.html
+== overconstrained-1.html overconstrained-1-ref.html
+== overconstrained-2.html overconstrained-2-ref.html
+== overconstrained-3.html overconstrained-3-ref.html
+== inline-1.html inline-1-ref.html
+== inline-2.html inline-2-ref.html
+fuzzy-if(OSX,0-99,0-210) == inline-3.html inline-3-ref.html
+skip-if(!asyncPan) fuzzy-if(swgl&&!Android,1-1,2-3) fails-if(useDrawSnapshot) == inline-4.html inline-4-ref.html
+== column-contain-1a.html column-contain-1-ref.html
+== column-contain-1b.html column-contain-1-ref.html
+== column-contain-2.html column-contain-2-ref.html
+== block-in-inline-1.html block-in-inline-1-ref.html
+fuzzy(0-1,0-22) fuzzy-if(winWidget&&!layersGPUAccelerated,0-116,0-1320) fuzzy-if(Android,0-8,0-1533) == block-in-inline-2.html block-in-inline-2-ref.html
+fuzzy(0-1,0-220) fuzzy-if(winWidget&&!layersGPUAccelerated,0-116,0-1320) == block-in-inline-3.html block-in-inline-3-ref.html
+== block-in-inline-continuations.html block-in-inline-continuations-ref.html
+== iframe-1.html iframe-1-ref.html
+== transformed-1.html transformed-1-ref.html
+fuzzy-if(Android,0-8,0-9) fuzzy-if(gtkWidget,10-17,12-32) fuzzy-if(cocoaWidget,7-8,18-42) skip-if(!asyncPan) fails-if(useDrawSnapshot) == transformed-2.html transformed-2-ref.html # Bug 1604644
+skip-if(!asyncPan) fuzzy-if(Android,0-14,0-11) fuzzy-if(gtkWidget,19-30,12-32) fuzzy-if(cocoaWidget,13-16,20-44) fails-if(useDrawSnapshot) == nested-sticky-1.html nested-sticky-1-ref.html # Bug 1604644
+skip-if(!asyncPan) fuzzy-if(Android,0-14,0-11) fuzzy-if(gtkWidget,19-30,12-32) fuzzy-if(cocoaWidget,13-16,20-44) fails-if(useDrawSnapshot) == nested-sticky-2.html nested-sticky-2-ref.html # Bug 1604644
diff --git a/layout/reftests/position-sticky/right-1-ref.html b/layout/reftests/position-sticky/right-1-ref.html
new file mode 100644
index 0000000000..dc2457e871
--- /dev/null
+++ b/layout/reftests/position-sticky/right-1-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+        white-space: nowrap;
+      }
+      #scroll div {
+        display: inline-block;
+      }
+      .fill {
+        width: 100px;
+        height: 1px;
+      }
+      #contain {
+        width: 5px;
+        height: 10px;
+        background-color: gray;
+      }
+      #sticky {
+        width: 5px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div class="fill" style="width: 95px"></div
+      ><div id="contain">
+        <div id="sticky"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/right-1.html b/layout/reftests/position-sticky/right-1.html
new file mode 100644
index 0000000000..8e0d96a48f
--- /dev/null
+++ b/layout/reftests/position-sticky/right-1.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - right, stuck</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="right-1-ref.html">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Sticky-right scrolled to the left: should stick to the right edge of the scrolling container">
+    <style>
+      #scroll {
+        width: 100px;
+        height: 100px;
+        overflow: hidden;
+        border: 1px solid black;
+        white-space: nowrap;
+      }
+      #scroll div {
+        display: inline-block;
+      }
+      .fill {
+        width: 100px;
+        height: 1px;
+      }
+      #contain {
+        width: 200px;
+        height: 10px;
+        background-color: gray;
+        /* This puts the sticky element's "normal position" at
+           the right side of the containing block. */
+        direction: rtl;
+      }
+      #sticky {
+        position: sticky;
+        right: 10px;
+        width: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div class="fill"></div
+      ><div id="contain">
+        <div id="sticky"></div>
+      </div
+      ><div class="fill"></div>
+    </div>
+    <script type="text/javascript">
+      document.getElementById("scroll").scrollLeft = 5;
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/right-2-ref.html b/layout/reftests/position-sticky/right-2-ref.html
new file mode 100644
index 0000000000..6b3549293c
--- /dev/null
+++ b/layout/reftests/position-sticky/right-2-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+        white-space: nowrap;
+      }
+      #scroll div {
+        display: inline-block;
+      }
+      .fill {
+        width: 100px;
+        height: 1px;
+      }
+      #contain {
+        width: 100px;
+        height: 10px;
+        background-color: gray;
+      }
+      #sticky {
+        position: relative;
+        left: 80px;
+        width: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div id="contain">
+        <div id="sticky"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/right-2.html b/layout/reftests/position-sticky/right-2.html
new file mode 100644
index 0000000000..a8d7a14fd6
--- /dev/null
+++ b/layout/reftests/position-sticky/right-2.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - right, stuck</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="right-2-ref.html">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Sticky-right scrolled to the middle: should stick to the right edge of the scrolling container">
+    <style>
+      #scroll {
+        width: 100px;
+        height: 100px;
+        overflow: hidden;
+        border: 1px solid black;
+        white-space: nowrap;
+      }
+      #scroll div {
+        display: inline-block;
+      }
+      .fill {
+        width: 100px;
+        height: 1px;
+      }
+      #contain {
+        width: 200px;
+        height: 10px;
+        background-color: gray;
+        /* This puts the sticky element's "normal position" at
+           the right side of the containing block. */
+        direction: rtl;
+      }
+      #sticky {
+        position: sticky;
+        right: 10px;
+        width: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div class="fill"></div
+      ><div id="contain">
+        <div id="sticky"></div>
+      </div
+      ><div class="fill"></div>
+    </div>
+    <script type="text/javascript">
+      document.getElementById("scroll").scrollLeft = 200;
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/right-3-ref.html b/layout/reftests/position-sticky/right-3-ref.html
new file mode 100644
index 0000000000..a2462b40f2
--- /dev/null
+++ b/layout/reftests/position-sticky/right-3-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+        white-space: nowrap;
+      }
+      #scroll div {
+        display: inline-block;
+      }
+      .fill {
+        width: 100px;
+        height: 1px;
+      }
+      #contain {
+        width: 80px;
+        height: 10px;
+        background-color: gray;
+      }
+      #sticky {
+        position: relative;
+        left: 70px;
+        width: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div id="contain">
+        <div id="sticky"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/right-3.html b/layout/reftests/position-sticky/right-3.html
new file mode 100644
index 0000000000..25b6431425
--- /dev/null
+++ b/layout/reftests/position-sticky/right-3.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - right, contained</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="right-3-ref.html">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Sticky-right with too much scrolling: should stay within the containing block">
+    <style>
+      #scroll {
+        width: 100px;
+        height: 100px;
+        overflow: hidden;
+        border: 1px solid black;
+        white-space: nowrap;
+      }
+      #scroll div {
+        display: inline-block;
+      }
+      .fill {
+        width: 100px;
+        height: 1px;
+      }
+      #contain {
+        width: 200px;
+        height: 10px;
+        background-color: gray;
+        /* This puts the sticky element's "normal position" at
+           the right side of the containing block. */
+        direction: rtl;
+      }
+      #sticky {
+        position: sticky;
+        right: 10px;
+        width: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div class="fill"></div
+      ><div id="contain">
+        <div id="sticky"></div>
+      </div
+      ><div class="fill"></div>
+    </div>
+    <script type="text/javascript">
+      document.getElementById("scroll").scrollLeft = 220;
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/scrollframe-auto-1-ref.html b/layout/reftests/position-sticky/scrollframe-auto-1-ref.html
new file mode 100644
index 0000000000..f35afdf7fe
--- /dev/null
+++ b/layout/reftests/position-sticky/scrollframe-auto-1-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Percentage sticky offsets should be computed correctly when
+   - the scroll container is auto-sized -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      body {
+        overflow: scroll;
+      }
+      #scroll {
+        height: auto;
+        overflow: hidden;
+        border: 1px solid black;
+      }
+      #sticky {
+        position: relative;
+        height: 10px;
+        top: 105px;
+        background-color: black;
+      }
+      .fill {
+        height: 200px;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div id="sticky"></div>
+      <div class="fill"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/scrollframe-auto-1.html b/layout/reftests/position-sticky/scrollframe-auto-1.html
new file mode 100644
index 0000000000..4132154ceb
--- /dev/null
+++ b/layout/reftests/position-sticky/scrollframe-auto-1.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Percentage sticky offsets should be computed correctly when
+   - the scroll container is auto-sized -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="scrollframe-auto-1-ref.html">
+    <style>
+      body {
+        /* even on initial reflow */
+        overflow: scroll;
+      }
+      #scroll {
+        height: auto;
+        overflow: hidden;
+        border: 1px solid black;
+      }
+      #sticky {
+        position: sticky;
+        height: 10px;
+        top: 50%;
+        background-color: black;
+      }
+      .fill {
+        height: 200px;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div id="sticky"></div>
+      <div class="fill"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/scrollframe-reflow-1-ref.html b/layout/reftests/position-sticky/scrollframe-reflow-1-ref.html
new file mode 100644
index 0000000000..b3fa4f230d
--- /dev/null
+++ b/layout/reftests/position-sticky/scrollframe-reflow-1-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        height: 120px;
+        overflow: hidden;
+        border: 1px solid black;
+      }
+      #sticky {
+        position: relative;
+        top: 100px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div id="sticky"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/scrollframe-reflow-1.html b/layout/reftests/position-sticky/scrollframe-reflow-1.html
new file mode 100644
index 0000000000..3feb1eca44
--- /dev/null
+++ b/layout/reftests/position-sticky/scrollframe-reflow-1.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- When the scroll container is resized (without reflowing its contents),
+   - sticky elements inside it should be repositioned -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="scrollframe-reflow-1-ref.html">
+    <meta name="flags" content="dom">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+        border: 1px solid black;
+      }
+      #sticky {
+        position: sticky;
+        height: 10px;
+        bottom: 10px;
+        background-color: black;
+      }
+      .fill {
+        height: 1000px;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div class="fill"></div>
+      <div id="sticky"></div>
+    </div>
+    <script type="text/javascript">
+      document.getElementById("scroll").style.height = "120px";
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/scrollframe-reflow-2-ref.html b/layout/reftests/position-sticky/scrollframe-reflow-2-ref.html
new file mode 100644
index 0000000000..e5b029687c
--- /dev/null
+++ b/layout/reftests/position-sticky/scrollframe-reflow-2-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        height: 120px;
+        overflow: hidden;
+        border: 1px solid black;
+      }
+      #sticky {
+        position: relative;
+        top: 60px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div id="sticky"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/scrollframe-reflow-2.html b/layout/reftests/position-sticky/scrollframe-reflow-2.html
new file mode 100644
index 0000000000..b48fe00379
--- /dev/null
+++ b/layout/reftests/position-sticky/scrollframe-reflow-2.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- When the scroll container is resized (without reflowing its contents),
+   - offsets for sticky elements inside it should be recomputed -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="scrollframe-reflow-2-ref.html">
+    <meta name="flags" content="dom">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+        border: 1px solid black;
+      }
+      #sticky {
+        position: sticky;
+        height: 10px;
+        top: 50%;
+        background-color: black;
+      }
+      .fill {
+        height: 1000px;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div id="sticky"></div>
+      <div class="fill"></div>
+    </div>
+    <script type="text/javascript">
+      document.getElementById("scroll").style.height = "120px";
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/stacking-context-1-ref.html b/layout/reftests/position-sticky/stacking-context-1-ref.html
new file mode 100644
index 0000000000..7d7db098fe
--- /dev/null
+++ b/layout/reftests/position-sticky/stacking-context-1-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      body {
+        margin: 0;
+      }
+      div {
+        width: 100px;
+        height: 100px;
+      }
+      #static {
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        background-color: blue;
+        z-index: 3;
+      }
+      #sticky {
+        background-color: black;
+      }
+      #inner {
+        position: relative;
+        top: 40px;
+        left: 40px;
+        background-color: gray;
+        z-index: 2;
+      }
+    </style>
+  <body>
+    <div id="static"></div>
+    <div id="sticky">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/stacking-context-1.html b/layout/reftests/position-sticky/stacking-context-1.html
new file mode 100644
index 0000000000..103f32a124
--- /dev/null
+++ b/layout/reftests/position-sticky/stacking-context-1.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - stacking context</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="stacking-context-1-ref.html">
+    <meta name="assert" content="Sticky positioning should establish a stacking context">
+    <style>
+      body {
+        margin: 0;
+      }
+      div {
+        width: 100px;
+        height: 100px;
+      }
+      #static {
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        background-color: blue;
+        z-index: 1;
+      }
+      #sticky {
+        position: sticky;
+        top: 0;
+        left: 0;
+        background-color: black;
+      }
+      #inner {
+        position: relative;
+        top: 40px;
+        left: 40px;
+        background-color: gray;
+        z-index: 2;
+      }
+    </style>
+  <body>
+    <div id="static"></div>
+    <div id="sticky">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/top-1-ref.html b/layout/reftests/position-sticky/top-1-ref.html
new file mode 100644
index 0000000000..edb94fdbe8
--- /dev/null
+++ b/layout/reftests/position-sticky/top-1-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        height: 100px;
+      }
+      #contain {
+        height: 80px;
+        background-color: gray;
+      }
+      #sticky {
+        height: 10px;
+        background-color: black;
+      }
+      #static {
+        height: 10px;
+        background-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 20px"></div>
+      <div id="contain">
+        <div id="sticky"></div>
+        <div id="static"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/top-1.html b/layout/reftests/position-sticky/top-1.html
new file mode 100644
index 0000000000..a7bdb58e36
--- /dev/null
+++ b/layout/reftests/position-sticky/top-1.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - top, normal position</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="top-1-ref.html">
+    <meta name="assert" content="Sticky-top with no scrolling: should be in its normal position">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+      }
+      #contain {
+        height: 300px;
+        background-color: gray;
+      }
+      #sticky {
+        position: sticky;
+        top: 10px;
+        height: 10px;
+        background-color: black;
+      }
+      #static {
+        height: 10px;
+        background-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 20px"></div>
+      <div id="contain">
+        <div id="sticky"></div>
+        <div id="static"></div>
+      </div>
+      <div style="height: 100px"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/top-2-ref.html b/layout/reftests/position-sticky/top-2-ref.html
new file mode 100644
index 0000000000..93788f3fe2
--- /dev/null
+++ b/layout/reftests/position-sticky/top-2-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        height: 100px;
+      }
+      #contain {
+        height: 90px;
+        background-color: gray;
+      }
+      #sticky {
+        height: 10px;
+        background-color: black;
+      }
+      #static {
+        height: 10px;
+        background-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 10px"></div>
+      <div id="contain">
+        <div id="sticky"></div>
+        <div id="static"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/top-2.html b/layout/reftests/position-sticky/top-2.html
new file mode 100644
index 0000000000..d3d14f4ed9
--- /dev/null
+++ b/layout/reftests/position-sticky/top-2.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - top, normal position</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="top-2-ref.html">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Sticky-top with not enough scrolling: should be in its normal position">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+      }
+      #contain {
+        height: 300px;
+        background-color: gray;
+      }
+      #sticky {
+        position: sticky;
+        top: 10px;
+        height: 10px;
+        background-color: black;
+      }
+      #static {
+        height: 10px;
+        background-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 20px"></div>
+      <div id="contain">
+        <div id="sticky"></div>
+        <div id="static"></div>
+      </div>
+      <div style="height: 100px"></div>
+    </div>
+    <script type="application/javascript">
+      document.getElementById("scroll").scrollTop = 10;
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/top-3-ref.html b/layout/reftests/position-sticky/top-3-ref.html
new file mode 100644
index 0000000000..8e72c08039
--- /dev/null
+++ b/layout/reftests/position-sticky/top-3-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        height: 100px;
+      }
+      #contain {
+        height: 100px;
+        background-color: gray;
+      }
+      #sticky {
+        position: relative;
+        top: 10px;
+        height: 10px;
+        background-color: black;
+        z-index: 1;
+      }
+      #static {
+        position: relative;
+        bottom: 1px;
+        height: 10px;
+        background-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div id="contain">
+        <div id="sticky"></div>
+        <div id="static"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/top-3.html b/layout/reftests/position-sticky/top-3.html
new file mode 100644
index 0000000000..a44baae2e6
--- /dev/null
+++ b/layout/reftests/position-sticky/top-3.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - top, stuck</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="top-3-ref.html">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Sticky-top with scrolling: should move to partially cover static positioned sibling">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+      }
+      #contain {
+        height: 300px;
+        background-color: gray;
+      }
+      #sticky {
+        position: sticky;
+        top: 10px;
+        height: 10px;
+        background-color: black;
+      }
+      #static {
+        height: 10px;
+        background-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 20px"></div>
+      <div id="contain">
+        <div id="sticky"></div>
+        <div id="static"></div>
+      </div>
+      <div style="height: 100px"></div>
+    </div>
+    <script type="application/javascript">
+      document.getElementById("scroll").scrollTop = 21;
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/top-4-ref.html b/layout/reftests/position-sticky/top-4-ref.html
new file mode 100644
index 0000000000..8eaed81980
--- /dev/null
+++ b/layout/reftests/position-sticky/top-4-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        height: 100px;
+      }
+      #contain {
+        height: 20px;
+        background-color: gray;
+      }
+      #sticky {
+        position: relative;
+        top: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div id="contain">
+        <div id="sticky"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/top-4.html b/layout/reftests/position-sticky/top-4.html
new file mode 100644
index 0000000000..71f7ff01c1
--- /dev/null
+++ b/layout/reftests/position-sticky/top-4.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - top, stuck</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="top-4-ref.html">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Sticky-top with more scrolling: should continue to stick to the top of the scroll container">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+      }
+      #contain {
+        height: 300px;
+        background-color: gray;
+      }
+      #sticky {
+        position: sticky;
+        top: 10px;
+        height: 10px;
+        background-color: black;
+      }
+      #static {
+        height: 10px;
+        background-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 20px"></div>
+      <div id="contain">
+        <div id="sticky"></div>
+        <div id="static"></div>
+      </div>
+      <div style="height: 100px"></div>
+    </div>
+    <script type="application/javascript">
+      document.getElementById("scroll").scrollTop = 300;
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/top-5-ref.html b/layout/reftests/position-sticky/top-5-ref.html
new file mode 100644
index 0000000000..70d821344e
--- /dev/null
+++ b/layout/reftests/position-sticky/top-5-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        height: 100px;
+      }
+      #contain {
+        height: 10px;
+        background-color: gray;
+      }
+      #sticky {
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div id="contain">
+        <div id="sticky"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/top-5.html b/layout/reftests/position-sticky/top-5.html
new file mode 100644
index 0000000000..2795806956
--- /dev/null
+++ b/layout/reftests/position-sticky/top-5.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - top, contained</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="top-5-ref.html">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Sticky-top with too much scrolling: should stay within the containing block">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+      }
+      #contain {
+        height: 300px;
+        background-color: gray;
+      }
+      #sticky {
+        position: sticky;
+        top: 10px;
+        height: 10px;
+        background-color: black;
+      }
+      #static {
+        height: 10px;
+        background-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 20px"></div>
+      <div id="contain">
+        <div id="sticky"></div>
+        <div id="static"></div>
+      </div>
+      <div style="height: 100px"></div>
+    </div>
+    <script type="application/javascript">
+      document.getElementById("scroll").scrollTop = 310;
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/top-6-ref.html b/layout/reftests/position-sticky/top-6-ref.html
new file mode 100644
index 0000000000..9e96ee8bec
--- /dev/null
+++ b/layout/reftests/position-sticky/top-6-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        height: 100px;
+      }
+      #contain {
+        height: 5px;
+        background-color: gray;
+        padding: 0 0 10px;
+        border-width: 0 0 10px;
+        border-style: solid;
+        border-color: #333;
+      }
+      #sticky {
+        height: 5px;
+        background-color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div id="contain">
+        <div id="sticky"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/top-6.html b/layout/reftests/position-sticky/top-6.html
new file mode 100644
index 0000000000..1e2909561e
--- /dev/null
+++ b/layout/reftests/position-sticky/top-6.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - top, contained</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="top-6-ref.html">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Sticky-top with too much scrolling: should stay within the containing block">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+      }
+      #contain {
+        height: 300px;
+        background-color: gray;
+        padding: 10px 0;
+        border-width: 10px 0;
+        border-style: solid;
+        border-color: #333;
+      }
+      #sticky {
+        position: sticky;
+        top: 10px;
+        height: 10px;
+        background-color: black;
+      }
+      #static {
+        height: 10px;
+        background-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 20px"></div>
+      <div id="contain">
+        <div id="sticky"></div>
+        <div id="static"></div>
+      </div>
+      <div style="height: 100px"></div>
+    </div>
+    <script type="application/javascript">
+      document.getElementById("scroll").scrollTop = 335;
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/top-bottom-1-ref.html b/layout/reftests/position-sticky/top-bottom-1-ref.html
new file mode 100644
index 0000000000..3d1d6a35b5
--- /dev/null
+++ b/layout/reftests/position-sticky/top-bottom-1-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+      }
+      #sticky {
+        position: relative;
+        bottom: 20px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 100px"></div>
+      <div id="sticky"></div>
+      <div style="height: 100px"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/top-bottom-1.html b/layout/reftests/position-sticky/top-bottom-1.html
new file mode 100644
index 0000000000..b73d40e825
--- /dev/null
+++ b/layout/reftests/position-sticky/top-bottom-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - top+bottom, at top</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="top-bottom-1-ref.html">
+    <meta name="assert" content="Top+bottom sticky, scrolled to the top: should act as bottom-sticky">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+      }
+      #sticky {
+        position: sticky;
+        top: 10px;
+        bottom: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 100px"></div>
+      <div id="sticky"></div>
+      <div style="height: 100px"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/top-bottom-2-ref.html b/layout/reftests/position-sticky/top-bottom-2-ref.html
new file mode 100644
index 0000000000..3e440bc8fe
--- /dev/null
+++ b/layout/reftests/position-sticky/top-bottom-2-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        height: 100px;
+      }
+      #sticky {
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 50px"></div>
+      <div id="sticky"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/top-bottom-2.html b/layout/reftests/position-sticky/top-bottom-2.html
new file mode 100644
index 0000000000..31443f5dff
--- /dev/null
+++ b/layout/reftests/position-sticky/top-bottom-2.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - top+bottom, at middle</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="top-bottom-2-ref.html">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Top+bottom sticky, scrolled to the middle: should stay in its normal position">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+      }
+      #sticky {
+        position: sticky;
+        top: 10px;
+        bottom: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 100px"></div>
+      <div id="sticky"></div>
+      <div style="height: 100px"></div>
+    </div>
+    <script type="application/javascript">
+      document.getElementById("scroll").scrollTop = 50;
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/top-bottom-3-ref.html b/layout/reftests/position-sticky/top-bottom-3-ref.html
new file mode 100644
index 0000000000..d1a8e2429c
--- /dev/null
+++ b/layout/reftests/position-sticky/top-bottom-3-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+      }
+      #sticky {
+        position: relative;
+        top: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div id="sticky"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/top-bottom-3.html b/layout/reftests/position-sticky/top-bottom-3.html
new file mode 100644
index 0000000000..b42f08919b
--- /dev/null
+++ b/layout/reftests/position-sticky/top-bottom-3.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>CSS Test: Sticky Positioning - top+bottom, at bottom</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="top-bottom-3-ref.html">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Top+bottom sticky, scrolled to the bottom: should act as top-sticky">
+    <style>
+      #scroll {
+        height: 100px;
+        overflow: hidden;
+      }
+      #sticky {
+        position: sticky;
+        top: 10px;
+        bottom: 10px;
+        height: 10px;
+        background-color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="scroll">
+      <div style="height: 100px"></div>
+      <div id="sticky"></div>
+      <div style="height: 100px"></div>
+    </div>
+    <script type="application/javascript">
+      document.getElementById("scroll").scrollTop = 110;
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/position-sticky/transformed-1-ref.html b/layout/reftests/position-sticky/transformed-1-ref.html
new file mode 100644
index 0000000000..0d08d67aec
--- /dev/null
+++ b/layout/reftests/position-sticky/transformed-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html style="margin: 0">
+  <body style="margin: 0">
+    <div style="height: 70px; background-color: blue"></div>
+    <div style="height: 2000px;">
+        <div style="margin-top: 50px; width: 100px; height: 100px; background-color: green"></div>
+    </div>
+</html>
diff --git a/layout/reftests/position-sticky/transformed-1.html b/layout/reftests/position-sticky/transformed-1.html
new file mode 100644
index 0000000000..98f82b1150
--- /dev/null
+++ b/layout/reftests/position-sticky/transformed-1.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html style="margin: 0">
+  <body style="margin: 0">
+    <div style="height: 70px; background-color: blue"></div>
+    <div style="height: 2000px; transform: translateY(50px)">
+        <div style="position:sticky; top: 70px; width: 100px; height: 100px; background-color: green"></div>
+    </div>
+</html>
diff --git a/layout/reftests/position-sticky/transformed-2-ref.html b/layout/reftests/position-sticky/transformed-2-ref.html
new file mode 100644
index 0000000000..bf2dc6704c
--- /dev/null
+++ b/layout/reftests/position-sticky/transformed-2-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html style="margin: 0" class="reftest-wait">
+  <body style="margin: 0">
+    <div style="height: 70px; background-color: blue"></div>
+    <div style="height: 1950px;">
+        <div style="margin-top: 100px; width: 100px; height: 100px; background-color: green"></div>
+    </div>
+  <script>
+    addEventListener('load', function() {
+      document.scrollingElement.scrollTop = 50;
+      document.documentElement.classList.remove('reftest-wait');
+    }, false);
+  </script>
+</html>
diff --git a/layout/reftests/position-sticky/transformed-2.html b/layout/reftests/position-sticky/transformed-2.html
new file mode 100644
index 0000000000..8d549fcfde
--- /dev/null
+++ b/layout/reftests/position-sticky/transformed-2.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html style="margin: 0" reftest-async-scroll reftest-async-scroll-y="50">
+  <body style="margin: 0">
+    <div style="height: 70px; background-color: blue"></div>
+    <div style="height: 2000px; transform: translateY(50px)">
+        <div style="position:sticky; top: 70px; width: 100px; height: 100px; background-color: green"></div>
+    </div>
+</html>
-- 
cgit v1.2.3