Index: LayoutTests/fast/events/touch/compositor-touch-hit-rects.html |
diff --git a/LayoutTests/fast/events/touch/compositor-touch-hit-rects.html b/LayoutTests/fast/events/touch/compositor-touch-hit-rects.html |
index 68bf3baa2a687ba8a2202f410c2d7b6e09c6470e..d63ee0913ff1f5cd33d322cc91973380fc2cd530 100644 |
--- a/LayoutTests/fast/events/touch/compositor-touch-hit-rects.html |
+++ b/LayoutTests/fast/events/touch/compositor-touch-hit-rects.html |
@@ -1,123 +1,143 @@ |
<!DOCTYPE html> |
<html> |
<head> |
+<link rel="stylesheet" href="resources/compositor-touch-hit-rects.css"> |
<style> |
-#transformedChild { |
- -webkit-transform: rotate3d(0.2, 1, 0, 35grad); |
+#inlineOverflow { |
+ width: 15px; |
} |
#absoluteChild { |
- position: absolute; |
- top: 300px; |
+ position: absolute; |
+ left: 320px; |
} |
#relativeChild { |
- position: relative; |
- top: 200px; |
+ position: relative; |
+ left: 300px; |
+} |
+#translateChild { |
+ -webkit-transform: translate(300px, 2px); |
+} |
+#tests > #transform2d { |
+ margin: 10px 32px; |
+ -webkit-transform: scale(1.2) rotate(1grad); |
} |
#overhangingContainer { |
- height: 10px; |
+ height: 10px; |
} |
#overhangingFloatingChild { |
- width: 100px; |
- float: left; |
+ width: 100px; |
+ float: left; |
+} |
+#tests > #transform3d { |
+ margin-top: 15px; |
+ margin-bottom: 10px; |
} |
-#tests { |
- font: 10px Ahem; |
+#transform3dChild { |
+ -webkit-transform: rotate3d(0.2, 1, 0, 50grad); |
} |
-body { |
- height: 1000px; |
+#scrollContainer { |
+ overflow-y: scroll; |
+ /* Make this just big enough for clipping to occur so we can verify the |
+ hit rect is also clipped. */ |
+ height: 23px; |
+ border: 1px solid lightgrey; |
+} |
+#list > li { |
+ /* Move the list item over to make sure it doesn't overlap with the list itself */ |
+ -webkit-transform: translate(300px, 0); |
+} |
+svg { |
+ width: 100px; |
+ height: 10px; |
} |
</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.</p> |
-<div id="console"></div> |
+<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 id="normalFlow"> |
- Lorem ipsum |
- <span>sum</span>. |
- </div> |
- <div id="absoluteChildContainer"> |
- Lorem ipsum |
- <span id="absoluteChild">Absolute child</span> |
- </div> |
- <div id="relativeChildContainer"> |
- Lorem ipsum |
- <span id="relativeChild">Relative child</span> |
- </div> |
- <div id="overhangingContainer"> |
- <div id="overhangingFloatingChild">Overhanging float overhanging float overhanging float overhanging float</div> |
- </div> |
- <div id="transformedChildContainer"> |
- <div id="transformedChild">Transformed</div> |
- </div> |
- <div> |
- <b id="continuation">This b tag |
- <div>causes a</div> |
- continuation</b> |
- </div> |
- <div> |
- <span id="inlineAbsoluteChildContainer"> |
- Inline with absolute child. |
- <span id="absoluteChild">Absolute child in inline.</span> |
- </span> |
- </div> |
+ <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="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> |
+ <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 id="scrollContainer"> |
+ <div style='height: 13px;'></div> |
+ <div class="testcase" id="scrollContent">Scroll content</div> |
+ <div style='height: 50px;'></div> |
+ </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> |
</div> |
-<script> |
- |
- |
-function listener() { } |
-function log(msg) { |
- var span = document.createElement("span"); |
- document.getElementById("console").appendChild(span); |
- span.innerHTML = msg + '<br />'; |
-} |
- |
-function sortRects(a, b) { |
- return a.top - b.top; |
-} |
- |
-function testElementWithId(id) |
-{ |
- element = document.getElementById(id); |
- element.addEventListener('touchstart', listener, false); |
- logRects(id); |
- element.removeEventListener('touchstart', listener, false); |
-} |
- |
-function logRects(testName) { |
- |
- rects = window.internals.touchEventTargetClientRects(document); |
- var sortedRects = new Array(); |
- for (var i = 0; i < rects.length; ++i) |
- sortedRects[i] = rects[i]; |
- sortedRects.sort(sortRects); |
- for (var i = 0; i < rects.length; ++i) |
- log(testName + "[" + i + "]: (" + sortedRects[i].left + ", " + sortedRects[i].top + ", " + sortedRects[i].width + ", " + sortedRects[i].height + ")"); |
-} |
- |
-function runTest() { |
- if (!window.testRunner) |
- return; |
- |
- window.testRunner.dumpAsText(); |
- testElementWithId("normalFlow"); |
- testElementWithId("absoluteChildContainer"); |
- testElementWithId("relativeChildContainer"); |
- testElementWithId("overhangingContainer"); |
- testElementWithId("transformedChildContainer"); |
- testElementWithId("continuation"); |
- testElementWithId("inlineAbsoluteChildContainer"); |
- |
- document.addEventListener('touchstart', listener, false); |
- logRects("document"); |
+<div id="console"></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. |
+ checkForRectUpdate(true, function() { |
+ e.style.padding = '5px'; |
+ }); |
+}; |
- var testContainer = document.getElementById("tests"); |
- testContainer.parentNode.removeChild(testContainer); |
+if (window.internals) { |
+ window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(false); |
} |
- |
-runTest(); |
</script> |
</body> |