offsetTop-offsetLeft-with-zoom.html (3597B)
1 <!DOCTYPE html> 2 <title>OffsetTop and OffsetLeft for elements with css zoom</title> 3 <link rel="author" title="Yotam Hacohen" href="mailto:yotha@chromium.org"> 4 <link rel="author" title="Google" href="http://www.google.com/"> 5 <link rel="help" href="https://drafts.csswg.org/css-viewport/">" 6 <meta name="viewport" content="width=device-width,initial-scale=1"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <!DOCTYPE html> 11 12 <style> 13 .outer_div { 14 width: 100px; 15 height: 100px; 16 border: 1px solid black; 17 position: relative; 18 margin: 10px; 19 } 20 .square { 21 width: 10px; 22 height: 10px; 23 background-color: green; 24 margin: 1px; 25 top:10x; 26 left: 10x; 27 } 28 .one { 29 position: relative; 30 top: 10px; 31 left: 10px; 32 } 33 .two { 34 position: absolute; 35 top: 20px; 36 left: 20px; 37 zoom: 2; 38 } 39 40 .three { 41 position: absolute; 42 top: 10px; 43 left: 50px; 44 zoom: 0.5; 45 } 46 span.square { 47 display: inline-block; 48 } 49 </style> 50 51 <div class="outer_div"> 52 <div id="unzoomed_one" class="square one"></div> 53 <div id="unzoomed_two" class="square two"></div> 54 <div id="unzoomed_three" class="square three"></div> 55 </div> 56 <div style="zoom:3" class="outer_div"> 57 <div id="zoomed_one" class="square one"></div> 58 <div id="zoomed_two" class="square two"></div> 59 <div id="zoomed_three" class="square three"></div> 60 </div> 61 62 <div class="outer_div" style="margin: 30px;" id="outer_div"> 63 <div id="zoomed_middle" style="margin: 10px; zoom:2"> 64 <div class="square" id="unzoomed_inner"></div> 65 </div> 66 </div> 67 <div class="outer_div" style="margin: 30px;"> 68 <div id="unzoomed_middle"> 69 <div class="square" id="zoomed_inner" style="zoom:2; width: 100px; height: 100px; border: 1px solid black;"></div> 70 </div> 71 </div> 72 73 74 <script> 75 test(() => { 76 assert_equals(unzoomed_one.offsetTop, 11, 'unzoomed_one.offsetTop'); 77 assert_equals(unzoomed_one.offsetLeft, 11, 'unzoomed_one.offsetLeft'); 78 assert_equals(unzoomed_two.offsetTop, 21, 'unzoomed_two.offsetTop'); 79 assert_equals(unzoomed_two.offsetLeft, 21, 'unzoomed_two.offsetLeft'); 80 assert_equals(unzoomed_three.offsetTop, 11, 'unzoomed_three.offsetTop'); 81 assert_equals(unzoomed_three.offsetLeft, 51, 'unzoomed_three.offsetLeft'); 82 assert_equals(zoomed_one.offsetTop, 11, 'zoomed_one.offsetTop'); 83 assert_equals(zoomed_one.offsetLeft, 11, 'zoomed_one.offsetLeft'); 84 assert_equals(zoomed_two.offsetTop, 21, 'zoomed_two.offsetTop'); 85 assert_equals(zoomed_two.offsetLeft, 21, 'zoomed_two.offsetLeft'); 86 assert_equals(zoomed_three.offsetTop, 11, 'zoomed_three.offsetTop'); 87 assert_equals(zoomed_three.offsetLeft, 51, 'zoomed_three.offsetLeft'); 88 assert_equals(unzoomed_inner.offsetTop, 10, 'unzoomed_inner.offsetTop'); 89 assert_equals(unzoomed_inner.offsetLeft, 11, 'unzoomed_inner.offsetLeft'); 90 assert_equals(zoomed_inner.offsetTop, 0, 'zoomed_inner.offsetTop'); 91 assert_equals(zoomed_inner.offsetLeft, 1, 'zoomed_inner.offsetLeft'); 92 }, 'Verifies that offsetTop and offsetLeft find the right OffsetParent and return values excluding the target zoom'); 93 94 test(() => { 95 assert_equals(unzoomed_one.offsetWidth, zoomed_one.offsetWidth, "offsetWidth"); 96 assert_equals(unzoomed_one.offsetHeight, zoomed_one.offsetHeight, "offsetHeight"); 97 assert_equals(zoomed_inner.offsetWidth, outer_div.offsetWidth, "offsetWidth for nested element"); 98 assert_equals(zoomed_inner.offsetHeight, outer_div.offsetHeight, "offsetHeight for nested element"); 99 }, 'check that offset is equal between elements when one of them has css zoom'); 100 </script>