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

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: Various fixes and test additions 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-scroll.html » ('j') | Source/core/rendering/RenderObject.cpp » ('J')
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..ca818f781cbd2f60764118f3be9ea3f82a2e613d 100644
--- a/LayoutTests/fast/events/touch/compositor-touch-hit-rects.html
+++ b/LayoutTests/fast/events/touch/compositor-touch-hit-rects.html
@@ -1,123 +1,191 @@
<!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 > #scaled {
+ margin: 10px 32px;
+ -webkit-transform: scale(1.2);
}
#overhangingContainer {
- height: 10px;
+ height: 10px;
}
#overhangingFloatingChild {
- width: 100px;
- float: left;
+ width: 100px;
+ float: left;
+}
+#tests > #transform3d {
+ margin-top: 15px;
+ margin-bottom: 10px;
+}
+#transform3dChild {
+ -webkit-transform: rotate3d(0.2, 1, 0, 50grad);
+}
+#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;
}
-#tests {
- font: 10px Ahem;
+#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;
+}
+iframe {
+ height: 25px;
+ width: 400px;
+ overflow-x: hidden;
+}
+#iframe-nested {
+ height: 35px;
}
body {
- height: 1000px;
+ /* make it easy to validate rects are covering the entire document */
+ height: 1968px;
+ margin: 16px 5px;
}
</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</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="scaled">
+ Scaled
+ </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>
+ <iframe id="iframe" src="resources/compositor-touch-hit-rects-iframe.html"></iframe>
+ <iframe id="iframe-nested" src="resources/compositor-touch-hit-rects-iframe-nested.html"></iframe>
+ <iframe id="iframe-doc" src="resources/compositor-touch-hit-rects-iframe-doc.html"></iframe>
</div>
+
+<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';
+ });
+};
+function runGlobalTest(name, element) {
+ // With a global handler, no other handlers should matter
+ var elements = [document.getElementById('description'), element, document.getElementById('tests')];
+ for (var i = 0; i < elements.length; i++)
+ elements[i].addEventListener('touchmove', listener, false);
-function listener() { }
+ logRects(name, true);
-function log(msg) {
- var span = document.createElement("span");
- document.getElementById("console").appendChild(span);
- span.innerHTML = msg + '<br />';
+ for (var i = 0; i < elements.length; i++)
+ elements[i].removeEventListener('touchmove', listener, false);
}
-function sortRects(a, b) {
- return a.top - b.top;
-}
+function runIFrameTest(id) {
+ var elem = document.getElementById(id);
+ if (!elem.addHandlers) {
+ log('FAIL - child iframe has not setup handlers in parent.');
+ return;
+ }
-function testElementWithId(id)
-{
- element = document.getElementById(id);
- element.addEventListener('touchstart', listener, false);
- logRects(id);
- element.removeEventListener('touchstart', listener, false);
+ elem.addHandlers();
+ logRects(id);
+ elem.removeHandlers();
}
-
-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 additionalTests() {
+ runIFrameTest('iframe');
+ runIFrameTest('iframe-nested');
+ runIFrameTest('iframe-doc');
+ runGlobalTest('document', document);
+ runGlobalTest('html', document.documentElement);
+ runGlobalTest('body', document.body);
}
-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");
-
- 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-scroll.html » ('j') | Source/core/rendering/RenderObject.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698