test_textarea_resize.html (4057B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Test for Bug 477700</title> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <script src="/tests/SimpleTest/EventUtils.js"></script> 7 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 8 </head> 9 <body> 10 <div id="content" style="display: none"> 11 </div> 12 13 <textarea id="textarea" style="-moz-appearance: none; border: 2px solid black; padding: 3px; box-sizing: border-box; min-width: 15px; min-height: 15px;">Text</textarea> 14 15 <pre id="test"> 16 <script type="application/javascript"> 17 18 /** Test for textbox resizing */ 19 SimpleTest.waitForExplicitFinish(); 20 addLoadEvent(() => SimpleTest.executeSoon(doTheTest)); 21 22 // -1 means use the default value which is 'both', then test explicitly 23 // setting each possible value. 24 var currentResize = -1; 25 var currentBoxSizing = 0; 26 var currentPointer = 0; 27 var resizeTypes = [ "horizontal", "vertical", "none", "inherit", "both" ]; 28 var boxSizingTypes = [ "", "border-box" ]; 29 var pointerTypes = [ synthesizeMouse, synthesizeTouch] 30 31 function doTheTest() { 32 runTest(pointerTypes[currentPointer]); 33 } 34 35 function runTest(aPointerFunc) { 36 var boxSizingText = " with box sizing " + (currentBoxSizing ? boxSizingTypes[currentBoxSizing] : "content-box"); 37 38 var textarea = $("textarea"); 39 var rect = textarea.getBoundingClientRect(); 40 var touch = aPointerFunc.name.match(/Touch/); 41 // -1 means use the default value of resize, i.e. "both" 42 var type = (currentResize == -1) ? "both" : resizeTypes[currentResize]; 43 // assume that the resizer is in the lower right corner 44 45 aPointerFunc(textarea, rect.width - 10, rect.height - 10, { type: touch ? "touchstart" : "mousedown" }); 46 aPointerFunc(textarea, rect.width + 40, rect.height + 40, { type: touch ? "touchmove" : "mousemove" }); 47 48 var newrect = textarea.getBoundingClientRect(); 49 var hchange = (type == "both" || type == "horizontal"); 50 var vchange = (type == "both" || type == "vertical"); 51 52 is(Math.round(newrect.width), Math.round(rect.width + (hchange ? 50 : 0)), 53 type + " width has increased" + boxSizingText + " using " + aPointerFunc.name); 54 is(Math.round(newrect.height), Math.round(rect.height + (vchange ? 50 : 0)), 55 type + " height has increased" + boxSizingText + " using " + aPointerFunc.name); 56 57 aPointerFunc(textarea, rect.width - 20, rect.height - 20, { type: touch ? "touchmove" : "mousemove" }); 58 59 newrect = textarea.getBoundingClientRect(); 60 61 is(Math.round(newrect.width), Math.round(rect.width - (hchange ? 10 : 0)), 62 type + " width has decreased" + boxSizingText + " using " + aPointerFunc.name); 63 is(Math.round(newrect.height), Math.round(rect.height - (vchange ? 10 : 0)), 64 type + " height has decreased" + boxSizingText + " using " + aPointerFunc.name); 65 66 aPointerFunc(textarea, rect.width - 220, rect.height - 220, { type: touch ? "touchmove" : "mousemove" }); 67 68 newrect = textarea.getBoundingClientRect(); 69 ok(hchange ? newrect.width >= 15 : Math.round(newrect.width) == Math.round(rect.width), 70 type + " width decreased below minimum" + boxSizingText + " using " + newrect.width); 71 ok(vchange ? newrect.height >= 15 : Math.round(newrect.height) == Math.round(rect.height), 72 type + " height decreased below minimum" + boxSizingText + " using " + aPointerFunc.name); 73 74 aPointerFunc(textarea, rect.width - 8, rect.height - 8, { type: touch ? "touchend" : "mouseup" }); 75 76 textarea.style.width = "auto"; 77 textarea.style.height = "auto"; 78 79 if (currentBoxSizing++ <= boxSizingTypes.length) { 80 textarea.style.MozBoxSizing = boxSizingTypes[currentBoxSizing]; 81 SimpleTest.executeSoon(doTheTest); 82 } else { 83 currentBoxSizing = 0; 84 if (++currentResize < resizeTypes.length) { 85 textarea.style.resize = resizeTypes[currentResize]; 86 SimpleTest.executeSoon(doTheTest); 87 } else { 88 currentResize = -1; 89 textarea.style.resize = ""; 90 if (++currentPointer < pointerTypes.length) { 91 SimpleTest.executeSoon(doTheTest); 92 } else { 93 SimpleTest.finish(); 94 } 95 } 96 } 97 } 98 99 </script> 100 </pre> 101 </body> 102 </html>