computedStyle-zoom.html (2824B)
1 <!DOCTYPE html> 2 <title>getComputedStyle 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 div { 10 width: 64px; 11 height: 64px; 12 font-size: 64px; 13 line-height: 64px; 14 text-indent: 64px; 15 background-color: blue 16 } 17 div.x4_zoom { 18 zoom: 4.0; 19 background-color: blueviolet; 20 } 21 div.x2_zoom { 22 background-color: chartreuse; 23 zoom: 2.0; 24 } 25 </style> 26 </head> 27 <body> 28 <div id="no_zoom"></div> 29 <div class="x4_zoom" id="with_zoom"></div> 30 <div class="x2_zoom" id="parent_div"> 31 <div class="x4_zoom" id="nested_zoom"></div> 32 </div> 33 <div class="x2_zoom" id="testing_set_style"></div> 34 <script> 35 const LENGTH_PROPS = [ 36 "width", 37 "height", 38 "line-height", 39 "text-indent", 40 "font-size", 41 ]; 42 test(function() { 43 assert_true(!!no_zoom, "no zoom target exists"); 44 assert_true(!!with_zoom, "zoom target exists"); 45 assert_true(!!nested_zoom, "zoom target exists"); 46 assert_true(!!parent_div, "parent div with zoom exists") 47 }); 48 function assert_length_props(style, expected) { 49 for (let prop of LENGTH_PROPS) { 50 assert_equals(style.getPropertyValue(prop), expected, prop); 51 } 52 } 53 test(function(){ 54 let noZoomStyle = getComputedStyle(no_zoom); 55 assert_length_props(noZoomStyle, "64px"); 56 assert_equals(noZoomStyle.getPropertyValue("zoom"), "1"); 57 }); 58 test(function(){ 59 let withZoomStyle = getComputedStyle(with_zoom); 60 assert_length_props(withZoomStyle, "64px"); 61 assert_equals(withZoomStyle.getPropertyValue("zoom"), "4"); 62 }); 63 test(function(){ 64 let parentWithZoomStyle = getComputedStyle(parent_div); 65 assert_length_props(parentWithZoomStyle, "64px"); 66 assert_equals(parentWithZoomStyle.getPropertyValue("zoom"), "2"); 67 }); 68 test(function(){ 69 nestedZoomStyle = getComputedStyle(nested_zoom); 70 assert_length_props(nestedZoomStyle, "64px"); 71 assert_equals(nestedZoomStyle.getPropertyValue("zoom"), "4"); 72 }); 73 test(function(){ 74 testDivStyle = getComputedStyle(testing_set_style); 75 testing_set_style.setAttribute("style", LENGTH_PROPS.map(p => p + ": 1px").join(";")); 76 assert_length_props(testDivStyle, "1px"); 77 assert_equals(testDivStyle.getPropertyValue("zoom"), "2"); 78 testing_set_style.setAttribute("style", LENGTH_PROPS.map(p => p + ": 64px").join(";")); 79 assert_length_props(testDivStyle, "64px"); 80 assert_equals(testDivStyle.getPropertyValue("zoom"), "2"); 81 }); 82 </script> 83 </body>