zoom.html (2612B)
1 <!doctype html> 2 <link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-om"> 3 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9398"> 4 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 5 <link rel="author" href="https://mozilla.org" title="Mozilla"> 6 <title>ResizeObserver sizes account for zoom</title> 7 <meta name="viewport" content="width=device-width,initial-scale=1"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <style> 11 div { 12 width: 100px; 13 height: 100px; 14 border: 5px solid; 15 padding: 5px; 16 margin: 5px; 17 box-sizing: border-box; 18 } 19 </style> 20 <div></div> 21 <div style="zoom: 2"></div> 22 <div style="zoom: 4"></div> 23 <script> 24 promise_test(async function() { 25 let { promise, resolve } = Promise.withResolvers(); 26 let observer = new ResizeObserver(entries => { 27 resolve(entries); 28 }); 29 for (let div of document.querySelectorAll("div")) { 30 observer.observe(div); 31 } 32 let entries = await promise; 33 observer.disconnect(); 34 assert_equals(entries.length, 3, "Should have three entries"); 35 for (let entry of entries) { 36 assert_equals(entry.contentRect.top, 5, "content-rect top should be scaled by zoom"); 37 assert_equals(entry.contentRect.left, 5, "content-rect left should be scaled by zoom"); 38 assert_equals(entry.contentRect.width, 80, "content-rect width should be scaled by zoom"); 39 assert_equals(entry.contentRect.height, 80, "content-rect height should be scaled by zoom"); 40 41 for (let sizeArray of [entry.borderBoxSize, entry.contentBoxSize, entry.devicePixelContentBoxSize]) { 42 assert_equals(sizeArray.length, 1, "Should have one box"); 43 } 44 let borderBoxSize = entry.borderBoxSize[0]; 45 let contentBoxSize = entry.contentBoxSize[0]; 46 let devicePixelContentBoxSize = entry.devicePixelContentBoxSize[0]; 47 assert_equals(borderBoxSize.inlineSize, 100, "border inline size should be scaled by zoom"); 48 assert_equals(borderBoxSize.blockSize, 100, "border block size should be scaled by zoom"); 49 assert_equals(contentBoxSize.inlineSize, 80, "content inline size should be scaled by zoom"); 50 assert_equals(contentBoxSize.blockSize, 80, "content block size should be scaled by zoom"); 51 assert_equals(devicePixelContentBoxSize.inlineSize, 80 * entry.target.currentCSSZoom * window.devicePixelRatio, "dev-px size should _not_ be scaled by zoom"); 52 assert_equals(devicePixelContentBoxSize.blockSize, 80 * entry.target.currentCSSZoom * window.devicePixelRatio, "dev-px size should _not_ be scaled by zoom"); 53 } 54 }); 55 </script>