1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/style/test/file_position_sticky.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,88 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html>
1.6 +<!--
1.7 +https://bugzilla.mozilla.org/show_bug.cgi?id=886646
1.8 +-->
1.9 +<head>
1.10 + <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.11 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
1.12 + <style type="text/css">
1.13 + #scroller {
1.14 + width: 100px;
1.15 + height: 100px;
1.16 + padding: 10px;
1.17 + border: 10px solid black;
1.18 + margin: 10px;
1.19 + overflow: hidden;
1.20 + }
1.21 + #container {
1.22 + width: 50px;
1.23 + height: 50px;
1.24 + }
1.25 + #sticky {
1.26 + position: sticky;
1.27 + width: 10px;
1.28 + height: 10px;
1.29 + overflow: hidden;
1.30 + }
1.31 + </style>
1.32 +</head>
1.33 +<body>
1.34 +<div id="display">
1.35 + <div id="scroller">
1.36 + <div id="container">
1.37 + <div id="sticky"></div>
1.38 + </div>
1.39 + </div>
1.40 +</div>
1.41 +<pre id="test">
1.42 +<script type="application/javascript">
1.43 +
1.44 +/** Test for Bug 886646 - sticky positioning offsets **/
1.45 +
1.46 +// Use "is()", "ok()", and "todo()" from parent document.
1.47 +var is = parent.is;
1.48 +var ok = parent.ok;
1.49 +var todo = parent.todo;
1.50 +
1.51 +// Test that percentage sticky offsets are computed in terms of the
1.52 +// scroll container's content box
1.53 +var offsets = {
1.54 + "top": 10,
1.55 + "left": 20,
1.56 + "bottom": 30,
1.57 + "right": 40,
1.58 +};
1.59 +var scroller = document.getElementById("scroller");
1.60 +var container = document.getElementById("container");
1.61 +var sticky = document.getElementById("sticky");
1.62 +var cs = getComputedStyle(sticky, "");
1.63 +
1.64 +for (var prop in offsets) {
1.65 + sticky.style[prop] = offsets[prop] + "%";
1.66 + is(cs[prop], offsets[prop] + "px");
1.67 +}
1.68 +
1.69 +// ... even in the presence of scrollbars
1.70 +scroller.style.overflow = "scroll";
1.71 +container.style.width = "100%";
1.72 +container.style.height = "100%";
1.73 +
1.74 +var ccs = getComputedStyle(container, "");
1.75 +
1.76 +function isApproximatelyEqual(a, b) {
1.77 + return Math.abs(a - b) < 0.001;
1.78 +}
1.79 +
1.80 +for (var prop in offsets) {
1.81 + sticky.style[prop] = offsets[prop] + "%";
1.82 + var basis = parseFloat(ccs[prop == "left" || prop == "right" ?
1.83 + "width" : "height"]) / 100;
1.84 + ok(isApproximatelyEqual(parseFloat(cs[prop]), offsets[prop] * basis));
1.85 +}
1.86 +
1.87 +parent.finish();
1.88 +</script>
1.89 +</pre>
1.90 +</body>
1.91 +</html>
