| OLD | NEW |
|---|
| (Empty) | |
| 1 <!doctype html> |
| 2 <html> |
| 3 <head> |
| 4 <title>Change touch-action on pointerdown</title> |
| 5 <meta name="viewport" content="width=device-width"> |
| 6 <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> |
| 7 <script src="/resources/testharness.js"></script> |
| 8 <script src="/resources/testharnessreport.js"></script> |
| 9 <script src="pointerevent_support.js"></script> |
| 10 <style> |
| 11 #target0 { |
| 12 background: black; |
| 13 width: 700px; |
| 14 height: 430px; |
| 15 color: white; |
| 16 overflow-y: auto; |
| 17 overflow-x: auto; |
| 18 white-space: nowrap; |
| 19 } |
| 20 </style> |
| 21 </head> |
| 22 <body onload="run()"> |
| 23 <h1>Pointer Events touch-action attribute support</h1> |
| 24 <h4>Test Description: Press and hold your touch. Try to scroll text in a
ny direction. |
| 25 Then release your touch and try to scroll again. Expected: no pannin
g. |
| 26 </h4> |
| 27 <p>Note: this test is for touch-devices only</p> |
| 28 <div id="target0" style="touch-action: auto;"> |
| 29 <p> |
| 30 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed di
em |
| 31 nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam e
rat volutpat. |
| 32 Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamc
orper suscipit |
| 33 lobortis nisl ut aliquip ex ea commodo consequat. |
| 34 </p> |
| 35 <p>Lorem ipsum dolor sit amet...</p> |
| 36 <p>Lorem ipsum dolor sit amet...</p> |
| 37 <p>Lorem ipsum dolor sit amet...</p> |
| 38 <p>Lorem ipsum dolor sit amet...</p> |
| 39 <p>Lorem ipsum dolor sit amet...</p> |
| 40 <p>Lorem ipsum dolor sit amet...</p> |
| 41 <p>Lorem ipsum dolor sit amet...</p> |
| 42 <p> |
| 43 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed di
em |
| 44 nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam e
rat volutpat. |
| 45 Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamc
orper suscipit |
| 46 lobortis nisl ut aliquip ex ea commodo consequat. |
| 47 </p> |
| 48 <p>Lorem ipsum dolor sit amet...</p> |
| 49 <p>Lorem ipsum dolor sit amet...</p> |
| 50 <p>Lorem ipsum dolor sit amet...</p> |
| 51 <p>Lorem ipsum dolor sit amet...</p> |
| 52 <p>Lorem ipsum dolor sit amet...</p> |
| 53 <p>Lorem ipsum dolor sit amet...</p> |
| 54 <p>Lorem ipsum dolor sit amet...</p> |
| 55 <p> |
| 56 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed di
em |
| 57 nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam e
rat volutpat. |
| 58 Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamc
orper suscipit |
| 59 lobortis nisl ut aliquip ex ea commodo consequat. |
| 60 </p> |
| 61 <p>Lorem ipsum dolor sit amet...</p> |
| 62 <p>Lorem ipsum dolor sit amet...</p> |
| 63 <p>Lorem ipsum dolor sit amet...</p> |
| 64 <p>Lorem ipsum dolor sit amet...</p> |
| 65 <p>Lorem ipsum dolor sit amet...</p> |
| 66 <p>Lorem ipsum dolor sit amet...</p> |
| 67 <p>Lorem ipsum dolor sit amet...</p> |
| 68 <p> |
| 69 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed di
em |
| 70 nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam e
rat volutpat. |
| 71 Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamc
orper suscipit |
| 72 lobortis nisl ut aliquip ex ea commodo consequat. |
| 73 </p> |
| 74 <p>Lorem ipsum dolor sit amet...</p> |
| 75 <p>Lorem ipsum dolor sit amet...</p> |
| 76 <p>Lorem ipsum dolor sit amet...</p> |
| 77 <p>Lorem ipsum dolor sit amet...</p> |
| 78 <p>Lorem ipsum dolor sit amet...</p> |
| 79 <p>Lorem ipsum dolor sit amet...</p> |
| 80 <p>Lorem ipsum dolor sit amet...</p> |
| 81 </div> |
| 82 <script type='text/javascript'> |
| 83 var detected_pointertypes = {}; |
| 84 |
| 85 var styleIsChanged = false; |
| 86 var scrollIsReceived = false; |
| 87 var firstTouchCompleted = false; |
| 88 var countToPass = 50; |
| 89 var xScr0, yScr0, xScr1, yScr1; |
| 90 |
| 91 setup({ explicit_done: true }); |
| 92 add_completion_callback(showPointerTypes); |
| 93 |
| 94 function run() { |
| 95 var target0 = document.getElementById("target0"); |
| 96 |
| 97 on_event(target0, 'scroll', function(event) { |
| 98 if(!scrollIsReceived && firstTouchCompleted) { |
| 99 test(function() { |
| 100 failOnScroll(); |
| 101 }, "scroll was received while shouldn't"); |
| 102 scrollIsReceived = true; |
| 103 } |
| 104 done(); |
| 105 }); |
| 106 |
| 107 on_event(target0, 'pointerdown', function(event) { |
| 108 detected_pointertypes[event.pointerType] = true; |
| 109 if(!styleIsChanged) { |
| 110 var before = document.getElementById('target0').style.to
uchAction; |
| 111 |
| 112 document.getElementById('target0').style.touchAction = '
none'; |
| 113 |
| 114 var after = document.getElementById('target0').style.tou
chAction; |
| 115 |
| 116 test(function() { |
| 117 assert_true(before != after, "touch-action was chang
ed"); |
| 118 }, "touch-action was changed"); |
| 119 |
| 120 styleIsChanged = true; |
| 121 } |
| 122 }); |
| 123 |
| 124 on_event(target0, 'pointerup', function(event) { |
| 125 firstTouchCompleted = true; |
| 126 }); |
| 127 } |
| 128 </script> |
| 129 <h1>touch-action: auto to none</h1> |
| 130 <div id="complete-notice"> |
| 131 <p>The following pointer types were detected: <span id="pointertype-
log"></span>.</p> |
| 132 </div> |
| 133 <div id="log"></div> |
| 134 </body> |
| 135 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2020083002:
Import wpt@1b61dad2be6c5100beb565e91c58b8c1084b3c7d (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master