summaryrefslogtreecommitdiffstats
path: root/layout/style/test/test_position_sticky.html
diff options
context:
space:
mode:
Diffstat (limited to 'layout/style/test/test_position_sticky.html')
-rw-r--r--layout/style/test/test_position_sticky.html89
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>