Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(37)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/fast/events/touch/touch-action-range-input.html

Issue 2209773002: Remove the blocking touch handlers for the input[type=range] and add touch-action instead (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Add parseAttribute back to pass one more test Created 4 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | third_party/WebKit/Source/core/html/HTMLInputElement.h » ('j') | third_party/WebKit/Source/core/html/shadow/SliderThumbElement.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/fast/events/touch/touch-action-range-input.html
diff --git a/third_party/WebKit/LayoutTests/fast/events/touch/touch-action-range-input.html b/third_party/WebKit/LayoutTests/fast/events/touch/touch-action-range-input.html
new file mode 100644
index 0000000000000000000000000000000000000000..ca43885e4693a9c9106cf607d8a67543c2fc2365
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/events/touch/touch-action-range-input.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style type="text/css">
+ #box {
+ width: 100px;
+ height: 100px;
+ background: red;
+ padding: 0px;
+ margin: 0px;
+ }
+
+ td {
+ padding: 0px;
+ }
+</style>
+
+<table id="table1">
+ <tr><td><div id="box"></div></td></tr>
+</table>
+<div><input type="range" id="slider1" min = "0" max = "100" step = "10"></input></div>
+<div><input type="range" id="slider2" min = "0" max = "100" step = "10" style="touch-action:none;"></div>
+<div><input type="range" id="slider3" min = "0" max = "100" step = "10" style="-webkit-appearance: slider-vertical;"></div>
+<table id = "table2"><tbody /></table>
+
+<script>
tkent 2016/08/18 05:13:49 Indentation and coding style in this element look
+ function forceLayoutUpdate() {
+ document.body.offsetTop;
+ }
+
+ function buildPage()
+ {
+ var tbody1 = document.getElementById('table1').children[0];
+ var tbody2 = document.getElementById('table2').children[0];
+ var targetHeight = window.innerHeight;
+ var targetWidth = window.innerWidth;
+ var row = targetHeight / tbody1.offsetHeight;
+ var col = targetWidth / tbody1.offsetWidth * 2;
+
+ var i = 0;
+ var j = 0;
+ // Create some room at the top for scrolling.
+ var tr = document.createElement('tr');
+ for (j = 0; j < col; ++j) {
+ var td = document.createElement('td');
+ td.innerHTML = '<div id="box"></div>';
+ tr.appendChild(td);
+ }
+ tbody1.appendChild(tr);
+ // Take up enough space to overflow the page horizontally and vertically.
+ for (i = 0; i < row; ++i) {
+ var tr = document.createElement('tr');
+ for (j = 0; j < col; ++j) {
+ var td = document.createElement('td');
+ td.innerHTML = '<div id="box"></div>';
+ tr.appendChild(td);
+ }
+ tbody2.appendChild(tr);
+ }
+}
+
+forceLayoutUpdate();
+buildPage();
+forceLayoutUpdate();
+
+var slider1 = document.getElementById('slider1');
+var slider2 = document.getElementById('slider2');
+var slider3 = document.getElementById('slider3')
+var container1 = internals.shadowRoot(slider1).children[0];
+var container2 = internals.shadowRoot(slider2).children[0];
+var container3 = internals.shadowRoot(slider3).children[0];
+const touchSourceType = 1;
+
+var testSlider1 = async_test("Testing slider1, horizontal and touch-action=pan-y");
+testSlider1.step(function () {
+ var offsetX = window.pageXOffset;
+ var offsetY = window.pageYOffset;
+ var w = slider1.clientWidth;
+ var h = slider1.clientHeight;
+ var x = slider1.offsetLeft + w / 2 - offsetX;
+ var y = slider1.offsetTop + h / 2 - offsetY;
+ assert_equals(parseInt(slider1.value), 50);
+ // Perform an up-left drag on the thumb.
+ chrome.gpuBenchmarking.smoothDrag(x, y, slider1.offsetLeft - offsetX, y - 100,
+ function() {
+ // Should set slider1's value to 0.
+ assert_equals(parseInt(slider1.value), 0);
+ // Should drag the page upwards.
+ assert_approx_equals(window.pageYOffset, offsetY + 85, 10);
+ // Should not drag the page horizontally.
+ assert_approx_equals(window.pageXOffset, offsetX, 0);
+ testSlider2();
+ testSlider1.done();
+ }, touchSourceType);
+});
+
+function testSlider2() {
+var testSlider2 = async_test("Testing slider2, horizontal and touch-action=none");
+testSlider2.step(function () {
+ var offsetX = window.pageXOffset;
+ var offsetY = window.pageYOffset;
+ var w = slider2.clientWidth;
+ var h = slider2.clientHeight;
+ var x = slider2.offsetLeft + w / 2 - offsetX;
+ var y = slider2.offsetTop + h / 2 - offsetY;
+ // Perform an up-left drag on the thumb.
+ chrome.gpuBenchmarking.smoothDrag(x, y, slider2.offsetLeft - offsetX, y - 100,
+ function() {
+ // Should set slider2's value to 0.
+ assert_equals(parseInt(slider2.value), 0);
+ // Should not drag the page vertically.
+ assert_approx_equals(window.pageYOffset, offsetY, 10);
+ // Should not drag the page horizontally.
+ assert_approx_equals(window.pageXOffset, offsetX, 10);
+ testSlider3();
+ testSlider2.done();
+ }, touchSourceType);
+});
+}
+
+function testSlider3() {
+var testSlider3 = async_test("Testing slider3, vertical and touch-action=pan-x");
+testSlider3.step(function () {
+ var offsetX = window.pageXOffset;
+ var offsetY = window.pageYOffset;
+ var w = slider3.clientWidth;
+ var h = slider3.clientHeight;
+ var x = slider3.offsetLeft + w / 2 - offsetX;
+ var y = slider3.offsetTop + h / 2 - offsetY;
+ // Perform an up-left drag on the thumb.
+ chrome.gpuBenchmarking.smoothDrag(x, y, x - 100, slider2.offsetTop - scrollY,
+ function() {
+ // Should set slider3' value to 100.
+ assert_equals(parseInt(slider3.value), 100);
+ // Should not drag the page vertically.
+ assert_approx_equals(window.pageYOffset, offsetY, 10);
+ // Should drag the page leftwards.
+ assert_approx_equals(window.pageXOffset, offsetX + 85, 10);
+ testTouchAction();
+ testSlider3.done();
+ }, touchSourceType);
+});
+}
+
+function testTouchAction() {
+test(() => {
+ assert_equals(getComputedStyle(container1).touchAction, 'pan-y');
+ assert_equals(getComputedStyle(container2).touchAction, 'pan-y');
+ assert_equals(getComputedStyle(container3).touchAction, 'pan-x');
+ assert_equals(getComputedStyle(slider2).touchAction, 'none');
+
+ slider1.style="-webkit-appearance: slider-vertical;";
+ slider3.style="";
+ forceLayoutUpdate();
+ assert_equals(getComputedStyle(container1).touchAction, 'pan-x');
+ assert_equals(getComputedStyle(container3).touchAction, 'pan-y');
+}, "Tests that each <input range='type'> has the correct pan-x or pan-y touch-action inside its shadow element: container. This touch-action is under the user-specified touch-action, and will update with the -webkit-appearance.");
+}
+
+</script>
« no previous file with comments | « no previous file | third_party/WebKit/Source/core/html/HTMLInputElement.h » ('j') | third_party/WebKit/Source/core/html/shadow/SliderThumbElement.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698