| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
| <html> |
| <head> |
| <title></title> |
| <script src="../../resources/js-test.js"></script> |
| <script type="text/javascript"> |
| function doScroll(x, y, deltaX, deltaY) { |
| eventSender.gestureScrollBegin(x, y); |
| eventSender.gestureScrollUpdate(deltaX, deltaY); |
| eventSender.gestureScrollEnd(0, 0); |
| } |
| |
| function doResize(t, offsetX, offsetY, deltaX, deltaY, expectResize) |
| { |
| target = t; |
| rect = target.getBoundingClientRect(); |
| old_width = target.offsetWidth; |
| old_height = target.offsetHeight; |
| doScroll(rect.right + offsetX, rect.bottom + offsetY, deltaX, deltaY); |
| deltaXExpected = 0; |
| deltaYExpected = 0; |
| if (expectResize == "resize") { |
| deltaXExpected = deltaX; |
| deltaYExpected = deltaY; |
| } |
| |
| shouldBe("target.offsetWidth - old_width", "deltaXExpected"); |
| shouldBe("target.offsetHeight - old_height", "deltaYExpected"); |
| } |
| |
| function resize(id, offsetX, offsetY, deltaX, deltaY, expectedDeltaX, expectedDeltaY) |
| { |
| debug("\nResize " + id + " at offset (" + offsetX + "," + offsetY + ")"); |
| var target = document.getElementById(id); |
| doResize(target, offsetX, offsetY, deltaX, deltaY, expectedDeltaX, expectedDeltaY); |
| } |
| |
| function resizeInIframe(id, iframe_id, offsetX, offsetY, deltaX, deltaY, expectedDeltaX, expectedDeltaY) |
| { |
| debug("\nResize " + id + "in iframe " + iframe_id + " at offset (" + offsetX + "," + offsetY + ")"); |
| var iframe = document.getElementById(iframe_id); |
| var rect = iframe.getBoundingClientRect(); |
| doResize(iframe.contentDocument.getElementById(id), |
| offsetX + rect.left, offsetY + rect.top, |
| deltaX, deltaY, expectedDeltaX, expectedDeltaY); |
| } |
| |
| function test() |
| { |
| if (!window.testRunner) |
| return; |
| |
| // Scroll the page first to test that resize works with scrolled page. |
| document.scrollingElement.scrollTop = 50; |
| |
| // 1. Touch scrolling starting at outside of the object, e.g. offset (6, 7) |
| // to bottom right corner of the object, won't do the resize. |
| // 2. Touch scrolling starting at inside the object, and within the normal |
| // resizer area (15x15), e.g. offset (-6, -7) to bottom right corner of |
| // the object, will do the resize. |
| // 3. Touch scrolling starting at inside the object, and only a little bit |
| // off the resizer area, e.g. offset (-20, -20) to bottom right corner of |
| // the object, will do the resize. |
| |
| resize("div", -6, -7, 20, 10, "resize"); |
| resize("div", 6, 7, 20, 10, "noresize"); |
| resize("textarea1", -20, -20, 20, 10, "resize"); |
| |
| // Scroll the page again |
| document.scrollingElement.scrollTop += 100; |
| |
| resize("iframe1", -6, -7, 20, 10, "resize"); |
| resize("iframe1", -20, -20, 20, 10, "resize"); |
| resizeInIframe("textarea2", "iframe1", -6, -7, 20, 20, "resize"); |
| } |
| </script> |
| <style> |
| div { |
| overflow: auto; |
| resize: both; |
| border: blue 2px solid; |
| } |
| |
| textarea { |
| resize: both; |
| } |
| |
| iframe { |
| border: blue 2px solid; |
| } |
| </style> |
| </head> |
| <body onload="test()"> |
| <hr> |
| <p> |
| Test for |
| <i><a href="https://code.google.com/p/chromium/issues/detail?id=150601">https://code.google.com/p/chromium/issues/detail?id=150601</a> |
| Can't resize a textarea with touch</i>. |
| </p> |
| <hr> |
| <div id="placeholder" style="width: 150px; height: 150px;">a placeholder so that we have enough elements to scroll the page</div> |
| <div id="div" style="width: 150px; height: 100px;;"></div> |
| <textarea id="textarea1" style="width: 150px; height: 100px;"></textarea> |
| <br> |
| <iframe id="iframe1" src="resources/resize-corner-tracking-touch-iframe.html" style="resize:both; width: 200px; height: 200px"></iframe> |
| <pre id="console"></pre> |
| </body> |
