| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <style> | 2 <style> |
| 3 body { | 3 body { |
| 4 margin: 0; | 4 margin: 0; |
| 5 } | 5 } |
| 6 .non-fast { | 6 .container { |
| 7 height: 250px; | 7 height: 250px; |
| 8 width: 250px; | 8 width: 250px; |
| 9 margin-top: 50px; |
| 9 display: block; | 10 display: block; |
| 10 background-color: red; | |
| 11 overflow: scroll; | |
| 12 } | 11 } |
| 13 .non-fast > div { | 12 .container > div { |
| 13 height: 200px; |
| 14 width: 200px; |
| 15 overflow: scroll; |
| 16 } |
| 17 .container > div > div { |
| 14 height: 1000px; | 18 height: 1000px; |
| 15 width: 1000px; | 19 width: 1000px; |
| 20 background: linear-gradient(to bottom, red, white); |
| 21 } |
| 22 .container > iframe { |
| 23 height: 222px; |
| 24 width: 222px; |
| 16 display: block; | 25 display: block; |
| 17 background: linear-gradient(to bottom, red, white); | 26 border: none; |
| 18 } | 27 } |
| 19 </style> | 28 </style> |
| 20 | 29 |
| 21 <div id="first" class="non-fast"> | 30 <section id='div' style="display:none;"> |
| 22 This should be covered by the ONLY visible green overlay. | 31 <div class="to-show container"> |
| 23 </div> | 32 </div> |
| 24 <div id="second" class="non-fast" style="margin-top:50px;"> | 33 <div class="to-hide container"> |
| 25 This should not be visible. | 34 <div> |
| 26 <div></div> | 35 <div>This should not be visible.</div> |
| 27 </div> | 36 </div> |
| 37 </div> |
| 38 </section> |
| 39 |
| 40 <section id="iframe" style="display:none;"> |
| 41 <div class="to-show container"> |
| 42 </div> |
| 43 <div class="to-hide container"> |
| 44 <iframe src="data:text/html;charset=utf-8,<div style='height:1000px; width:1
000px; background: linear-gradient(to bottom, red, white);'>"> |
| 45 This should not be visible. |
| 46 </iframe> |
| 47 </div> |
| 48 </section> |
| 49 |
| 50 <p>Two squares should be visible and fully covered by green overlays.</p> |
| 28 | 51 |
| 29 <div id="console"></div> | 52 <div id="console"></div> |
| 30 | 53 |
| 31 <script src="../resources/js-test.js"></script> | 54 <script src="../resources/js-test.js"></script> |
| 32 <script src="resources/non-fast-scrollable-region-testing.js"></script> | 55 <script src="resources/non-fast-scrollable-region-testing.js"></script> |
| 33 <script> | 56 <script> |
| 34 window.jsTestIsAsync = true; | 57 window.jsTestIsAsync = true; |
| 35 description('This test ensures that changing visibility of a non-fast ' + | 58 description('This test ensures that changing visibility of a non-fast ' + |
| 36 'scrollable area correctly updates list of non-fast scrollable ' + | 59 'scrollable area correctly updates list of non-fast scrollable ' + |
| 37 'areas. (See http://crbug.com/434982)'); | 60 'areas (See http://crbug.com/434982). Two types of non-fast ' + |
| 61 'scrollable regions are covered: div, and iframe.'); |
| 38 | 62 |
| 39 onload = function() { | 63 onload = next; |
| 40 awaitCompsitingUpdate(runTest); | |
| 41 }; | |
| 42 | 64 |
| 43 function runTest() { | 65 var testCases = [ |
| 44 var first = document.getElementById('first'), | 66 // type, bounding box of element to show, bounding box of element to hide |
| 45 second = document.getElementById('second'); | 67 ['div', '[0, 50, 200, 200]', '[0, 350, 200, 200]'], |
| 68 ['iframe', '[0, 50, 222, 222]', '[0, 350, 222, 222]']]; |
| 46 | 69 |
| 47 nonFastScrollableRects = internals.nonFastScrollableRects(document); | 70 var index = 0; |
| 48 shouldBe('nonFastScrollableRects.length', '1'); | 71 function next(){ |
| 49 shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', | 72 if (index < testCases.length) { |
| 50 '[0, 300, 250, 250]'); // second div | 73 var type = testCases[index][0]; |
| 74 debug('running tests for non-fast scrollable ' + type); |
| 75 runTest.apply(this, testCases[index]); |
| 76 } else { |
| 77 // Next 3 statements have no functional impact just visual |
| 78 showSectionIf(function(){return true;}); |
| 79 awaitCompsitingUpdate(function(){ |
| 80 runNonFastScrollableRegionTest(); |
| 51 | 81 |
| 52 // Hide container before making it non-fast scrollable to ensure any | 82 finishJSTest(); |
| 53 // layout occurs while it is invisible. | 83 }); |
| 54 first.style.visibility = 'hidden'; | 84 } |
| 55 makeNonFastScrollable(first); | |
| 56 | 85 |
| 57 // Change visibility (hidden -> visible), which should not cause any layout, | 86 index++; |
| 58 // and verify that non-fast scrollable areas are correctly updated. | 87 } |
| 88 |
| 89 // Execute tests for given non-fast scrollable type. |
| 90 function runTest(type, elemToShowExpected, elemToHideExpected) { |
| 91 // Hide all sections that are not relevant to this test to ensure |
| 92 // |window.internals.nonFastScrollableRects| returns only the relevant non- |
| 93 // fast scrollable regions. |
| 94 showSectionIf(function(section){return section.id == type;}); |
| 95 |
| 59 awaitCompsitingUpdate(function() { | 96 awaitCompsitingUpdate(function() { |
| 60 first.style.visibility = 'visible'; | 97 shouldBeEqualToString('document.getElementById("' + type + '").style.displ
ay', 'block'); |
| 61 shouldBe('window.internals.needsLayoutCount()', '0'); | |
| 62 | 98 |
| 99 var elemToShow = document.querySelector('section#' + type + '> .to-show'), |
| 100 elemToHide = document.querySelector('section#' + type + '> .to-hide'); |
| 101 |
| 102 nonFastScrollableRects = internals.nonFastScrollableRects(document); |
| 103 shouldBe('nonFastScrollableRects.length', '1'); |
| 104 shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', elemToHid
eExpected); |
| 105 |
| 106 // Hide container before making it non-fast scrollable to ensure any |
| 107 // layout occurs while it is invisible. |
| 108 elemToShow.style.visibility = 'hidden'; |
| 109 appendScrollable(elemToShow, type); |
| 110 |
| 111 // Change visibility (hidden -> visible), which should not cause any layou
t, |
| 112 // and verify that non-fast scrollable areas are correctly updated. |
| 63 awaitCompsitingUpdate(function() { | 113 awaitCompsitingUpdate(function() { |
| 64 nonFastScrollableRects = internals.nonFastScrollableRects(document); | 114 elemToShow.style.visibility = 'visible'; |
| 65 shouldBe('nonFastScrollableRects.length', '2'); | |
| 66 shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', | |
| 67 '[0, 0, 250, 250]'); // first div | |
| 68 shouldBeEqualToString('rectToString(nonFastScrollableRects[1])', | |
| 69 '[0, 300, 250, 250]'); // second div | |
| 70 | |
| 71 // Change visibility (visible -> hidden) | |
| 72 second.style.visibility = 'hidden'; | |
| 73 shouldBe('window.internals.needsLayoutCount()', '0'); | 115 shouldBe('window.internals.needsLayoutCount()', '0'); |
| 74 | 116 |
| 75 awaitCompsitingUpdate(function() { | 117 awaitCompsitingUpdate(function() { |
| 76 // This has no functional impact just visual | 118 nonFastScrollableRects = internals.nonFastScrollableRects(document); |
| 77 runNonFastScrollableRegionTest(); | 119 shouldBe('nonFastScrollableRects.length', '2'); |
| 120 shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', elemT
oShowExpected); |
| 121 shouldBeEqualToString('rectToString(nonFastScrollableRects[1])', elemT
oHideExpected); |
| 78 | 122 |
| 79 nonFastScrollableRects = internals.nonFastScrollableRects(document); | 123 // Change visibility (visible -> hidden) |
| 80 shouldBe('nonFastScrollableRects.length', '1'); | 124 elemToHide.style.visibility = 'hidden'; |
| 81 shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', | 125 shouldBe('window.internals.needsLayoutCount()', '0'); |
| 82 '[0, 0, 250, 250]'); // first div | |
| 83 | 126 |
| 84 finishJSTest(); | 127 awaitCompsitingUpdate(function() { |
| 128 nonFastScrollableRects = internals.nonFastScrollableRects(document); |
| 129 shouldBe('nonFastScrollableRects.length', '1'); |
| 130 shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', ele
mToShowExpected); |
| 131 next(); |
| 132 }); |
| 85 }); | 133 }); |
| 86 }); | 134 }); |
| 87 }); | 135 }); |
| 88 } | 136 } |
| 89 | 137 |
| 90 // Makes the container non-fast scrollable area by appending a large element t
o it. | 138 // Appends to container an scrollable element of the given type. |
| 91 function makeNonFastScrollable(container) { | 139 // Note that because this layout test runs with --dump-render-tree flag |
| 92 var inner = document.createElement('div'); | 140 // the appended scrollable is always non-fast even on HDPI platforms. |
| 93 container.appendChild(inner); | 141 function appendScrollable(container, type) { |
| 142 var inner; |
| 143 switch (type) { |
| 144 case 'div': |
| 145 inner = '<div><div>This should be covered by a green overlay.</div></div>'
; |
| 146 break; |
| 147 case 'iframe': |
| 148 inner = '<iframe id="iframe" src="data:text/html;charset=utf-8,<div style
=\'height:1000px; width:1000px; background: linear-gradient(to bottom, red, whit
e);\'>This should be covered by a green overlay.</div>"></iframe>'; |
| 149 break; |
| 150 } |
| 151 container.innerHTML = inner; |
| 152 } |
| 153 |
| 154 // Shows sections that pass condition but hides others |
| 155 function showSectionIf(condition) { |
| 156 var sections = document.querySelectorAll('section'); |
| 157 for (var i = 0; i < sections.length; i++) |
| 158 sections[i].style.display = condition(sections[i]) ? 'block' : 'none'; |
| 94 } | 159 } |
| 95 | 160 |
| 96 // Waits for one RAF call to ensure compositing update has occurred and invoke
s task. | 161 // Waits for one RAF call to ensure compositing update has occurred and invoke
s task. |
| 97 function awaitCompsitingUpdate(task) { | 162 function awaitCompsitingUpdate(task) { |
| 98 window.requestAnimationFrame(task); | 163 window.requestAnimationFrame(task); |
| 99 } | 164 } |
| 100 | 165 |
| 101 function rectToString(rect) { | 166 function rectToString(rect) { |
| 102 return '[' + [rect.left, rect.top, rect.width, rect.height].join(', ') + ']'
; | 167 return '[' + [rect.left, rect.top, rect.width, rect.height].join(', ') + ']'
; |
| 103 } | 168 } |
| 104 </script> | 169 </script> |
| OLD | NEW |