src/third_party/WebKit/LayoutTests/fast/forms/textarea-resize-below-min-size-set.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../resources/js-test.js"></script>
   5 </head>
   6 <body>
   7 <pre id="console"></pre>
   8 <div style="width:800px; height:800px">
   9 <textarea id="textInputID">
  10 Some text
  11 </textarea>
  12 </div>
  13 <script>
  14 description("<b>Test for resizing the Textarea below the minimum size set.</b>");
  15 updateSize();
  16
  17 function log(msg)
  18 {
  19     document.getElementById('console').appendChild(document.createTextNode(msg + '\n'));
  20 }
  21
  22 function updateSize()
  23 {
  24     if (window.testRunner) {
  25         var textAreaElement = document.getElementById("textInputID");
  26
  27         textAreaElement.style.width = "400px";
  28         textAreaElement.style.height = "400px";
  29         textAreaElement.style.minWidth="200px";
  30         textAreaElement.style.minHeight="200px";
  31         testDragAndMove("fixed");
  32
  33         textAreaElement.style.width = "400px";
  34         textAreaElement.style.height = "400px";
  35         textAreaElement.style.minWidth="15vw";
  36         textAreaElement.style.minHeight="15vh";
  37         testDragAndMove("relative-viewport");
  38
  39         textAreaElement.style.width = "400px";
  40         textAreaElement.style.height = "400px";
  41         textAreaElement.style.minWidth="10%";
  42         textAreaElement.style.minHeight="10%";
  43         testDragAndMove("percentage");
  44
  45     } else
  46         log("\n\nThis test needs window.testRunner and window.eventSender to work. To manually test it, drag the textarea below. \nFor test to pass the width and height of textarea should not go below min-width and min-height\n\n");
  47 }
  48
  49 function testDragAndMove(type)
  50 {
  51     var startX = document.getElementById("textInputID").offsetLeft + 400;
  52     var startY = document.getElementById("textInputID").offsetTop + 400;
  53
  54     eventSender.dragMode = false;
  55     eventSender.mouseMoveTo(startX,startY);
  56     eventSender.mouseDown();
  57     // Then drag it.
  58     eventSender.mouseMoveTo(startX - 350, startY - 350);
  59     eventSender.mouseUp();
  60
  61     // The min-width/min-height includes padding and border and width/height does not include padding and border.
  62     // So when we set say min-width = 200px it means actual minimum width of box to be 194px (as 2px paddding and 1px border on all side).
  63     // Hence the condition check here for values which are lesser than original value by 6px.
  64     if (type == "fixed") {
  65         shouldBeEqualToString('document.getElementById("textInputID").style.width', '194px');
  66         shouldBeEqualToString('document.getElementById("textInputID").style.height;', '194px');
  67     } else if (type == "relative-viewport") {
  68         shouldBeEqualToString('document.getElementById("textInputID").style.width', '114px');
  69         shouldBeEqualToString('document.getElementById("textInputID").style.height;', '84px');
  70     } else {
  71         shouldBeEqualToString('document.getElementById("textInputID").style.width', '74px');
  72         shouldBeEqualToString('document.getElementById("textInputID").style.height;', '74px');
  73     }
  74
  75 }
  76 </script>
  77 </body>
  78 </html>