third_party/WebKit/LayoutTests/fast/events/touch/script-tests/touch-slider.js

   1 var div = document.createElement("div");
   2 div.style.width = "200%";
   3 var slider1 = document.createElement("input");
   4 slider1.id = "slider1";
   5 slider1.setAttribute("type", "range");
   6 slider1.style.width = "200px";
   7 slider1.style.height = "30px";
   8 var slider2 = document.createElement("input");
   9 slider2.id = "slider2";
  10 slider2.setAttribute("type", "range");
  11 slider2.style.width = "30px";
  12 slider2.style.height = "200px";
  13 slider2.style.setProperty("-webkit-appearance", "slider-vertical");
  14 var slider3 = document.createElement("input");
  15 slider3.id = "slider3";
  16 slider3.setAttribute("type", "range");
  17 slider3.style.width = "200px";
  18 slider3.style.height = "30px";
  19 slider3.style.setProperty("-webkit-transform", "rotate(-90deg)");
  20 slider3.style.setProperty("margin", "120px 0");
  21
  22 document.body.insertBefore(div, document.getElementById('console'));
  23 div.appendChild(slider1);
  24 div.appendChild(slider2);
  25 div.appendChild(slider3);
  26
  27 var onTouchStart = (function() {
  28
  29     var slider = [slider1, slider2, slider3];
  30     var nCheck = 0;
  31
  32     return function() {
  33         shouldBeEqualToString("event.touches[0].target.id", slider[nCheck++].id);
  34         checkPosition();
  35     }
  36
  37 })();
  38
  39 function onTouchMove() {
  40     checkPosition();
  41 }
  42
  43 function onTouchEnd() {
  44     checkPosition();
  45 }
  46
  47 function onKeyDown() {
  48     isSuccessfullyParsed();
  49     testRunner.notifyDone();
  50 }
  51
  52 var sliderValue = 0;
  53
  54 var checkPosition = (function() {
  55
  56     var nCheck = 0;
  57     var slider = [slider1, slider2, slider3];
  58     var expectedPositions = [50, 50, 0, 100, 50];
  59     var sliderIndex = 0;
  60
  61     return function() {
  62         sliderValue = slider[sliderIndex].value;
  63         shouldBeEqualToString("sliderValue", String(expectedPositions[nCheck++]));
  64         if (nCheck % expectedPositions.length == 0) {
  65             sliderIndex++;
  66             nCheck = 0;
  67         }
  68     };
  69
  70 })();
  71
  72 function runTest(slider, rotated) {
  73
  74     var w = slider.clientWidth;
  75     var h = slider.clientHeight;
  76     var x = slider.offsetLeft + w/2;
  77     var y = slider.offsetTop + h/2;
  78
  79     if (rotated) {
  80       w = slider.clientHeight;
  81       h = slider.clientWidth;
  82     }
  83
  84     eventSender.clearTouchPoints();
  85     eventSender.addTouchPoint(x, y);
  86     eventSender.touchStart();
  87
  88     eventSender.updateTouchPoint(0, x - w/2, y + h/2);
  89     eventSender.touchMove();
  90
  91     eventSender.updateTouchPoint(0, x + w/2, y - h/2);
  92     eventSender.touchMove();
  93
  94     eventSender.updateTouchPoint(0, x, y);
  95     eventSender.touchMove();
  96
  97     eventSender.releaseTouchPoint(0);
  98     eventSender.touchEnd();
  99 }
 100
 101 document.addEventListener("touchstart", onTouchStart, false);
 102 document.addEventListener("touchmove", onTouchMove, false);
 103 document.addEventListener("touchend", onTouchEnd, false);
 104 document.addEventListener("keydown", onKeyDown, false);
 105
 106 description("Tests that the touch events originating on an input element with type=range update the slider position. This test is only expected to pass if ENABLE_TOUCH_SLIDER is defined.");
 107
 108 if (window.testRunner) {
 109     testRunner.waitUntilDone();
 110 }
 111
 112 if (window.eventSender) {
 113     runTest(slider1, false);
 114     runTest(slider2, false);
 115     runTest(slider3, true);
 116
 117     eventSender.keyDown(' ');
 118 } else {
 119     debug('This test requires DRT.');
 120 }