getBoundingClientRect-zoom.html (3033B)
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 <head> 9 <style> 10 div { 11 width: 64px; 12 height: 64px; 13 background-color: blue 14 } 15 div.x4_zoom { 16 zoom: 4.0; 17 background-color: blueviolet; 18 } 19 div.x2_zoom { 20 background-color: chartreuse; 21 zoom: 2.0; 22 } 23 24 div.transform { 25 transform: scale(2); 26 transform-origin: top left; 27 } 28 29 30 </style> 31 </head> 32 <body> 33 <div id="no_zoom"></div> 34 <div class="x4_zoom" id="with_zoom"> 35 </div> 36 <div class="x2_zoom"> 37 <div class="x4_zoom" id="nested_zoom"></div> 38 </div> 39 <div id="transform_and_zoom" class="x4_zoom transform"></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.getBoundingClientRect(); 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.getBoundingClientRect(); 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.getBoundingClientRect(); 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.getBoundingClientRect(); 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> 81 `