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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side 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 unified diff | 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 »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <link rel="stylesheet" href="resources/compositor-touch-hit-rects.css">
4 <style> 5 <style>
5 #transformedChild { 6 #inlineOverflow {
6 » -webkit-transform: rotate3d(0.2, 1, 0, 35grad); 7 width: 15px;
7 } 8 }
8 #absoluteChild { 9 #absoluteChild {
9 » position: absolute; 10 position: absolute;
10 » top: 300px; 11 left: 320px;
11 } 12 }
12 #relativeChild { 13 #relativeChild {
13 » position: relative; 14 position: relative;
14 » top: 200px; 15 left: 300px;
16 }
17 #translateChild {
18 -webkit-transform: translate(300px, 2px);
19 }
20 #tests > #transform2d {
21 margin: 10px 32px;
22 -webkit-transform: scale(1.2) rotate(1grad);
15 } 23 }
16 #overhangingContainer { 24 #overhangingContainer {
17 » height: 10px; 25 height: 10px;
18 } 26 }
19 #overhangingFloatingChild { 27 #overhangingFloatingChild {
20 » width: 100px; 28 width: 100px;
21 » float: left; 29 float: left;
22 } 30 }
23 #tests { 31 #tests > #transform3d {
24 » font: 10px Ahem; 32 margin-top: 15px;
33 margin-bottom: 10px;
25 } 34 }
26 body { 35 #transform3dChild {
27 » height: 1000px; 36 -webkit-transform: rotate3d(0.2, 1, 0, 50grad);
37 }
38 #scrollContainer {
39 overflow-y: scroll;
40 /* Make this just big enough for clipping to occur so we can verify the
41 hit rect is also clipped. */
42 height: 23px;
43 border: 1px solid lightgrey;
44 }
45 #list > li {
46 /* Move the list item over to make sure it doesn't overlap with the list itsel f */
47 -webkit-transform: translate(300px, 0);
48 }
49 svg {
50 width: 100px;
51 height: 10px;
28 } 52 }
29 </style> 53 </style>
30 </head> 54 </head>
31 <body> 55 <body>
32 <p id="description">This tests verifies the hit test regions given to the compos itor. It can only be run in DumpRenderTree. 56 <p id="description">
33 The outputted rects should cover the hit test regions of all the listed elements .</p> 57 This tests verifies the hit test regions given to the compositor. It can only be run in DumpRenderTree.
34 <div id="console"></div> 58 The outputted rects should cover the hit test regions of all the listed elements . Enable visualize mode
59 to quickly validate graphically.</p>
35 60
36 <div id="tests"> 61 <div id="tests">
37 » <div id="normalFlow"> 62 <div class="testcase" id="normalFlow">
38 » » Lorem ipsum 63 Normal
39 » » <span>sum</span>. 64 <span>flow</span>.
40 » </div> 65 </div>
41 » <div id="absoluteChildContainer"> 66 <div class="testcase" id="inlineOverflow">
42 » » Lorem ipsum 67 <span>Inline_overflow more</span>
43 » » <span id="absoluteChild">Absolute child</span> 68 </div>
44 » </div> 69 <div class="testcase" id="absoluteChildContainer">
45 » <div id="relativeChildContainer"> 70 Abs child container
46 » » Lorem ipsum 71 <span id="absoluteChild">Absolute child</span>
47 » » <span id="relativeChild">Relative child</span> 72 </div>
48 » </div> 73 <div class="testcase" id="relativeChildContainer">
49 » <div id="overhangingContainer"> 74 RELATIVE CHILD CONTAINER
50 » » <div id="overhangingFloatingChild">Overhanging float overhanging float overhanging float overhanging float</div> 75 <span id="relativeChild">Relative child</span>
51 » </div> 76 </div>
52 » <div id="transformedChildContainer"> 77 <div class="testcase" id="translate">
53 » » <div id="transformedChild">Transformed</div> 78 <div id="translateChild">Translated</div>
54 » </div> 79 </div>
55 » <div> 80 <div class="testcase" id="transform2d">
56 » » <b id="continuation">This b tag 81 Transformed 2D
57 » » <div>causes a</div> 82 </div>
58 » » continuation</b> 83 <div class="testcase" id="overhangingContainer">
59 » </div> 84 <div id="overhangingFloatingChild">Overhanging float overhanging float</div>
60 » <div> 85 </div>
61 » » <span id="inlineAbsoluteChildContainer"> 86 <div style="clear: both;"></div>
62 » » » Inline with absolute child. 87 <div class="testcase" id="transform3d">
63 » » » <span id="absoluteChild">Absolute child in inline.</span > 88 <div id="transform3dChild">Transformed 3D</div>
64 » » </span> 89 </div>
65 » </div> 90 <div>
91 <b class="testcase" id="continuation">
92 This b tag
93 <div>causes a</div>
94 continuation
95 </b>
96 </div>
97 <div>
98 <span class="testcase" id="inlineAbsoluteChildContainer">
99 Inline with absolute child
100 <span id="absoluteChild">Absolute child in inline.</span>
101 </span>
102 </div>
103 <div>
104 <ul class="testcase" id="list">
105 <li>List Item</li>
106 </ul>
107 </div>
108 <div class="testcase" id="styleModified">
109 Style modified dynamically
110 </div>
111 <div id="scrollContainer">
112 <div style='height: 13px;'></div>
113 <div class="testcase" id="scrollContent">Scroll content</div>
114 <div style='height: 50px;'></div>
115 </div>
116 <div class="testcase" id="containsSvg">
117 <svg id="svg1">
118 <line x1="0" y1="5" x2="100" y2="5" stroke-width="3" stroke="black"/>
119 </svg>
120 </div>
121 <div>
122 <svg id="svg2">
123 <line class="testcase" id="svgline" x1="0" y1="5" x2="20" y2="5" stroke-wi dth="3" stroke="black"/>
124 <line x1="40" y1="5" x2="60" y2="5" stroke-width="3" stroke="black"/>
125 </svg>
126 </div>
66 </div> 127 </div>
128
129 <div id="console"></div>
130 <script src="resources/compositor-touch-hit-rects.js"></script>
67 <script> 131 <script>
132 preRunHandlerForTest['styleModified'] = function(e) {
133 // Adding padding to the element should force the rects to be recomputed.
134 checkForRectUpdate(true, function() {
135 e.style.padding = '5px';
136 });
137 };
68 138
69 139 if (window.internals) {
70 function listener() { } 140 window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(fa lse);
71
72 function log(msg) {
73 » var span = document.createElement("span");
74 » document.getElementById("console").appendChild(span);
75 span.innerHTML = msg + '<br />';
76 } 141 }
77
78 function sortRects(a, b) {
79 return a.top - b.top;
80 }
81
82 function testElementWithId(id)
83 {
84 element = document.getElementById(id);
85 element.addEventListener('touchstart', listener, false);
86 logRects(id);
87 element.removeEventListener('touchstart', listener, false);
88 }
89
90 function logRects(testName) {
91
92 rects = window.internals.touchEventTargetClientRects(document);
93 var sortedRects = new Array();
94 for (var i = 0; i < rects.length; ++i)
95 sortedRects[i] = rects[i];
96 sortedRects.sort(sortRects);
97 for (var i = 0; i < rects.length; ++i)
98 log(testName + "[" + i + "]: (" + sortedRects[i].left + ", " + s ortedRects[i].top + ", " + sortedRects[i].width + ", " + sortedRects[i].height + ")");
99 }
100
101 function runTest() {
102 if (!window.testRunner)
103 return;
104
105 window.testRunner.dumpAsText();
106 testElementWithId("normalFlow");
107 testElementWithId("absoluteChildContainer");
108 testElementWithId("relativeChildContainer");
109 testElementWithId("overhangingContainer");
110 testElementWithId("transformedChildContainer");
111 testElementWithId("continuation");
112 testElementWithId("inlineAbsoluteChildContainer");
113
114 document.addEventListener('touchstart', listener, false);
115 logRects("document");
116
117 var testContainer = document.getElementById("tests");
118 testContainer.parentNode.removeChild(testContainer);
119 }
120
121 runTest();
122 </script> 142 </script>
123 </body> 143 </body>
OLDNEW
« 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