| <!DOCTYPE html> |
| <html> |
| <head> |
| <link rel="stylesheet" href="resources/compositor-touch-hit-rects.css"> |
| <style> |
| #inlineOverflow { |
| width: 15px; |
| } |
| #absoluteChild { |
| position: absolute; |
| left: 320px; |
| } |
| #relativeChild { |
| position: relative; |
| left: 300px; |
| } |
| #fixed { |
| position: fixed; |
| top: 80px; |
| left: 400px; |
| } |
| #translateChild { |
| transform: translate(300px, 2px); |
| } |
| #tests > #transform2d { |
| margin: 10px 32px; |
| transform: scale(1.2) rotate(1grad); |
| } |
| #overhangingContainer { |
| height: 10px; |
| } |
| #overhangingFloatingChild { |
| width: 100px; |
| float: left; |
| } |
| #tests > #transform3d { |
| margin-top: 15px; |
| margin-bottom: 10px; |
| } |
| #withNegativeOffsetChild { |
| position: relative; |
| width: 100px; |
| height: 10px; |
| border: 1px dotted blue; |
| transform: translateX(calc(120%)); |
| will-change: transform; |
| clear: both; |
| } |
| #negativeOffsetChild { |
| position: absolute; |
| width: 100px; |
| height: 10px; |
| left: calc(-110%); |
| top: 0px; |
| } |
| #transform3dChild { |
| transform: rotate3d(0.2, 1, 0, 50grad); |
| } |
| #list > li { |
| /* Move the list item over to make sure it doesn't overlap with the list itself */ |
| transform: translate(300px, 0); |
| } |
| svg { |
| width: 100px; |
| height: 10px; |
| } |
| table,td { |
| border: 1px solid lightgrey; |
| font-size: 7px; |
| } |
| </style> |
| </head> |
| <body> |
| <p id="description"> |
| This tests verifies the hit test regions given to the compositor. It can only be run in DumpRenderTree. |
| The outputted rects should cover the hit test regions of all the listed elements. Enable visualize mode |
| to quickly validate graphically.</p> |
| |
| <div id="tests"> |
| <div class="testcase" id="normalFlow"> |
| Normal |
| <span>flow</span>. |
| </div> |
| <div class="testcase" id="inlineOverflow"> |
| <span>Inline_overflow more</span> |
| </div> |
| <div class="testcase" id="absoluteChildContainer"> |
| Abs child container |
| <span id="absoluteChild">Absolute child</span> |
| </div> |
| <div class="testcase" id="relativeChildContainer"> |
| RELATIVE CHILD CONTAINER |
| <span id="relativeChild">Relative child</span> |
| </div> |
| <div class="testcase" id="fixed"> |
| Fixed |
| </div> |
| <div class="testcase" id="translate"> |
| <div id="translateChild">Translated</div> |
| </div> |
| <div class="testcase" id="transform2d"> |
| Transformed 2D |
| </div> |
| <div class="testcase" id="overhangingContainer"> |
| <div id="overhangingFloatingChild">Overhanging float overhanging float</div> |
| </div> |
| <div style="clear: both;"></div> |
| <div class="testcase" id="transform3d"> |
| <div id="transform3dChild">Transformed 3D</div> |
| </div> |
| <div id="withNegativeOffsetChild"> |
| <div id="negativeOffsetChild" class="testcase"></div> |
| </div> |
| <div> |
| <b class="testcase" id="continuation"> |
| This b tag |
| <div>causes a</div> |
| continuation |
| </b> |
| </div> |
| <div> |
| <span class="testcase" id="inlineAbsoluteChildContainer"> |
| Inline with absolute child |
| <span id="absoluteChild">Absolute child in inline.</span> |
| </span> |
| </div> |
| <div> |
| <ul class="testcase" id="list"> |
| <li>List Item</li> |
| </ul> |
| </div> |
| <div class="testcase" id="styleModified"> |
| Style modified dynamically |
| </div> |
| <div class="testcase" id="containsSvg"> |
| <svg id="svg1"> |
| <line x1="0" y1="5" x2="100" y2="5" stroke-width="3" stroke="black"/> |
| </svg> |
| </div> |
| <div> |
| <svg id="svg2"> |
| <line class="testcase" id="svgline" x1="0" y1="5" x2="20" y2="5" stroke-width="3" stroke="black"/> |
| <line x1="40" y1="5" x2="60" y2="5" stroke-width="3" stroke="black"/> |
| </svg> |
| </div> |
| <table> |
| <tr><td>cell<td>cell</td></tr> |
| <tr><td>cell</td><td class="testcase" id="tablecell">cell</td></tr> |
| </table> |
| </div> |
| |
| <div id="console"></div> |
| <div style="height: 1000px;"></div> |
| <script src="resources/compositor-touch-hit-rects.js"></script> |
| <script> |
| preRunHandlerForTest['styleModified'] = function(e) { |
| // Adding padding to the element should force the rects to be recomputed. |
| e.style.padding = '5px'; |
| }; |
| |
| // Make fixed-position cases slightly more interesting |
| window.scrollTo(0, 13); |
| |
| if (window.internals) { |
| internals.settings.setPreferCompositingToLCDTextEnabled(false); |
| } |
| </script> |
| </body> |
