resize-interactive.html (3148B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS resize: interactive behavior</title> 4 <link rel="help" href="https://drafts.csswg.org/css-ui/#resize"> 5 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 6 <meta name="assert" content="This test checks that elements are correctly resized 7 when a user interacts with their resizing mechanism (simulated via WebDriver)."> 8 9 <style> 10 body { 11 margin-bottom: 1000px; 12 } 13 .test { 14 width: 100px; 15 height: 100px; 16 overflow: scroll; 17 } 18 .resize-both { 19 resize: both; 20 } 21 .resize-horizontal { 22 resize: horizontal; 23 } 24 .resize-vertical { 25 resize: vertical; 26 } 27 .resize-block { 28 resize: block; 29 } 30 .resize-inline { 31 resize: inline; 32 } 33 .wm-horizontal { 34 writing-mode: horizontal-tb; 35 } 36 .wm-vertical { 37 writing-mode: vertical-lr; 38 } 39 .test::before { 40 content: ""; 41 display: block; 42 width: 1000px; 43 height: 1000px; 44 } 45 </style> 46 47 <div class="test resize-both wm-horizontal"></div> 48 <div class="test resize-both wm-vertical"></div> 49 <div class="test resize-horizontal wm-horizontal"></div> 50 <div class="test resize-horizontal wm-vertical"></div> 51 <div class="test resize-vertical wm-horizontal"></div> 52 <div class="test resize-vertical wm-vertical"></div> 53 <div class="test resize-block wm-horizontal"></div> 54 <div class="test resize-block wm-vertical"></div> 55 <div class="test resize-inline wm-horizontal"></div> 56 <div class="test resize-inline wm-vertical"></div> 57 58 <script src="/resources/testharness.js"></script> 59 <script src="/resources/testharnessreport.js"></script> 60 <script src="/resources/testdriver.js"></script> 61 <script src="/resources/testdriver-actions.js"></script> 62 <script src="/resources/testdriver-vendor.js"></script> 63 64 <script> 65 function hasHorizontalWritingMode(cs) { 66 return cs.writingMode === "horizontal-tb"; 67 } 68 69 function getResolvedResize(cs) { 70 let { resize } = cs; 71 switch (resize) { 72 case "block": 73 return hasHorizontalWritingMode(cs) ? "vertical" : "horizontal"; 74 case "inline": 75 return hasHorizontalWritingMode(cs) ? "horizontal" : "vertical"; 76 default: 77 return resize; 78 } 79 } 80 81 for (let target of document.querySelectorAll(".test")) { 82 promise_test(async () => { 83 // Scroll element to the top, to ensure that the pointer stays within the vieport 84 // when resizing the element. 85 target.scrollIntoView(); 86 87 await new test_driver.Actions() 88 // Place pointer on the resizing mechanism. 89 .pointerMove(49, 49, {origin: target}) 90 .pointerDown() 91 // Resize the element. 92 .pointerMove(149, 149, {origin: target}) 93 .pointerUp() 94 .send(); 95 96 let resize = getResolvedResize(getComputedStyle(target)); 97 if (resize === "horizontal" || resize === "both") { 98 assert_equals(target.offsetWidth, 200, "Width should have grown to 200px"); 99 } else { 100 assert_equals(target.offsetWidth, 100, "Width should have stayed as 100px"); 101 } 102 if (resize === "vertical" || resize === "both") { 103 assert_equals(target.offsetHeight, 200, "Height should have grown to 200px"); 104 } else { 105 assert_equals(target.offsetHeight, 100, "Height should have stayed as 100px"); 106 } 107 }, target.className); 108 } 109 </script>