resizer-transform.tentative.html (1606B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Resizer should account for transforms to decide resize direction</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=1775797"> 7 <link rel="help" href="https://www.w3.org/TR/css-ui-4/#resize"> 8 <style> 9 #resizeme { 10 position: absolute; 11 top: 200px; 12 left: 200px; 13 width: 100px; 14 height: 100px; 15 overflow: hidden; 16 resize: both; 17 background-color: green; 18 transform-origin: 0 0; 19 transform: rotate(90deg); 20 } 21 </style> 22 <script src='/resources/testharness.js'></script> 23 <script src='/resources/testharnessreport.js'></script> 24 <script src="/resources/testdriver.js"></script> 25 <script src="/resources/testdriver-actions.js"></script> 26 <script src="/resources/testdriver-vendor.js"></script> 27 <div id="resizeme"></div> 28 <script> 29 promise_test(async function test() { 30 let element = document.getElementById("resizeme"); 31 let rect = element.getBoundingClientRect(); 32 33 // Due to the rotation, the resizer should be at the bottom left. 34 await new test_driver.Actions() 35 .pointerMove(rect.left + 1, rect.bottom - 1) 36 .pointerDown() 37 .pointerMove(rect.left + 1, rect.bottom + 50) 38 .pointerUp() 39 .send(); 40 41 // We should've made the element wider due to the rotation. 42 assert_greater_than(parseInt(getComputedStyle(element).width, 10), 100, "Element should be wider"); 43 assert_equals(parseInt(getComputedStyle(element).height, 10), 100, "Element should have the same height"); 44 }); 45 </script>