test_position_sticky.html (2262B)
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 /** 46 * Test for Bug 886646 - Offsets for sticky positioning, when accessed through 47 * getComputedStyle(), should be accurately computed. In particular, 48 * percentage offsets should be computed in terms of the scroll container's 49 * content box. 50 */ 51 52 // Test that percentage sticky offsets are computed in terms of the 53 // scroll container's content box 54 var offsets = { 55 "top": 10, 56 "left": 20, 57 "bottom": 30, 58 "right": 40, 59 }; 60 61 var scroller = document.getElementById("scroller"); 62 var container = document.getElementById("container"); 63 var sticky = document.getElementById("sticky"); 64 var cs = getComputedStyle(sticky, ""); 65 66 for (var prop in offsets) { 67 sticky.style[prop] = offsets[prop] + "%"; 68 is(cs[prop], offsets[prop] + "px"); 69 } 70 71 // ... even in the presence of scrollbars 72 scroller.style.overflow = "scroll"; 73 container.style.width = "100%"; 74 container.style.height = "100%"; 75 76 var ccs = getComputedStyle(container, ""); 77 78 function isApproximatelyEqual(a, b) { 79 return Math.abs(a - b) < 0.001; 80 } 81 82 for (var prop in offsets) { 83 sticky.style[prop] = offsets[prop] + "%"; 84 var basis = parseFloat(ccs[prop == "left" || prop == "right" ? 85 "width" : "height"]) / 100; 86 ok(isApproximatelyEqual(parseFloat(cs[prop]), offsets[prop] * basis)); 87 } 88 </script> 89 </pre> 90 </body> 91 </html>