Bug 886646 - Part 7: Reftests for sticky positioning. r=dbaron
authorCorey Ford <cford@mozilla.com>
Fri, 06 Sep 2013 09:35:16 -0400
changeset 158851 bb399c38e3b684d56ad595f9ca1bbb59c0e09555
parent 158850 63a55ac51f7fff7d34027ccd0533e0dc94bb3e0d
child 158852 11b68cbcab1d004081cfda36112ca276216a5deb
push id2961
push userlsblakk@mozilla.com
push dateMon, 28 Oct 2013 21:59:28 +0000
treeherdermozilla-beta@73ef4f13486f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdbaron
bugs886646
milestone26.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 886646 - Part 7: Reftests for sticky positioning. r=dbaron
layout/reftests/position-sticky/bottom-1-ref.html
layout/reftests/position-sticky/bottom-1.html
layout/reftests/position-sticky/bottom-2-ref.html
layout/reftests/position-sticky/bottom-2a.html
layout/reftests/position-sticky/bottom-2b.html
layout/reftests/position-sticky/bottom-2c.html
layout/reftests/position-sticky/bottom-3-ref.html
layout/reftests/position-sticky/bottom-3.html
layout/reftests/position-sticky/bottom-4-ref.html
layout/reftests/position-sticky/bottom-4.html
layout/reftests/position-sticky/containing-block-1-ref.html
layout/reftests/position-sticky/containing-block-1.html
layout/reftests/position-sticky/initial-1-ref.html
layout/reftests/position-sticky/initial-1.html
layout/reftests/position-sticky/initial-scroll-1-ref.html
layout/reftests/position-sticky/initial-scroll-1.html
layout/reftests/position-sticky/left-1-ref.html
layout/reftests/position-sticky/left-1.html
layout/reftests/position-sticky/left-2-ref.html
layout/reftests/position-sticky/left-2.html
layout/reftests/position-sticky/left-3-ref.html
layout/reftests/position-sticky/left-3.html
layout/reftests/position-sticky/left-right-1-ref.html
layout/reftests/position-sticky/left-right-1.html
layout/reftests/position-sticky/left-right-2-ref.html
layout/reftests/position-sticky/left-right-2.html
layout/reftests/position-sticky/left-right-3-ref.html
layout/reftests/position-sticky/left-right-3.html
layout/reftests/position-sticky/margin-1-ref.html
layout/reftests/position-sticky/margin-1.html
layout/reftests/position-sticky/overconstrained-1-ref.html
layout/reftests/position-sticky/overconstrained-1.html
layout/reftests/position-sticky/overconstrained-2-ref.html
layout/reftests/position-sticky/overconstrained-2.html
layout/reftests/position-sticky/overconstrained-3-ref.html
layout/reftests/position-sticky/overconstrained-3.html
layout/reftests/position-sticky/overcontain-1-ref.html
layout/reftests/position-sticky/overcontain-1.html
layout/reftests/position-sticky/padding-1-ref.html
layout/reftests/position-sticky/padding-1.html
layout/reftests/position-sticky/padding-2-ref.html
layout/reftests/position-sticky/padding-2.html
layout/reftests/position-sticky/padding-3-ref.html
layout/reftests/position-sticky/padding-3.html
layout/reftests/position-sticky/pref-1-disabled-ref.html
layout/reftests/position-sticky/pref-1-enabled-ref.html
layout/reftests/position-sticky/pref-1.html
layout/reftests/position-sticky/reftest.list
layout/reftests/position-sticky/right-1-ref.html
layout/reftests/position-sticky/right-1.html
layout/reftests/position-sticky/right-2-ref.html
layout/reftests/position-sticky/right-2.html
layout/reftests/position-sticky/right-3-ref.html
layout/reftests/position-sticky/right-3.html
layout/reftests/position-sticky/scrollframe-auto-1-ref.html
layout/reftests/position-sticky/scrollframe-auto-1.html
layout/reftests/position-sticky/scrollframe-reflow-1-ref.html
layout/reftests/position-sticky/scrollframe-reflow-1.html
layout/reftests/position-sticky/scrollframe-reflow-2-ref.html
layout/reftests/position-sticky/scrollframe-reflow-2.html
layout/reftests/position-sticky/stacking-context-1-ref.html
layout/reftests/position-sticky/stacking-context-1.html
layout/reftests/position-sticky/top-1-ref.html
layout/reftests/position-sticky/top-1.html
layout/reftests/position-sticky/top-2-ref.html
layout/reftests/position-sticky/top-2.html
layout/reftests/position-sticky/top-3-ref.html
layout/reftests/position-sticky/top-3.html
layout/reftests/position-sticky/top-4-ref.html
layout/reftests/position-sticky/top-4.html
layout/reftests/position-sticky/top-5-ref.html
layout/reftests/position-sticky/top-5.html
layout/reftests/position-sticky/top-6-ref.html
layout/reftests/position-sticky/top-6.html
layout/reftests/position-sticky/top-bottom-1-ref.html
layout/reftests/position-sticky/top-bottom-1.html
layout/reftests/position-sticky/top-bottom-2-ref.html
layout/reftests/position-sticky/top-bottom-2.html
layout/reftests/position-sticky/top-bottom-3-ref.html
layout/reftests/position-sticky/top-bottom-3.html
layout/reftests/reftest.list
layout/reftests/svg/text/ignore-position-ref.svg
layout/reftests/svg/text/ignore-position.svg
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/position-sticky/padding-3-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <style>
+      body {
+        font-size: 0px;
+      }
+      #scroll {
+        width: 80px;
+        height: 80px;
+        overflow: scroll;
+        border: 10px solid black;
+        padding: 10px;
+      }
+      #inner {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+      #sticky {
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        bottom: 20px;
+        right: 20px;
+        background-color: black;
+      }
+    </style>
+  <body>
+    <div id="scroll">
+      <div id="inner">
+        <div style="width: 100px; height: 100px"></div>
+        <div id="sticky"></div>
+      </div>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/position-sticky/pref-1-disabled-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;
+        line-height: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <p>
+      "position: sticky" is:
+      <div>disabled</div>
+    </p>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/position-sticky/pref-1-enabled-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;
+        line-height: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <p>
+      "position: sticky" is:
+      <div>enabled</div>
+    </p>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/position-sticky/pref-1.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 - support test</title>
+    <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
+    <link rel="match" href="pref-1-ref.html">
+    <meta name="assert" content="This test indicates whether sticky positioning is enabled.">
+    <style>
+      body {
+        margin: 0;
+        line-height: 1;
+      }
+      #sticky {
+        position: absolute;
+        position: sticky;
+        left: -100%;
+        width: 100%;
+        padding-bottom: 1em;
+        margin-bottom: -1em;
+        background: white;
+      }
+    </style>
+  </head>
+  <body>
+    <p>
+      "position: sticky" is:
+      <!-- If sticky positioned, this will cover up "disabled" below: -->
+      <div id="sticky">enabled</div>
+      <div>disabled</div>
+    </p>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/position-sticky/reftest.list
@@ -0,0 +1,43 @@
+test-pref(layout.css.sticky.enabled,false) == pref-1.html pref-1-disabled-ref.html
+test-pref(layout.css.sticky.enabled,true) == pref-1.html pref-1-enabled-ref.html
+default-preferences pref(layout.css.sticky.enabled,true)
+
+== top-1.html top-1-ref.html
+fuzzy-if(Android,4,914) == top-2.html top-2-ref.html
+fuzzy-if(Android,4,2729) == top-3.html top-3-ref.html
+== top-4.html top-4-ref.html
+== top-5.html top-5-ref.html
+== top-6.html top-6-ref.html
+== bottom-1.html bottom-1-ref.html
+== bottom-2a.html bottom-2-ref.html
+== bottom-2b.html bottom-2-ref.html
+== bottom-2c.html bottom-2-ref.html
+== bottom-3.html bottom-3-ref.html
+== bottom-4.html bottom-4-ref.html
+fuzzy-if(Android,2,4) == left-1.html left-1-ref.html
+fuzzy-if(Android,2,4) == left-2.html left-2-ref.html
+== left-3.html left-3-ref.html
+== right-1.html right-1-ref.html
+fuzzy-if(Android,2,4) == right-2.html right-2-ref.html
+fuzzy-if(Android,2,4) == right-3.html right-3-ref.html
+== margin-1.html margin-1-ref.html
+== padding-1.html padding-1-ref.html
+== padding-2.html padding-2-ref.html
+== padding-3.html padding-3-ref.html
+== overcontain-1.html overcontain-1-ref.html
+== initial-1.html initial-1-ref.html
+== initial-scroll-1.html initial-scroll-1-ref.html
+== scrollframe-reflow-1.html scrollframe-reflow-1-ref.html
+== scrollframe-reflow-2.html scrollframe-reflow-2-ref.html
+== scrollframe-auto-1.html scrollframe-auto-1-ref.html
+== stacking-context-1.html stacking-context-1-ref.html
+== top-bottom-1.html top-bottom-1-ref.html
+== top-bottom-2.html top-bottom-2-ref.html
+== top-bottom-3.html top-bottom-3-ref.html
+== left-right-1.html left-right-1-ref.html
+== left-right-2.html left-right-2-ref.html
+== left-right-3.html left-right-3-ref.html
+== containing-block-1.html containing-block-1-ref.html
+== overconstrained-1.html overconstrained-1-ref.html
+== overconstrained-2.html overconstrained-2-ref.html
+== overconstrained-3.html overconstrained-3-ref.html
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
--- a/layout/reftests/reftest.list
+++ b/layout/reftests/reftest.list
@@ -245,16 +245,19 @@ skip-if(B2G) include pagination/reftest.
 skip-if(B2G) include scoped-style/reftest.list
 
 # scrolling 
 skip-if(Android&&AndroidVersion>=15) include scrolling/reftest.list
 
 # selection
 include selection/reftest.list
 
