client-props-zoom.html (1949B)
1 <!DOCTYPE html> 2 <title>Client properties 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: cyan; 13 } 14 .test_content div.x4_zoom { 15 zoom: 4.0; 16 } 17 </style> 18 <body> 19 <div class="test_content"> 20 <div id="no_zoom"></div> 21 <div class="x4_zoom" id="element_with_zoom"></div> 22 23 <div class="x4_zoom"> 24 <div id="direct_child_of_element_with_zoom"></div> 25 <div> 26 <div id="indirect_child_of_element_with_zoom"></div> 27 </div> 28 <div class="x4_zoom" id="both_child_and_parent_has_zoom"></div> 29 </div> 30 </div> 31 32 <script> 33 setup(() => { 34 window.noZoom = document.getElementById("no_zoom"); 35 }); 36 function compareObjectToDivWithNoZoom(object){ 37 assert_equals(object.clientTop, noZoom.clientTop, 'clientTop'); 38 assert_equals(object.clientLeft, noZoom.clientLeft, 'clientLeft'); 39 assert_equals(object.clientWidth, noZoom.clientWidth, 'clientWidth'); 40 assert_equals(object.clientHeight ,noZoom.clientHeight, 'clientHeight'); 41 } 42 test(function() { 43 assert_true(!!noZoom, "no zoom target exists"); 44 }); 45 test(function() { 46 compareObjectToDivWithNoZoom(document.getElementById("element_with_zoom")); 47 compareObjectToDivWithNoZoom(document.getElementById("direct_child_of_element_with_zoom")); 48 compareObjectToDivWithNoZoom(document.getElementById("indirect_child_of_element_with_zoom")); 49 compareObjectToDivWithNoZoom(document.getElementById("both_child_and_parent_has_zoom")); 50 }); 51 </script> 52 </body>