scroll-zoom.html (3912B)
1 <!DOCTYPE html> 2 <title>scroll properties for elements with css zoom</title> 3 <meta name="viewport" content="width=device-width,initial-scale=1"> 4 <link rel="author" title="Yotam Hacohen" href="mailto:yotha@chromium.org"> 5 <link rel="author" title="Google" href="http://www.google.com/"> 6 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scroll"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <head> 10 <style> 11 .container { 12 height: 100px; 13 width: 100px; 14 overflow: scroll; 15 } 16 .content { 17 height: 250px; 18 width: 250px; 19 background-image: linear-gradient(red, yellow); 20 } 21 #x4_zoom_container { 22 zoom: 4; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="container" id="no_zoom_container"> 28 <div class="content"></div> 29 </div> 30 <div class="container" id="x4_zoom_container"> 31 <div class="content"></div> 32 </div> 33 <div class="container" id="container_with_zoomed_content"> 34 <div class="content" style="zoom: 2;"></div> 35 </div> 36 <div style="zoom: 2;"> 37 <div class="container" id="scroller_in_zoomed_element"> 38 <div class="content"></div> 39 </div> 40 </div> 41 <script> 42 setup(() => { 43 window.noZoom = document.getElementById("no_zoom_container"); 44 window.withZoom = document.getElementById("x4_zoom_container"); 45 window.scrollerWithZoomContent = document.getElementById("container_with_zoomed_content"); 46 window.scrollerInZoomedElement = document.getElementById("scroller_in_zoomed_element"); 47 }); 48 test(function() { 49 assert_true(!!noZoom, "no zoom target exists"); 50 assert_true(!!withZoom, "zoom target exists"); 51 }); 52 test(function() { 53 // We remove zoom effects for scroll height and scroll width so values 54 // should be same for elements with and without zoom 55 // However scroll values should be changed by zoom on content 56 assert_equals(noZoom.scrollHeight, withZoom.scrollHeight, 'scrollHeight'); 57 assert_equals(noZoom.scrollWidth, withZoom.scrollWidth, 'scrollWidth'); 58 assert_equals(noZoom.scrollHeight*2, scrollerWithZoomContent.scrollHeight, 'scroll height for zoomed content'); 59 assert_equals(noZoom.scrollWidth*2, scrollerWithZoomContent.scrollWidth, 'scroll width for zoomed content'); 60 assert_equals(noZoom.scrollHeight, scrollerInZoomedElement.scrollHeight, 'scroll height for scroller in zoomed element'); 61 assert_equals(noZoom.scrollWidth, scrollerInZoomedElement.scrollWidth, 'scroll width for scroller in zoomed element'); 62 }, `scroll{Width, Height}`); 63 64 test(function() { 65 assert_equals(noZoom.scrollTop, 0, 'scrollTop should be 0'); 66 assert_equals(noZoom.scrollLeft, 0, 'scrollLeft should be 0'); 67 68 assert_equals(noZoom.scrollTop, withZoom.scrollTop, 'scrollTop'); 69 assert_equals(noZoom.scrollLeft, withZoom.scrollLeft, 'scrollLeft'); 70 71 noZoom.scrollTo(noZoom.scrollWidth / 2, noZoom.scrollHeight / 2); 72 withZoom.scrollTo(withZoom.scrollWidth / 2, withZoom.scrollHeight / 2); 73 74 assert_not_equals(noZoom.scrollTop, 0, 'scrollTop should not be 0'); 75 assert_not_equals(noZoom.scrollLeft, 0, 'scrollLeft should not be 0'); 76 77 assert_equals(noZoom.scrollTop, withZoom.scrollTop, 'scrollTop after scrollTo'); 78 assert_equals(noZoom.scrollLeft, withZoom.scrollLeft, 'scrollLeft after scrollTo'); 79 80 noZoom.scrollBy(2, 2); 81 withZoom.scrollBy(2, 2); 82 83 assert_equals(noZoom.scrollTop, withZoom.scrollTop, 'scrollTop after scrollBy'); 84 assert_equals(noZoom.scrollLeft, withZoom.scrollLeft, 'scrollLeft after scrollBy'); 85 }, `scroll{Top, Left}`); 86 </script> 87 </body>