test_offsets.html (4660B)
1 <!DOCTYPE HTML> 2 <html style="margin: 5px; border: 0; padding: 1px;"> 3 <head> 4 <title>HTML Tests for offset/client/scroll properties</title> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <script type="text/javascript" src="test_offsets.js"></script> 7 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"> 8 9 <style> 10 input { 11 box-sizing: content-box; 12 } 13 </style> 14 </head> 15 16 <!-- We set a transform on the body element so that it creates a reference frame. 17 This makes sure that snapping of scrolled areas for the contained elements 18 is not influenced by offsets outside of this document. --> 19 <body id="body" 20 style="margin: 1px; border: 2px solid black; padding: 4px; transform: translateY(1px);"> 21 22 <div id="testelements" style="margin: 0; border: 0; padding: 0;"> 23 <div id="div1" style="margin: 0; margin-left: 6px; margin-top: 2px; border: 1px solid green; padding: 6px; width: 50px; height: 20px" 24 _offsetLeft="13" _offsetTop="9" _offsetWidth="64" _offsetHeight="34" 25 _scrollWidth="62" _scrollHeight="32" 26 _clientLeft="1" _clientTop="1" _clientWidth="62" _clientHeight="32"></div> 27 <div id="noscroll" style="margin: 2px; border: 1px solid blue; padding: 3px;" 28 _offsetLeft="10" _offsetTop="12" _offsetWidth="64" _offsetHeight="34" 29 _scrollWidth="62" _scrollHeight="32" 30 _clientLeft="1" _clientTop="1" _clientWidth="62" _clientHeight="32"> 31 <div id="inner">Inner Text</div> 32 </div> 33 34 <div id="absolute" style="position: absolute; margin: 5px; border: 2px solid blue; padding: 0;"> 35 <div id="absolute-block" _offsetParent="absolute"> 36 <div id="absolute-replaced" _offsetParent="absolute" style="margin: 1px; border: 0; padding: 3px;"></div> 37 </div> 38 </div> 39 40 <div id="absolutelr" style="position: absolute; margin: 5px; border: 2px solid blue; padding: 0; left: 90px; top: 130px;"> 41 This is some absolute positioned text. 42 <div id="absolutelr-block" _offsetParent="absolutelr"> 43 <div id="absolutelr-replaced" _offsetParent="absolutelr" style="margin: 1px; border: 0; padding: 3px;"></div> 44 </div> 45 </div> 46 47 <div id="relative" style="position: relative; margin: 2px; border: 1px solid orange; padding: 7px; left: 10px; top: 5px;"> 48 This is some relative positioned text. 49 <div id="relative-block" _offsetParent="relative"> 50 <div id="relative-replaced" _offsetParent="relative" style="margin: 1px; border: 0; padding: 3px;"></div> 51 </div> 52 </div> 53 54 <div id="fixed" style="position: fixed; margin: 2px; border: 1px solid orange; padding: 7px; left: 87px; top: 12px;"> 55 This is some fixed positioned text. 56 <div id="fixed-block" _offsetParent="fixed"> 57 <div id="fixed-replaced" _offsetParent="fixed" style="margin: 1px; border: 0; padding: 3px;"></div> 58 </div> 59 </div> 60 61 <div id="scrollbox" 62 style="overflow: scroll; padding-left: 0px; margin: 3px; border: 4px solid green; max-width: 80px; max-height: 70px" 63 _scrollWidth="62" _scrollHeight="32" 64 _clientLeft="1" _clientTop="1" _clientWidth="62" _clientHeight="32"><p id="p1" style="margin: 0; padding: 0;">One</p> 65 <p id="p2">Two</p> 66 <p id="scrollchild">Three</p> 67 <p id="lastlinebox" style="margin: 0; padding: 0;"><input id="lastline" type="button" 68 style="margin: 0px; border: 2px solid red;" 69 value="This button is much longer than the others"> 70 </p></div> 71 72 <div id="overflow-visible" style="width:100px; height:100px;"> 73 <div id="overflow-visible-1" style="width:200px; height:1px; background:yellow;"></div> 74 <div id="overflow-visible-2" style="height:200px; background:lime;"></div> 75 </div> 76 77 <div id="div-displaynone" style="display: none; border: 0; padding: 0;" 78 _offsetParent="null"></div> 79 <p id="p3" style="margin: 2px; border: 0; padding: 1px;" 80 _offsetLeft="9" _offsetTop="9" _offsetWidth="64" _offsetHeight="34" 81 _scrollWidth="62" _scrollHeight="32" 82 _clientLeft="1" _clientTop="1" _clientWidth="62" _clientHeight="32"> 83 <div id="div-nosize" style="width: 0; height: 0; margin: 0; border: 0; padding: 0;"></div> 84 </p> 85 86 </div> 87 88 <div id="scrollbox-test" style="float: left; overflow: scroll; margin: 0; border: 0; padding: 0"></div> 89 90 <script type="application/javascript"> 91 SimpleTest.waitForExplicitFinish(); 92 93 window.onload = async () => { 94 await SpecialPowers.pushPrefEnv({ 95 set: [ ["layout.disable-pixel-alignment", true] ] 96 }); 97 setTimeout(testElements, 0, 'testelements', SimpleTest.finish); 98 }; 99 </script> 100 101 <p id="display"></p> 102 <div id="content" style="display: none"> 103 104 </div> 105 106 </body> 107 </html>