1 files changed, 89 insertions, 0 deletions
diff --git a/layout/style/test/test_position_sticky.html b/layout/style/test/test_position_sticky.html
new file mode 100644
index 000000000..9deb92333
--- /dev/null
+++ b/layout/style/test/test_position_sticky.html
@@ -0,0 +1,89 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=886646
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 886646</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style type="text/css">
+    #scroller {
+      width: 100px;
+      height: 100px;
+      padding: 10px;
+      border: 10px solid black;
+      margin: 10px;
+      overflow: hidden;
+    }
+    #container {
+      width: 50px;
+      height: 50px;
+    }
+    #sticky {
+      position: sticky;
+      width: 10px;
+      height: 10px;
+      overflow: hidden;
+    }
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=886646">Mozilla Bug 886646</a>
+<div id="display">
+  <div id="scroller">
+    <div id="container">
+      <div id="sticky"></div>
+    </div>
+  </div>
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+
+/** Test for Bug 886646 - Offsets for sticky positioning, when accessed through
+  * getComputedStyle(), should be accurately computed. In particular,
+  * percentage offsets should be computed in terms of the scroll container's
+  * content box. */
+
+// Test that percentage sticky offsets are computed in terms of the
+// scroll container's content box
+var offsets = {
+  "top":    10,
+  "left":   20,
+  "bottom": 30,
+  "right":  40,
+};
+
+var scroller = document.getElementById("scroller");
+var container = document.getElementById("container");
+var sticky = document.getElementById("sticky");
+var cs = getComputedStyle(sticky, "");
+
+for (var prop in offsets) {
+  sticky.style[prop] = offsets[prop] + "%";
+  is(cs[prop], offsets[prop] + "px");
+}
+
+// ... even in the presence of scrollbars
+scroller.style.overflow = "scroll";
+container.style.width = "100%";
+container.style.height = "100%";
+
+var ccs = getComputedStyle(container, "");
+
+function isApproximatelyEqual(a, b) {
+  return Math.abs(a - b) < 0.001;
+}
+
+for (var prop in offsets) {
+  sticky.style[prop] = offsets[prop] + "%";
+  var basis = parseFloat(ccs[prop == "left" || prop == "right" ?
+                             "width" : "height"]) / 100;
+  ok(isApproximatelyEqual(parseFloat(cs[prop]), offsets[prop] * basis));
+}
+</script>
+</pre>
+</body>
+</html>