The Tor Browser / file comparison
comparison: layout/generic/test/page_scroll_with_fixed_pos_window.html
layout/generic/test/page_scroll_with_fixed_pos_window.html
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:ddd09f0d21ee |
|---|---|
| 1 <!DOCTYPE HTML> | |
| 2 <html> | |
| 3 <head> | |
| 4 <title>Scrolling by pages with fixed-pos headers and footers</title> | |
| 5 <style> | |
| 6 .fp { position:fixed; left:0; width:100%; } | |
| 7 .fp2 { position:fixed; left:0; width:100%; } | |
| 8 </style> | |
| 9 </head> | |
| 10 <body onscroll="didScroll()" onload="test()"> | |
| 11 <div class="fp" id="top" style="top:0; height:10px; background:yellow;"></div> | |
| 12 <div class="fp2" id="top2" style="top:10px; height:11px; background:blue;"></div> | |
| 13 <div class="fp" style="top:50%; height:7px; background:cyan;"></div> | |
| 14 <div class="fp2" id="bottom2" style="bottom:9px; height:12px; background:red;"></div> | |
| 15 <div class="fp" id="bottom" style="bottom:0; height:13px; background:yellow;"></div> | |
| 16 <p id="target">Something to click on to get focus | |
| 17 <div style="height:3000px;"></div> | |
| 18 <pre id="test"> | |
| 19 <script class="testbody"> | |
| 20 var SimpleTest = window.opener.SimpleTest; | |
| 21 var SpecialPowers = window.opener.SpecialPowers; | |
| 22 var is = window.opener.is; | |
| 23 | |
| 24 function showElements(show, classname) { | |
| 25 var elements = document.getElementsByClassName(classname); | |
| 26 for (var i = 0; i < elements.length; ++i) { | |
| 27 elements[i].style.display = show ? '' : 'none'; | |
| 28 } | |
| 29 } | |
| 30 function showFixedPosElements(show) { | |
| 31 showElements(show, "fp"); | |
| 32 } | |
| 33 function showFixedPosElements2(show) { | |
| 34 showElements(show, "fp2"); | |
| 35 } | |
| 36 | |
| 37 var nextCont; | |
| 38 function didScroll() { | |
| 39 var c = nextCont; | |
| 40 nextCont = null; | |
| 41 if (c) { | |
| 42 c(); | |
| 43 } | |
| 44 } | |
| 45 | |
| 46 function scrollDownOnePageWithContinuation(cont) { | |
| 47 document.documentElement.scrollTop = 0; | |
| 48 nextCont = cont; | |
| 49 window.scrollByPages(1); | |
| 50 } | |
| 51 | |
| 52 function test() { | |
| 53 var smoothScrollPref = "general.smoothScroll"; | |
| 54 SpecialPowers.setBoolPref(smoothScrollPref, false); | |
| 55 | |
| 56 showFixedPosElements(false); | |
| 57 showFixedPosElements2(false); | |
| 58 scrollDownOnePageWithContinuation(function() { | |
| 59 var fullPageScrollDown = document.documentElement.scrollTop; | |
| 60 | |
| 61 showFixedPosElements(true); | |
| 62 scrollDownOnePageWithContinuation(function() { | |
| 63 var fullPageScrollDownWithHeaderAndFooter = document.documentElement.scrollTop; | |
| 64 is(fullPageScrollDownWithHeaderAndFooter, fullPageScrollDown - (10 + 13), | |
| 65 "Reduce scroll distance by size of small header and footer"); | |
| 66 | |
| 67 document.getElementById("bottom").style.height = (window.innerHeight - 20) + "px"; | |
| 68 scrollDownOnePageWithContinuation(function() { | |
| 69 is(document.documentElement.scrollTop, fullPageScrollDown - 10, | |
| 70 "Ignore really big elements when reducing scroll size"); | |
| 71 document.getElementById("bottom").style.height = "13px"; | |
| 72 | |
| 73 document.getElementById("top").style.width = "100px"; | |
| 74 scrollDownOnePageWithContinuation(function() { | |
| 75 is(document.documentElement.scrollTop, fullPageScrollDown - 13, | |
| 76 "Ignore elements that don't span the entire viewport side"); | |
| 77 document.getElementById("top").style.width = "100%"; | |
| 78 | |
| 79 showFixedPosElements2(true); | |
| 80 scrollDownOnePageWithContinuation(function() { | |
| 81 is(document.documentElement.scrollTop, fullPageScrollDown - (10 + 11 + 9 + 12), | |
| 82 "Combine multiple overlapping elements"); | |
| 83 | |
| 84 // Scroll back up so test results are visible | |
| 85 document.documentElement.scrollTop = 0; | |
| 86 SpecialPowers.clearUserPref(smoothScrollPref); | |
| 87 SimpleTest.finish(); | |
| 88 window.close(); | |
| 89 }); | |
| 90 }); | |
| 91 }); | |
| 92 }); | |
| 93 }); | |
| 94 } | |
| 95 </script> | |
| 96 </pre> | |
| 97 </body> | |
| 98 </html> |
