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