Home Explore Help
Sign In
khronosschoty
/
palemoon-dev
Watch 2
Star 1
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: ac60e7ecec
Branches Tags
palemoon-dev
/
platform
/
dom
/
events
/
test
/
pointerevents
/
pointerevent_touch-action-inherit_highest-parent-none_touch-manual.html

pointerevent_touch-action-inherit_highest-parent-none_touch-manual.html 6.0 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 
  1. <!doctype html>
    2. 

  2. <html>
    3. 

  3.     <head>
    4. 

  4.         <title>touch-action: parent: none + two embedded children</title>
    5. 

  5.         <meta name="viewport" content="width=device-width">
    6. 

  6.         <link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
    7. 

  7.         <script src="/resources/testharness.js"></script>
    8. 

  8.         <script src="/resources/testharnessreport.js"></script>
    9. 

  9.         <script src="pointerevent_support.js"></script>
    10. 

  10.         <style>
    11. 

  11.             #divParent {
    12. 

  12.             touch-action: none;
    13. 

  13.             }
    14. 

  14.         </style>
    15. 

  15.     </head>
    16. 

  16.     <body onload="run()">
    17. 

  17.         <h1>Pointer Events touch-action attribute support</h1>
    18. 

  18.         <h4 id="desc">Test Description: Try to scroll text DOWN. Wait for description update. Expected: pan enabled</h4>
    19. 

  19.         <p>Note: this test is for touch-devices only</p>
    20. 

  20.         <div id="divParent">
    21. 

  21.             <div class="scroller" id="target0">
    22. 

  22.                 <div>
    23. 

  23.                     <p>
    24. 

  24.                         Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
    25. 

  25.                         nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
    26. 

  26.                         Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
    27. 

  27.                         lobortis nisl ut aliquip ex ea commodo consequat.
    28. 

  28.                     </p>
    29. 

  29.                     <p>Lorem ipsum dolor sit amet...</p>
    30. 

  30.                     <p>Lorem ipsum dolor sit amet...</p>
    31. 

  31.                     <p>Lorem ipsum dolor sit amet...</p>
    32. 

  32.                     <p>Lorem ipsum dolor sit amet...</p>
    33. 

  33.                     <p>Lorem ipsum dolor sit amet...</p>
    34. 

  34.                     <p>Lorem ipsum dolor sit amet...</p>
    35. 

  35.                     <p>Lorem ipsum dolor sit amet...</p>
    36. 

  36.                     <p>
    37. 

  37.                         Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
    38. 

  38.                         nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
    39. 

  39.                         Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
    40. 

  40.                         lobortis nisl ut aliquip ex ea commodo consequat.
    41. 

  41.                     </p>
    42. 

  42.                     <p>Lorem ipsum dolor sit amet...</p>
    43. 

  43.                     <p>Lorem ipsum dolor sit amet...</p>
    44. 

  44.                     <p>Lorem ipsum dolor sit amet...</p>
    45. 

  45.                     <p>Lorem ipsum dolor sit amet...</p>
    46. 

  46.                     <p>Lorem ipsum dolor sit amet...</p>
    47. 

  47.                     <p>Lorem ipsum dolor sit amet...</p>
    48. 

  48.                     <p>Lorem ipsum dolor sit amet...</p>
    49. 

  49.                     <p>
    50. 

  50.                         Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
    51. 

  51.                         nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
    52. 

  52.                         Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
    53. 

  53.                         lobortis nisl ut aliquip ex ea commodo consequat.
    54. 

  54.                     </p>
    55. 

  55.                     <p>Lorem ipsum dolor sit amet...</p>
    56. 

  56.                     <p>Lorem ipsum dolor sit amet...</p>
    57. 

  57.                     <p>Lorem ipsum dolor sit amet...</p>
    58. 

  58.                     <p>Lorem ipsum dolor sit amet...</p>
    59. 

  59.                     <p>Lorem ipsum dolor sit amet...</p>
    60. 

  60.                     <p>Lorem ipsum dolor sit amet...</p>
    61. 

  61.                     <p>Lorem ipsum dolor sit amet...</p>
    62. 

  62.                     <p>
    63. 

  63.                         Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
    64. 

  64.                         nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
    65. 

  65.                         Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
    66. 

  66.                         lobortis nisl ut aliquip ex ea commodo consequat.
    67. 

  67.                     </p>
    68. 

  68.                     <p>Lorem ipsum dolor sit amet...</p>
    69. 

  69.                     <p>Lorem ipsum dolor sit amet...</p>
    70. 

  70.                     <p>Lorem ipsum dolor sit amet...</p>
    71. 

  71.                     <p>Lorem ipsum dolor sit amet...</p>
    72. 

  72.                     <p>Lorem ipsum dolor sit amet...</p>
    73. 

  73.                     <p>Lorem ipsum dolor sit amet...</p>
    74. 

  74.                     <p>Lorem ipsum dolor sit amet...</p>
    75. 

  75.                 </div>
    76. 

  76.             </div>
    77. 

  77.         </div>
    78. 

  78.         <script type='text/javascript'>
    79. 

  79.             var detected_pointertypes = {};
    80. 

  80. 

  81.             var xScrollIsReceived = false;
    82. 

  82.             var yScrollIsReceived = false;
    83. 

  83.             var xScr0, yScr0, xScr1, yScr1;
    84. 

  84. 

  85.             add_completion_callback(showPointerTypes);
    86. 

  86.             add_completion_callback(enableScrolling);
    87. 

  87. 

  88.             function run() {
    89. 

  89.                 var target0 = document.getElementById("target0");
    90. 

  90. 

  91.                 var test_touchaction = async_test("touch-action attribute test");
    92. 

  92. 

  93.                 xScr0 = target0.scrollLeft;
    94. 

  94.                 yScr0 = target0.scrollTop;
    95. 

  95. 

  96.                 on_event(target0, 'pointerdown', function(event) {
    97. 

  97.                     detected_pointertypes[event.pointerType] = true;
    98. 

  98.                 });
    99. 

  99. 

  100.                 // Check if touch-action attribute works properly for embedded divs
    101. 

  101.                 //
    102. 

  102.                 // TA: 15.
    103. 

  103.                 on_event(target0, 'scroll', function(event) {
    104. 

  104.                     xScr1 = target0.scrollLeft;
    105. 

  105.                     yScr1 = target0.scrollTop;
    106. 

  106. 

  107.                     if(xScr1 != xScr0) {
    108. 

  108.                         xScrollIsReceived = true;
    109. 

  109.                     }
    110. 

  110. 

  111.                     if(yScr1 != yScr0) {
    112. 

  112.                         yScrollIsReceived = true;
    113. 

  113.                         updateDescriptionNextStep();
    114. 

  114.                     }
    115. 

  115. 

  116.                     if(xScrollIsReceived && yScrollIsReceived) {
    117. 

  117.                         test_touchaction.done();
    118. 

  118.                         updateDescriptionComplete();
    119. 

  119.                     }
    120. 

  120.                 });
    121. 

  121.             }
    122. 

  122. 

  123.             function enableScrolling() {
    124. 

  124.                 document.getElementById('divParent').setAttribute('style', 'touch-action: auto');
    125. 

  125.             }
    126. 

  126.         </script>
    127. 

  127.         <h1>behaviour: auto</h1>
    128. 

  128.         <div id="complete-notice">
    129. 

  129.             <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
    130. 

  130.         </div>
    131. 

  131.         <div id="log"></div>
    132. 

  132.     </body>
    133. 

  133. </html>
    134.