src/third_party/WebKit/LayoutTests/fast/css/resize-corner-tracking-touch.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
   2 <html>
   3 <head>
   4     <title></title>
   5     <script src="../../resources/js-test.js"></script>
   6     <script type="text/javascript">
   7         function doScroll(x, y, deltaX, deltaY) {
   8             eventSender.gestureScrollBegin(x, y);
   9             eventSender.gestureScrollUpdate(deltaX, deltaY);
  10             eventSender.gestureScrollEnd(0, 0);
  11         }
  12
  13         function doResize(t, offsetX, offsetY, deltaX, deltaY, expectResize)
  14         {
  15             target = t;
  16             rect = target.getBoundingClientRect();
  17             old_width = target.offsetWidth;
  18             old_height = target.offsetHeight;
  19             doScroll(rect.right + offsetX, rect.bottom + offsetY, deltaX, deltaY);
  20             deltaXExpected = 0;
  21             deltaYExpected = 0;
  22             if (expectResize == "resize") {
  23                 deltaXExpected = deltaX;
  24                 deltaYExpected = deltaY;
  25             }
  26
  27             shouldBe("target.offsetWidth - old_width", "deltaXExpected");
  28             shouldBe("target.offsetHeight - old_height", "deltaYExpected");
  29         }
  30
  31         function resize(id, offsetX, offsetY, deltaX, deltaY, expectedDeltaX, expectedDeltaY)
  32         {
  33             debug("\nResize " + id + " at offset (" + offsetX + "," + offsetY + ")");
  34             var target = document.getElementById(id);
  35             doResize(target, offsetX, offsetY, deltaX, deltaY, expectedDeltaX, expectedDeltaY);
  36         }
  37
  38         function resizeInIframe(id, iframe_id, offsetX, offsetY, deltaX, deltaY, expectedDeltaX, expectedDeltaY)
  39         {
  40             debug("\nResize " + id + "in iframe " + iframe_id + " at offset (" + offsetX + "," + offsetY + ")");
  41             var iframe = document.getElementById(iframe_id);
  42             var rect = iframe.getBoundingClientRect();
  43             doResize(iframe.contentDocument.getElementById(id),
  44                      offsetX + rect.left, offsetY + rect.top,
  45                      deltaX, deltaY, expectedDeltaX, expectedDeltaY);
  46         }
  47
  48         function test()
  49         {
  50             if (!window.testRunner)
  51                 return;
  52
  53             // Scroll the page first to test that resize works with scrolled page.
  54             document.documentElement.scrollTop = 50;
  55
  56             // 1. Touch scrolling starting at outside of the object, e.g. offset (6, 7)
  57             //    to bottom right corner of the object, won't do the resize.
  58             // 2. Touch scrolling starting at inside the object, and within the normal
  59             //    resizer area (15x15), e.g. offset (-6, -7) to bottom right corner of
  60             //    the object, will do the resize.
  61             // 3. Touch scrolling starting at inside the object, and only a little bit
  62             //    off the resizer area, e.g. offset (-20, -20) to bottom right corner of
  63             //    the object, will do the resize.
  64
  65             resize("div", -6, -7, 20, 10, "resize");
  66             resize("div", 6, 7, 20, 10, "noresize");
  67             resize("textarea1", -20, -20, 20, 10, "resize");
  68
  69             // Scroll the page again
  70             document.documentElement.scrollTop += 100;
  71
  72             resize("iframe1", -6, -7, 20, 10, "resize");
  73             resize("iframe1", -20, -20, 20, 10, "resize");
  74             resizeInIframe("textarea2", "iframe1", -6, -7, 20, 20, "resize");
  75         }
  76     </script>
  77 <style>
  78 div {
  79         overflow: auto;
  80         resize: both;
  81         border: blue 2px solid;
  82 }
  83
  84 textarea {
  85         resize: both;
  86 }
  87
  88 iframe {
  89         border: blue 2px solid;
  90 }
  91 </style>
  92 </head>
  93 <body onload="test()">
  94     <hr>
  95     <p>
  96         Test for
  97         <i><a href="https://code.google.com/p/chromium/issues/detail?id=150601">https://code.google.com/p/chromium/issues/detail?id=150601</a>
  98         Can't resize a textarea with touch</i>.
  99     </p>
 100     <hr>
 101     <div id="placeholder" style="width: 150px; height: 150px;">a placeholder so that we have enough elements to scroll the page</div>
 102     <div id="div" style="width: 150px; height: 100px;;"></div>
 103     <textarea id="textarea1" style="width: 150px; height: 100px;"></textarea>
 104     <br>
 105     <iframe id="iframe1" src="resources/resize-corner-tracking-touch-iframe.html" style="resize:both; width: 200px; height: 200px"></iframe>
 106     <pre id="console"></pre>
 107 </body>