+# sticky positioning
+include position-sticky/reftest.list
+
 # svg/
 include svg/reftest.list
 
 # tab-size/
 skip-if(B2G) include tab-size/reftest.list
 
 # table-anonymous-boxes/
 skip-if(B2G) include table-anonymous-boxes/reftest.list
--- a/layout/reftests/svg/text/ignore-position-ref.svg
+++ b/layout/reftests/svg/text/ignore-position-ref.svg
@@ -2,10 +2,11 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
   <g style="font: 16px sans-serif">
     <text x="100" y="40">hello there everyone</text>
     <text x="100" y="60">hello there everyone</text>
     <text x="100" y="80">hello there everyone</text>
+    <text x="100" y="100">hello there everyone</text>
   </g>
 </svg>
--- a/layout/reftests/svg/text/ignore-position.svg
+++ b/layout/reftests/svg/text/ignore-position.svg
@@ -2,10 +2,11 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
   <g style="font: 16px sans-serif">
     <text x="100" y="40">hello <tspan style="position: relative; left: 20px">there</tspan> everyone</text>
     <text x="100" y="60">hello <tspan style="position: absolute; top: 0; left: 0">there</tspan> everyone</text>
     <text x="100" y="80">hello <tspan style="position: fixed; top: 0; left: 0">there</tspan> everyone</text>
+    <text x="100" y="100">hello <tspan style="position: sticky; left: 500px">there</tspan> everyone</text>
   </g>
 </svg>