layout/style/test/test_position_sticky.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=886646
   5 -->
   6 <head>
   7   <meta charset="utf-8">
   8   <title>Test for Bug 886646</title>
   9   <script src="/tests/SimpleTest/SimpleTest.js"></script>
  10   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  11   <style type="text/css">
  12     #scroller {
  13       width: 100px;
  14       height: 100px;
  15       padding: 10px;
  16       border: 10px solid black;
  17       margin: 10px;
  18       overflow: hidden;
  19     }
  20     #container {
  21       width: 50px;
  22       height: 50px;
  23     }
  24     #sticky {
  25       position: sticky;
  26       width: 10px;
  27       height: 10px;
  28       overflow: hidden;
  29     }
  30   </style>
  31 </head>
  32 <body>
  33 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=886646">Mozilla Bug 886646</a>
  34 <div id="display">
  35   <div id="scroller">
  36     <div id="container">
  37       <div id="sticky"></div>
  38     </div>
  39   </div>
  40 </div>
  41 <pre id="test">
  42 <script type="application/javascript">
  43
  44
  45 /** Test for Bug 886646 - Offsets for sticky positioning, when accessed through
  46   * getComputedStyle(), should be accurately computed. In particular,
  47   * percentage offsets should be computed in terms of the scroll container's
  48   * content box. */
  49
  50 // Test that percentage sticky offsets are computed in terms of the
  51 // scroll container's content box
  52 var offsets = {
  53   "top":    10,
  54   "left":   20,
  55   "bottom": 30,
  56   "right":  40,
  57 };
  58
  59 var scroller = document.getElementById("scroller");
  60 var container = document.getElementById("container");
  61 var sticky = document.getElementById("sticky");
  62 var cs = getComputedStyle(sticky, "");
  63
  64 for (var prop in offsets) {
  65   sticky.style[prop] = offsets[prop] + "%";
  66   is(cs[prop], offsets[prop] + "px");
  67 }
  68
  69 // ... even in the presence of scrollbars
  70 scroller.style.overflow = "scroll";
  71 container.style.width = "100%";
  72 container.style.height = "100%";
  73
  74 var ccs = getComputedStyle(container, "");
  75
  76 function isApproximatelyEqual(a, b) {
  77   return Math.abs(a - b) < 0.001;
  78 }
  79
  80 for (var prop in offsets) {
  81   sticky.style[prop] = offsets[prop] + "%";
  82   var basis = parseFloat(ccs[prop == "left" || prop == "right" ?
  83                              "width" : "height"]) / 100;
  84   ok(isApproximatelyEqual(parseFloat(cs[prop]), offsets[prop] * basis));
  85 }
  86 </script>
  87 </pre>
  88 </body>
  89 </html>