chromium/src/third_party/blink/renderer/core/testing/data/touch-action-simple.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <link rel='stylesheet' type='text/css' href='touch-action-tests.css'>
 <script src='touch-action-tests.js'></script>

 <!--
      Test a bunch of simple cases where touch-action: none results in a non-fast-scrollable region.
 -->

 <div expected-action='auto'>Simple div with no explicit touch-action</div>
 <div class='ta-none' expected-action='none'>Simple div with touch-action: none</div>

 <div class='ta-none' style='height: 0; margin-bottom: 50px'>
   <div expected-action='none'>
     Touch-action: none is propagated to descendants
   </div>
 </div>

 <div class='ta-none' style='height: 0; margin-bottom: 50px'>
   <div class='ta-auto' expected-action='none'>
     Explicitly setting touch-action: auto does nothing to prevent propagation of none
   </div>
 </div>

 <div class='ta-none' style='height: 0; margin-bottom: 50px'>
   <span expected-action='none' style='display:inline-block'>
     touch-action should be inherited by inline-block elements
   </span>
 </div>

 <div class='ta-none' style='height: 0; margin-bottom: 50px'>
   <span expected-action='none' style='display:table-cell'>
     touch-action should be inherited by table-cell elements
   </span>
 </div>

 <div style='padding: 20px 0'>
   <span class='ta-none' expected-action='auto'>Touch-action should be ignored on inline elements
     <div expected-action='auto'>And not propagated to any block children</div>
   </span>
 </div>

 <div class='ta-none' style='height: 0; margin-bottom: 100px'>
   <span expected-action='none'>
     touch-action should be inherited by inline elements.<br>Note this is different than IE (http://crbug.com/380203)
   </span>
 </div>

 <div class='ta-none' style='height: 0; margin-bottom: 100px'>
   <span>
     <div expected-action='none'>touch-action should be inherited by any block descendants of inline elements</div>
   </span>
 </div>

 <svg class='ta-none' expected-action='none' style="height: 50px" xmlns="http://www.w3.org/2000/svg">
   touch-action should be inherited by svg root element
 </svg>

 <div class='ta-none' style='height: 0; margin-bottom: 50px'>
   <svg expected-action='none' xmlns="http://www.w3.org/2000/svg" height="100%">
   touch-action should be inherited by svg root element
   </svg>
 </div>

 <div>
   <img class='ta-none' expected-action='none' src='white-1x1.png'></img>
   touch-action should be applicable to img element
 </div>

 <div class='ta-none' style='height: 0; margin-bottom: 100px'>
   <img expected-action='none' src='white-1x1.png'></img>
   touch-action should be inherited by img element
 </div>

 <table style='margin-left: 15px; margin-bottom: 50px'>
   <tr class='ta-none'> <td expected-action='auto'>Test Cell</td> </tr>
 </table>

 <table style='margin-left: 15px'>
   <colgroup>
     <col class='ta-none'>
   </colgroup>
   <tr> <td expected-action='auto'>Test Cell</td> </tr>
 </table>

 <div class='ta-none'>
   <table style='margin-left: 15px'>
     <tr> <td expected-action='none'>Test Cell</td> </tr>
   </table>
 </div>

 <div id="replaced-canvas">
   Test Canvas
 </div>
	<!DOCTYPE html>
	<link rel='stylesheet' type='text/css' href='touch-action-tests.css'>
	<script src='touch-action-tests.js'></script>

	<!--
	Test a bunch of simple cases where touch-action: none results in a non-fast-scrollable region.
	-->

	<div expected-action='auto'>Simple div with no explicit touch-action</div>
	<div class='ta-none' expected-action='none'>Simple div with touch-action: none</div>

	<div class='ta-none' style='height: 0; margin-bottom: 50px'>
	<div expected-action='none'>
	Touch-action: none is propagated to descendants
	</div>
	</div>

	<div class='ta-none' style='height: 0; margin-bottom: 50px'>
	<div class='ta-auto' expected-action='none'>
	Explicitly setting touch-action: auto does nothing to prevent propagation of none
	</div>
	</div>

	<div class='ta-none' style='height: 0; margin-bottom: 50px'>
	<span expected-action='none' style='display:inline-block'>
	touch-action should be inherited by inline-block elements
	</span>
	</div>

	<div class='ta-none' style='height: 0; margin-bottom: 50px'>
	<span expected-action='none' style='display:table-cell'>
	touch-action should be inherited by table-cell elements
	</span>
	</div>

	<div style='padding: 20px 0'>
	<span class='ta-none' expected-action='auto'>Touch-action should be ignored on inline elements
	<div expected-action='auto'>And not propagated to any block children</div>
	</span>
	</div>

	<div class='ta-none' style='height: 0; margin-bottom: 100px'>
	<span expected-action='none'>
	touch-action should be inherited by inline elements.<br>Note this is different than IE (http://crbug.com/380203)
	</span>
	</div>

	<div class='ta-none' style='height: 0; margin-bottom: 100px'>
	<span>
	<div expected-action='none'>touch-action should be inherited by any block descendants of inline elements</div>
	</span>
	</div>

	<svg class='ta-none' expected-action='none' style="height: 50px" xmlns="http://www.w3.org/2000/svg">
	touch-action should be inherited by svg root element
	</svg>

	<div class='ta-none' style='height: 0; margin-bottom: 50px'>
	<svg expected-action='none' xmlns="http://www.w3.org/2000/svg" height="100%">
	touch-action should be inherited by svg root element
	</svg>
	</div>

	<div>
	<img class='ta-none' expected-action='none' src='white-1x1.png'></img>
	touch-action should be applicable to img element
	</div>

	<div class='ta-none' style='height: 0; margin-bottom: 100px'>
	<img expected-action='none' src='white-1x1.png'></img>
	touch-action should be inherited by img element
	</div>

	<table style='margin-left: 15px; margin-bottom: 50px'>
	<tr class='ta-none'> <td expected-action='auto'>Test Cell</td> </tr>
	</table>

	<table style='margin-left: 15px'>
	<colgroup>
	<col class='ta-none'>
	</colgroup>
	<tr> <td expected-action='auto'>Test Cell</td> </tr>
	</table>

	<div class='ta-none'>
	<table style='margin-left: 15px'>
	<tr> <td expected-action='none'>Test Cell</td> </tr>
	</table>
	</div>

	<div id="replaced-canvas">
	Test Canvas
	</div>