getClientRects-zoom.html (3075B)
1 <!DOCTYPE html> 2 <title>getBoundingClientRect 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 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 .test_content div { 10 width: 64px; 11 height: 64px; 12 background-color: blue 13 } 14 .test_content div.x4_zoom { 15 zoom: 4.0; 16 background-color: blueviolet; 17 } 18 .test_content div.x2_zoom { 19 background-color: chartreuse; 20 zoom: 2.0; 21 } 22 23 .test_content div.transform { 24 transform: scale(2); 25 transform-origin: top left; 26 } 27 28 29 </style> 30 <body> 31 <div class="test_content"> 32 <div id="no_zoom"></div> 33 <div class="x4_zoom" id="with_zoom"> 34 </div> 35 <div class="x2_zoom"> 36 <div class="x4_zoom" id="nested_zoom"></div> 37 </div> 38 <div id="transform_and_zoom" class="x4_zoom transform"></div> 39 </div> 40 <script> 41 setup(() => { 42 window.noZoom = document.getElementById("no_zoom"); 43 window.withZoom = document.getElementById("with_zoom"); 44 window.nestedZoom = document.getElementById("nested_zoom"); 45 window.transformAndZoom = document.getElementById("transform_and_zoom"); 46 }); 47 test(function() { 48 assert_true(!!noZoom, "no zoom target exists"); 49 assert_true(!!withZoom, "zoom target exists"); 50 }); 51 test(function() { 52 let noZoomRect = noZoom.getClientRects()[0]; 53 assert_equals(noZoomRect.left, 8, 'no zoom left'); 54 assert_equals(noZoomRect.top, 8, 'no zoom top'); 55 assert_equals(noZoomRect.width, 64, 'no zoom width'); 56 assert_equals(noZoomRect.height, 64, 'no zoom height'); 57 }); 58 test(function() { 59 let ZoomRect = withZoom.getClientRects()[0]; 60 assert_equals(ZoomRect.left, 8, 'x4 zoom left'); 61 assert_equals(ZoomRect.top, 8 + 64, 'x4 zoom top'); 62 assert_equals(ZoomRect.width, 256, 'x4 zoom width'); 63 assert_equals(ZoomRect.height, 256, 'x4 zoom height'); 64 }); 65 test(function() { 66 let nestedZoomRect = nestedZoom.getClientRects()[0]; 67 assert_equals(nestedZoomRect.left, 8, 'nested zoom left'); 68 assert_equals(nestedZoomRect.top, 8 + 64 + 256, 'nested zoom top'); 69 assert_equals(nestedZoomRect.width, 512, 'nested zoom width'); 70 assert_equals(nestedZoomRect.height, 512, 'nested zoom height'); 71 }); 72 test(function() { 73 let transformAndZoomRect = transformAndZoom.getClientRects()[0]; 74 assert_equals(transformAndZoomRect.left, 8, 'transform and zoom left'); 75 assert_equals(transformAndZoomRect.top, 8 + 64 + 256 + 128, 'transform and zoom top'); 76 assert_equals(transformAndZoomRect.width, 512, 'transform and zoom width'); 77 assert_equals(transformAndZoomRect.height, 512, 'transform and zoom height'); 78 }); 79 </script> 80 </body>