Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(91)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/events/touch/compositor-touch-hit-rects.html

Issue 17471008: Rework compositor touch hit testing (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: CR feedback - accumulate LayoutRects instead of IntRects, disable when page isn't composited. Also… Created 7 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « LayoutTests/TestExpectations ('k') | LayoutTests/fast/events/touch/compositor-touch-hit-rects-global.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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>
« no previous file with comments | « LayoutTests/TestExpectations ('k') | LayoutTests/fast/events/touch/compositor-touch-hit-rects-global.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698