pointerevent_touch-action-none-on-body-when-style-propagates-to-viewport_touch.html (3521B)
1 <!DOCTYPE html> 2 <html> 3 <title>Touch Action None on body when style propagates from body to viewport</title> 4 <head> 5 <style> 6 html { 7 touch-action: none; 8 } 9 body { 10 overflow: auto; 11 } 12 </style> 13 <link rel="help" href="crbug.com/1031745"> 14 <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-propagation"> 15 <link rel="help" href="https://w3c.github.io/pointerevents/#determining-supported-touch-behavior"> 16 <script src="/resources/testharness.js"></script> 17 <script src="/resources/testharnessreport.js"></script> 18 <script src="/resources/testdriver.js"></script> 19 <script src="/resources/testdriver-actions.js"></script> 20 <script src="/resources/testdriver-vendor.js"></script> 21 <script src="pointerevent_support.js"></script> 22 </head> 23 <body onload="onLoad()"> 24 <h2>Pointer Events touch-action none on body when style propagates from body to viewport</h2> 25 <h4>Test Description: Try to touch scroll. You shouldn't be able to.</h4> 26 <p>Note: this test is for touch only</p> 27 Body with touch-action=none. 28 <p>Paragraph with touch-action=none</p> 29 <p>Paragraph with touch-action=none</p> 30 <p>Paragraph with touch-action=none</p> 31 <p>Paragraph with touch-action=none</p> 32 <p>Paragraph with touch-action=none</p> 33 <p>Paragraph with touch-action=none</p> 34 <p>Paragraph with touch-action=none</p> 35 <p>Paragraph with touch-action=none</p> 36 <p>Paragraph with touch-action=none</p> 37 <p>Paragraph with touch-action=none</p> 38 <p>Paragraph with touch-action=none</p> 39 <p>Paragraph with touch-action=none</p> 40 <p>Paragraph with touch-action=none</p> 41 <p>Paragraph with touch-action=none</p> 42 <p>Paragraph with touch-action=none</p> 43 <p>Paragraph with touch-action=none</p> 44 <p>Paragraph with touch-action=none</p> 45 <p>Paragraph with touch-action=none</p> 46 <p>Paragraph with touch-action=none</p> 47 <p>Paragraph with touch-action=none</p> 48 <p>Paragraph with touch-action=none</p> 49 <p>Paragraph with touch-action=none</p> 50 <p>Paragraph with touch-action=none</p> 51 <p>Paragraph with touch-action=none</p> 52 <p>Paragraph with touch-action=none</p> 53 <p>Paragraph with touch-action=none</p> 54 <p>Paragraph with touch-action=none</p> 55 <p>Paragraph with touch-action=none</p> 56 <p>Paragraph with touch-action=none</p> 57 <p>Paragraph with touch-action=none</p> 58 <p>Paragraph with touch-action=none</p> 59 <p>Paragraph with touch-action=none</p> 60 <p>Paragraph with touch-action=none</p> 61 <p>Paragraph with touch-action=none</p> 62 <p>Paragraph with touch-action=none</p> 63 <p>Paragraph with touch-action=none</p> 64 <p>Paragraph with touch-action=none</p> 65 <p>Paragraph with touch-action=none</p> 66 <p>Paragraph with touch-action=none</p> 67 <script> 68 function onLoad(){ 69 var body = document.body; 70 71 if(!window.promise_test) 72 return; 73 74 promise_test(function(t){ 75 return new Promise(async function(resolve,reject){ 76 await touchScrollInTarget(body, 'down'); 77 await touchScrollInTarget(body, 'right'); 78 t.step(function(){ 79 assert_equals(document.scrollingElement.scrollLeft, 0, "scrollingElement scroll x offset should be 0 in the end of the test"); 80 assert_equals(document.scrollingElement.scrollTop, 0, "scrollingElement scroll y offset should be 0 in the end of the test"); 81 }); 82 resolve(); 83 }).then( 84 ()=>{t.done();}, 85 ()=>{t.done();} 86 );}, "touch-action none on body when style propagates to viewport"); 87 } 88 </script> 89 </body> 90 </html>