test_bug375003-2.html (3634B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=375003 5 --> 6 <head> 7 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 8 <title>Test 2 for bug 375003</title> 9 10 <script src="/tests/SimpleTest/SimpleTest.js"></script> 11 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 12 13 <style type="text/css"> 14 15 html { 16 padding:0; margin:0; 17 } 18 body { 19 color:black; background-color:white; font-size:12px; padding:10px; margin:0; 20 } 21 22 #div1,#abs1,#table1 { 23 border: 20px solid lime; 24 padding: 30px; 25 width: 100px; 26 height: 60px; 27 overflow:scroll; 28 } 29 #abs1,#table2parent { 30 position:absolute; 31 left:500px; 32 } 33 #table3parent { 34 position:fixed; 35 left:300px; 36 top:100px; 37 } 38 .content { 39 display:block; 40 width:200px; 41 height:200px; 42 background:yellow; 43 border: 0px dotted black; 44 } 45 </style> 46 47 48 <script type="text/javascript"> 49 var x = [ 'Left','Top','Width','Height' ]; 50 function test(id,s,expected, fuzzy) { 51 var el = document.getElementById(id); 52 for(var i = 0; i < x.length; ++i) { 53 // eslint-disable-next-line no-eval 54 var actual = eval('el.'+s+x[i]); 55 if (expected[i] != -1 && s+x[i]!='scrollHeight') { 56 let check = fuzzy ? 57 (actual, expected, desc) => isfuzzy(actual, expected, 1, desc) : 58 is; 59 check(actual, expected[i], id+"."+s+x[i]); 60 } 61 } 62 } 63 function t3(id,c,o,s,pid,fuzzy) { 64 test(id,'client',c); 65 test(id,'offset',o); 66 test(id,'scroll',s,fuzzy); 67 var p = document.getElementById(id).offsetParent; 68 if (pid == null) { 69 is(p, null, id + ".offsetParent"); 70 } else { 71 is(p.id, pid, id + ".offsetParent"); 72 } 73 } 74 75 function run_test() { 76 // Due to how the document is rendered and then scaled to viewport, 77 // rounding errors are introduced that we need to account for. 78 // This is propagated to only tests that we observed failures attributed 79 // to the cause above, to prevent false negatives. 80 // TODO(dshin, Bug 1930223): Perhaps the test runner should handle this. 81 const fuzzy = navigator.appVersion.includes("Android"); 82 // XXX how test clientWidth/clientHeight (the -1 below) in cross-platform manner 83 // without hard-coding the scrollbar width? 84 t3('div1',[20,20,-1,-1],[10,10,200,160],[0,0,260,20],'body',fuzzy); 85 t3('abs1',[20,20,-1,-1],[500,170,200,160],[0,0,260,20],'body',fuzzy); 86 t3('table1',[0,0,306,306],[10,170,306,306],[0,0,306,306],'body'); 87 t3('table2',[0,0,206,206],[0,0,206,206],[0,0,206,20],'table2parent'); 88 t3('table3',[0,0,228,228],[0,0,228,228],[0,0,228,228],'table3parent'); 89 t3('table3parent',[0,0,228,228],[300,100,228,228],[0,0,228,228], null); 90 } 91 </script> 92 93 </head> 94 <body id="body"> 95 <div id="content"> 96 <div id="div1parent"> 97 <div id="div1"><span class="content">DIV</span></div> 98 </div> 99 100 <div id="abs1parent"> 101 <div id="abs1"><span class="content">abs.pos.DIV</span></div> 102 </div> 103 104 <div id="table1parent"> 105 <table id="table1"><tbody><tr><td id="td1"><span class="content">TABLE</span></td></tr></tbody></table> 106 </div> 107 108 <div id="table2parent"> 109 <table id="table2"><tbody><tr><td id="td2"><span class="content">TABLE in abs</span></td></tr></tbody></table> 110 </div> 111 112 <div id="table3parent"> 113 <table id="table3" border="10"><tbody><tr><td id="td3"><span class="content">TABLE in fixed</span></td></tr></tbody></table> 114 </div> 115 </div> 116 117 <pre id="test"> 118 <script class="testbody" type="text/javascript"> 119 run_test(); 120 </script> 121 </pre> 122 123 </body> 124 </html>