| OLD | NEW |
|---|
| 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 > #scaled { |
| 21 margin: 10px 32px; |
| 22 -webkit-transform: scale(1.2); |
| 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; |
| 34 } |
| 35 #transform3dChild { |
| 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; |
| 52 } |
| 53 iframe { |
| 54 height: 25px; |
| 55 width: 400px; |
| 56 overflow-x: hidden; |
| 57 } |
| 58 #iframe-nested { |
| 59 height: 35px; |
| 25 } | 60 } |
| 26 body { | 61 body { |
| 27 » height: 1000px; | 62 /* make it easy to validate rects are covering the entire document */ |
| 63 height: 1968px; |
| 64 margin: 16px 5px; |
| 28 } | 65 } |
| 29 </style> | 66 </style> |
| 30 </head> | 67 </head> |
| 31 <body> | 68 <body> |
| 32 <p id="description">This tests verifies the hit test regions given to the compos
itor. It can only be run in DumpRenderTree. | 69 <p id="description"> |
| 33 The outputted rects should cover the hit test regions of all the listed elements
.</p> | 70 This tests verifies the hit test regions given to the compositor. It can only be
run in DumpRenderTree. |
| 34 <div id="console"></div> | 71 The outputted rects should cover the hit test regions of all the listed elements
. Enable visualize mode |
| 72 to quickly validate graphically.</p> |
| 35 | 73 |
| 36 <div id="tests"> | 74 <div id="tests"> |
| 37 » <div id="normalFlow"> | 75 <div class="testcase" id="normalFlow"> |
| 38 » » Lorem ipsum | 76 Normal |
| 39 » » <span>sum</span>. | 77 <span>flow</span>. |
| 40 » </div> | 78 </div> |
| 41 » <div id="absoluteChildContainer"> | 79 <div class="testcase" id="inlineOverflow"> |
| 42 » » Lorem ipsum | 80 <span>Inline_overflow</span> |
| 43 » » <span id="absoluteChild">Absolute child</span> | 81 </div> |
| 44 » </div> | 82 <div class="testcase" id="absoluteChildContainer"> |
| 45 » <div id="relativeChildContainer"> | 83 Abs child container |
| 46 » » Lorem ipsum | 84 <span id="absoluteChild">Absolute child</span> |
| 47 » » <span id="relativeChild">Relative child</span> | 85 </div> |
| 48 » </div> | 86 <div class="testcase" id="relativeChildContainer"> |
| 49 » <div id="overhangingContainer"> | 87 RELATIVE CHILD CONTAINER |
| 50 » » <div id="overhangingFloatingChild">Overhanging float overhanging
float overhanging float overhanging float</div> | 88 <span id="relativeChild">Relative child</span> |
| 51 » </div> | 89 </div> |
| 52 » <div id="transformedChildContainer"> | 90 <div class="testcase" id="translate"> |
| 53 » » <div id="transformedChild">Transformed</div> | 91 <div id="translateChild">Translated</div> |
| 54 » </div> | 92 </div> |
| 55 » <div> | 93 <div class="testcase" id="scaled"> |
| 56 » » <b id="continuation">This b tag | 94 Scaled |
| 57 » » <div>causes a</div> | 95 </div> |
| 58 » » continuation</b> | 96 <div class="testcase" id="overhangingContainer"> |
| 59 » </div> | 97 <div id="overhangingFloatingChild">Overhanging float overhanging float</div> |
| 60 » <div> | 98 </div> |
| 61 » » <span id="inlineAbsoluteChildContainer"> | 99 <div style="clear: both;"></div> |
| 62 » » » Inline with absolute child. | 100 <div class="testcase" id="transform3d"> |
| 63 » » » <span id="absoluteChild">Absolute child in inline.</span
> | 101 <div id="transform3dChild">Transformed 3D</div> |
| 64 » » </span> | 102 </div> |
| 65 » </div> | 103 <div> |
| 104 <b class="testcase" id="continuation"> |
| 105 This b tag |
| 106 <div>causes a</div> |
| 107 continuation |
| 108 </b> |
| 109 </div> |
| 110 <div> |
| 111 <span class="testcase" id="inlineAbsoluteChildContainer"> |
| 112 Inline with absolute child |
| 113 <span id="absoluteChild">Absolute child in inline.</span> |
| 114 </span> |
| 115 </div> |
| 116 <div> |
| 117 <ul class="testcase" id="list"> |
| 118 <li>List Item</li> |
| 119 </ul> |
| 120 </div> |
| 121 <div class="testcase" id="styleModified"> |
| 122 Style modified dynamically |
| 123 </div> |
| 124 <div id="scrollContainer"> |
| 125 <div style='height: 13px;'></div> |
| 126 <div class="testcase" id="scrollContent">Scroll content</div> |
| 127 <div style='height: 50px;'></div> |
| 128 </div> |
| 129 <div class="testcase" id="containsSvg"> |
| 130 <svg id="svg1"> |
| 131 <line x1="0" y1="5" x2="100" y2="5" stroke-width="3" stroke="black"/> |
| 132 </svg> |
| 133 </div> |
| 134 <div> |
| 135 <svg id="svg2"> |
| 136 <line class="testcase" id="svgline" x1="0" y1="5" x2="20" y2="5" stroke-wi
dth="3" stroke="black"/> |
| 137 <line x1="40" y1="5" x2="60" y2="5" stroke-width="3" stroke="black"/> |
| 138 </svg> |
| 139 </div> |
| 140 <iframe id="iframe" src="resources/compositor-touch-hit-rects-iframe.html"></i
frame> |
| 141 <iframe id="iframe-nested" src="resources/compositor-touch-hit-rects-iframe-ne
sted.html"></iframe> |
| 142 <iframe id="iframe-doc" src="resources/compositor-touch-hit-rects-iframe-doc.h
tml"></iframe> |
| 66 </div> | 143 </div> |
| 144 |
| 145 <div id="console"></div> |
| 146 <script src="resources/compositor-touch-hit-rects.js"></script> |
| 67 <script> | 147 <script> |
| 148 preRunHandlerForTest['styleModified'] = function(e) { |
| 149 // Adding padding to the element should force the rects to be recomputed. |
| 150 checkForRectUpdate(true, function() { |
| 151 e.style.padding = '5px'; |
| 152 }); |
| 153 }; |
| 68 | 154 |
| 155 function runGlobalTest(name, element) { |
| 156 // With a global handler, no other handlers should matter |
| 157 var elements = [document.getElementById('description'), element, document.getE
lementById('tests')]; |
| 158 for (var i = 0; i < elements.length; i++) |
| 159 elements[i].addEventListener('touchmove', listener, false); |
| 69 | 160 |
| 70 function listener() { } | 161 logRects(name, true); |
| 71 | 162 |
| 72 function log(msg) { | 163 for (var i = 0; i < elements.length; i++) |
| 73 » var span = document.createElement("span"); | 164 elements[i].removeEventListener('touchmove', listener, false); |
| 74 » document.getElementById("console").appendChild(span); | |
| 75 span.innerHTML = msg + '<br />'; | |
| 76 } | 165 } |
| 77 | 166 |
| 78 function sortRects(a, b) { | 167 function runIFrameTest(id) { |
| 79 » return a.top - b.top; | 168 var elem = document.getElementById(id); |
| 169 if (!elem.addHandlers) { |
| 170 log('FAIL - child iframe has not setup handlers in parent.'); |
| 171 return; |
| 172 } |
| 173 |
| 174 elem.addHandlers(); |
| 175 logRects(id); |
| 176 elem.removeHandlers(); |
| 177 } |
| 178 function additionalTests() { |
| 179 » runIFrameTest('iframe'); |
| 180 » runIFrameTest('iframe-nested'); |
| 181 » runIFrameTest('iframe-doc'); |
| 182 » runGlobalTest('document', document); |
| 183 » runGlobalTest('html', document.documentElement); |
| 184 » runGlobalTest('body', document.body); |
| 80 } | 185 } |
| 81 | 186 |
| 82 function testElementWithId(id) | 187 if (window.internals) { |
| 83 { | 188 window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(fa
lse); |
| 84 » element = document.getElementById(id); | |
| 85 » element.addEventListener('touchstart', listener, false); | |
| 86 » logRects(id); | |
| 87 » element.removeEventListener('touchstart', listener, false); | |
| 88 } | 189 } |
| 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> | 190 </script> |
| 123 </body> | 191 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 17471008:
Rework compositor touch hit testing (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master