src/third_party/WebKit/LayoutTests/fast/events/touch/compositor-touch-hit-rects.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link rel="stylesheet" href="resources/compositor-touch-hit-rects.css">
   5 <style>
   6 #inlineOverflow {
   7   width: 15px;
   8 }
   9 #absoluteChild {
  10   position: absolute;
  11   left: 320px;
  12 }
  13 #relativeChild {
  14   position: relative;
  15   left: 300px;
  16 }
  17 #fixed {
  18   position: fixed;
  19   top: 80px;
  20   left: 400px;
  21 }
  22 #translateChild {
  23   -webkit-transform: translate(300px, 2px);
  24 }
  25 #tests > #transform2d {
  26   margin: 10px 32px;
  27   -webkit-transform: scale(1.2) rotate(1grad);
  28 }
  29 #overhangingContainer {
  30   height: 10px;
  31 }
  32 #overhangingFloatingChild {
  33   width: 100px;
  34   float: left;
  35 }
  36 #tests > #transform3d {
  37   margin-top: 15px;
  38   margin-bottom: 10px;
  39 }
  40 #transform3dChild {
  41   -webkit-transform: rotate3d(0.2, 1, 0, 50grad);
  42 }
  43 #list > li {
  44   /* Move the list item over to make sure it doesn't overlap with the list itself */
  45   -webkit-transform: translate(300px, 0);
  46 }
  47 svg {
  48   width: 100px;
  49   height: 10px;
  50 }
  51 table,td {
  52   border: 1px solid lightgrey;
  53   font-size: 7px;
  54 }
  55 </style>
  56 </head>
  57 <body>
  58 <p id="description">
  59 This tests verifies the hit test regions given to the compositor. It can only be run in DumpRenderTree.
  60 The outputted rects should cover the hit test regions of all the listed elements.  Enable visualize mode
  61 to quickly validate graphically.</p>
  62
  63 <div id="tests">
  64   <div class="testcase" id="normalFlow">
  65     Normal
  66     <span>flow</span>.
  67   </div>
  68   <div class="testcase" id="inlineOverflow">
  69     <span>Inline_overflow more</span>
  70   </div>
  71   <div class="testcase" id="absoluteChildContainer">
  72     Abs child container
  73     <span id="absoluteChild">Absolute child</span>
  74   </div>
  75   <div class="testcase" id="relativeChildContainer">
  76     RELATIVE CHILD CONTAINER
  77     <span id="relativeChild">Relative child</span>
  78   </div>
  79   <div class="testcase" id="fixed">
  80     Fixed
  81   </div>
  82   <div class="testcase" id="translate">
  83     <div id="translateChild">Translated</div>
  84   </div>
  85   <div class="testcase" id="transform2d">
  86     Transformed 2D
  87   </div>
  88   <div class="testcase" id="overhangingContainer">
  89     <div id="overhangingFloatingChild">Overhanging float overhanging float</div>
  90   </div>
  91   <div style="clear: both;"></div>
  92   <div class="testcase" id="transform3d">
  93     <div id="transform3dChild">Transformed 3D</div>
  94   </div>
  95   <div>
  96     <b class="testcase" id="continuation">
  97       This b tag
  98       <div>causes a</div>
  99       continuation
 100     </b>
 101   </div>
 102   <div>
 103     <span class="testcase" id="inlineAbsoluteChildContainer">
 104       Inline with absolute child
 105       <span id="absoluteChild">Absolute child in inline.</span>
 106     </span>
 107   </div>
 108   <div>
 109     <ul class="testcase" id="list">
 110       <li>List Item</li>
 111     </ul>
 112   </div>
 113   <div class="testcase" id="styleModified">
 114     Style modified dynamically
 115   </div>
 116   <div class="testcase" id="containsSvg">
 117     <svg id="svg1">
 118       <line x1="0" y1="5" x2="100" y2="5" stroke-width="3" stroke="black"/>
 119     </svg>
 120   </div>
 121   <div>
 122     <svg id="svg2">
 123       <line class="testcase" id="svgline" x1="0" y1="5" x2="20" y2="5" stroke-width="3" stroke="black"/>
 124       <line x1="40" y1="5" x2="60" y2="5" stroke-width="3" stroke="black"/>
 125     </svg>
 126   </div>
 127   <table>
 128     <tr><td>cell<td>cell</td></tr>
 129     <tr><td>cell</td><td class="testcase" id="tablecell">cell</td></tr>
 130   </table>
 131 </div>
 132
 133 <div id="console"></div>
 134 <div style="height: 1000px;"></div>
 135 <script src="resources/compositor-touch-hit-rects.js"></script>
 136 <script>
 137 preRunHandlerForTest['styleModified'] = function(e) {
 138   // Adding padding to the element should force the rects to be recomputed.
 139   e.style.padding = '5px';
 140 };
 141
 142 // Make fixed-position cases slightly more interesting
 143 window.scrollTo(0, 13);
 144
 145 if (window.internals) {
 146   window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(false);
 147 }
 148 </script>
 149 </body>