resizer-no-size-change.tentative.html (3290B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Resizer should not set the width/height properties when size doesn't change</title> 4 <link rel=author href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 5 <link rel=author href="https://mozilla.org" title="Mozilla"> 6 <link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1795536"> 7 <link rel="help" href="https://www.w3.org/TR/css-ui-4/#resize"> 8 <style> 9 body { 10 margin: 0; 11 } 12 #resizeme { 13 position: absolute; 14 top: 100px; 15 left: 100px; 16 width: 100px; 17 height: 100px; 18 overflow: hidden; 19 resize: both; 20 background-color: green; 21 } 22 #parent { 23 background-color: purple; 24 position: relative; 25 } 26 </style> 27 <script src='/resources/testharness.js'></script> 28 <script src='/resources/testharnessreport.js'></script> 29 <script src="/resources/testdriver.js"></script> 30 <script src="/resources/testdriver-actions.js"></script> 31 <script src="/resources/testdriver-vendor.js"></script> 32 <div id="parent" style="width: 400px; height: 400px"> 33 <div id="resizeme" style="width: 100px; height: 100px;"></div> 34 </div> 35 <script> 36 function tick() { 37 return new Promise(r => { 38 requestAnimationFrame(() => requestAnimationFrame(r)); 39 }); 40 } 41 42 promise_test(async function test() { 43 const element = document.getElementById("resizeme"); 44 45 { 46 // Set up the observer. 47 const observer = new ResizeObserver(entries => { 48 const rect = entries[0].contentRect; 49 if (rect.width && rect.height) { 50 const style = element.style; 51 const { height, width } = style; 52 const widthPercent = width.endsWith("%"); 53 const heightPercent = height.endsWith("%"); 54 if (widthPercent && heightPercent) { 55 return; 56 } 57 58 const parent = element.parentElement; 59 const parentWidth = parseFloat(parent.style.width); 60 const parentHeight = parseFloat(parent.style.height); 61 if (!widthPercent) { 62 style.width = `${(100 * parseFloat(width)) / parentWidth}%`; 63 } 64 if (!heightPercent) { 65 style.height = `${(100 * parseFloat(height)) / parentHeight}%`; 66 } 67 } 68 }); 69 observer.observe(element); 70 } 71 72 { 73 // Resize to the smallest horizontal dimension possible. 74 const rect = element.getBoundingClientRect(); 75 76 await new test_driver.Actions() 77 .pointerMove(rect.right - 1, rect.bottom - 1) 78 .pointerDown() 79 .pointerMove(rect.left, rect.bottom - 1) 80 .pointerUp() 81 .send(); 82 } 83 84 await tick(); 85 86 assert_true(element.style.width.endsWith("%"), "Width is in percent"); 87 assert_true(element.style.height.endsWith("%"), "Height is in percent"); 88 89 const oldRect = element.getBoundingClientRect(); 90 { 91 // Try to shrink again (we shouldn't be able to). 92 await new test_driver.Actions() 93 .pointerMove(oldRect.right - 1, oldRect.bottom - 1) 94 .pointerDown() 95 .pointerMove(oldRect.left, oldRect.bottom - 1) 96 .pointerUp() 97 .send(); 98 } 99 100 assert_true(element.style.width.endsWith("%"), "Width is still in percent"); 101 assert_true(element.style.height.endsWith("%"), "Height is still in percent"); 102 103 await tick(); 104 105 assert_true(element.style.width.endsWith("%"), "Width is still in percent"); 106 assert_true(element.style.height.endsWith("%"), "Height is still in percent"); 107 }); 108 </script>