<!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>
Codebase Browser
chromium