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