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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/scrollingcoordinator/non-fast-scrollable-visibility-change.html

Issue 850113003: iframe updates its parent scrollable area set when its visibility change (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Added tests Created 5 years, 11 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 | « no previous file | LayoutTests/scrollingcoordinator/non-fast-scrollable-visibility-change-expected.txt » ('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 <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 background-color: red;
11 overflow: scroll;
12 } 12 }
13 .non-fast > div { 13 .container > div {
14 height: 1000px; 14 height: 1000px;
15 width: 1000px; 15 width: 1000px;
16 display: block; 16 display: block;
17 background: linear-gradient(to bottom, red, white); 17 background: linear-gradient(to bottom, red, white);
18 } 18 }
19 .container > iframe {
20 height: 250px;
Rick Byers 2015/01/22 15:21:34 perhaps this should be a slightly different size f
majidvp 2015/01/22 22:34:56 Done.
21 width: 250px;
22 display: block;
23 border: none;
24 }
25 section#div > .container {
26 overflow: scroll;
27 }
28 section#iframe > .container {
29 overflow: hidden;
30 }
19 </style> 31 </style>
20 32
21 <div id="first" class="non-fast"> 33 <section id='div' style="display:none;">
22 This should be covered by the ONLY visible green overlay. 34 <div class="to-show container">
23 </div> 35 </div>
24 <div id="second" class="non-fast" style="margin-top:50px;"> 36 <div class="to-hide container">
25 This should not be visible. 37 <div>This should not be visible.</div>
26 <div></div> 38 </div>
27 </div> 39 </section>
40
41 <section id="iframe" style="display:none;">
42 <div class="to-show container">
43 </div>
44 <div class="to-hide container">
45 <iframe src="data:text/html;charset=utf-8,<div style='height:1000; width:100 0; background: linear-gradient(to bottom, red, white);'>">
Rick Byers 2015/01/22 15:21:34 this style is invalid and will be ignored - did yo
majidvp 2015/01/22 22:34:56 Good catch. Chrome interprets it as if it was '100
Rick Byers 2015/01/23 21:58:24 Oh, I've always seen Chrome ignore such rules. Ah
46 This should not be visible.
47 </iframe>
48 </div>
49 </section>
50
51 <p>Two 250px by 250px squares should be visible and fully covered by green overl ays.</p>
28 52
29 <div id="console"></div> 53 <div id="console"></div>
30 54
31 <script src="../resources/js-test.js"></script> 55 <script src="../resources/js-test.js"></script>
32 <script src="resources/non-fast-scrollable-region-testing.js"></script> 56 <script src="resources/non-fast-scrollable-region-testing.js"></script>
33 <script> 57 <script>
34 window.jsTestIsAsync = true; 58 window.jsTestIsAsync = true;
35 description('This test ensures that changing visibility of a non-fast ' + 59 description('This test ensures that changing visibility of a non-fast ' +
36 'scrollable area correctly updates list of non-fast scrollable ' + 60 'scrollable area correctly updates list of non-fast scrollable ' +
37 'areas. (See http://crbug.com/434982)'); 61 'areas (See http://crbug.com/434982). Two types of non-fast ' +
62 'scrollable regions are covered: div, and iframe.');
38 63
39 onload = function() { 64 onload = next;
40 awaitCompsitingUpdate(runTest);
41 };
42 65
43 function runTest() { 66 var testCases = [
44 var first = document.getElementById('first'), 67 // type, bounding box of element to show, bounding box of element to hide
45 second = document.getElementById('second'); 68 ['div', '[0, 50, 250, 250]', '[0, 350, 250, 250]'],
69 ['iframe', '[0, 50, 250, 250]', '[0, 350, 250, 250]']];
Rick Byers 2015/01/22 15:21:34 it's perhaps slightly concerning that both test ca
majidvp 2015/01/22 22:34:56 Done.
46 70
47 nonFastScrollableRects = internals.nonFastScrollableRects(document); 71 var index = 0;
48 shouldBe('nonFastScrollableRects.length', '1'); 72 function next(){
49 shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', 73 if (index < testCases.length) {
50 '[0, 300, 250, 250]'); // second div 74 var type = testCases[index][0];
75 debug('running tests for non-fast scrollable ' + type);
76 runTest.apply(this, testCases[index]);
77 } else {
78 finishJSTest();
51 79
52 // Hide container before making it non-fast scrollable to ensure any 80 // This has no functional impact just visual
53 // layout occurs while it is invisible. 81 showSectionIf(function(){return true;});
54 first.style.visibility = 'hidden'; 82 awaitCompsitingUpdate(runNonFastScrollableRegionTest);
55 makeNonFastScrollable(first); 83 }
56 84
57 // Change visibility (hidden -> visible), which should not cause any layout, 85 index++;
58 // and verify that non-fast scrollable areas are correctly updated. 86 }
87
88 // Execute tests for given non-fast scrollable type.
89 function runTest(type, elemToShowExpected, elemToHideExpected) {
90 // Hide all sections that are not relevant to this test to ensure
91 // |window.internals.nonFastScrollableRects| returns only the relevant non-
92 // fast scrollable regions.
93 showSectionIf(function(section){return section.id == type;});
94
59 awaitCompsitingUpdate(function() { 95 awaitCompsitingUpdate(function() {
60 first.style.visibility = 'visible'; 96 shouldBeEqualToString('document.getElementById("' + type + '").style.displ ay', 'block');
61 shouldBe('window.internals.needsLayoutCount()', '0');
62 97
98 var elemToShow = document.querySelector('section#' + type + '> .to-show'),
99 elemToHide = document.querySelector('section#' + type + '> .to-hide');
100
101 nonFastScrollableRects = internals.nonFastScrollableRects(document);
102 shouldBe('nonFastScrollableRects.length', '1');
103 shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', elemToHid eExpected);
104
105 // Hide container before making it non-fast scrollable to ensure any
106 // layout occurs while it is invisible.
107 elemToShow.style.visibility = 'hidden';
108 makeNonFastScrollable(elemToShow, type);
109
110 // Change visibility (hidden -> visible), which should not cause any layou t,
111 // and verify that non-fast scrollable areas are correctly updated.
63 awaitCompsitingUpdate(function() { 112 awaitCompsitingUpdate(function() {
64 nonFastScrollableRects = internals.nonFastScrollableRects(document); 113 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'); 114 shouldBe('window.internals.needsLayoutCount()', '0');
74 115
75 awaitCompsitingUpdate(function() { 116 awaitCompsitingUpdate(function() {
76 // This has no functional impact just visual 117 nonFastScrollableRects = internals.nonFastScrollableRects(document);
77 runNonFastScrollableRegionTest(); 118 shouldBe('nonFastScrollableRects.length', '2');
119 shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', elemT oShowExpected);
120 shouldBeEqualToString('rectToString(nonFastScrollableRects[1])', elemT oHideExpected);
78 121
79 nonFastScrollableRects = internals.nonFastScrollableRects(document); 122 // Change visibility (visible -> hidden)
80 shouldBe('nonFastScrollableRects.length', '1'); 123 elemToHide.style.visibility = 'hidden';
81 shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', 124 shouldBe('window.internals.needsLayoutCount()', '0');
82 '[0, 0, 250, 250]'); // first div
83 125
84 finishJSTest(); 126 awaitCompsitingUpdate(function() {
127 nonFastScrollableRects = internals.nonFastScrollableRects(document);
128 shouldBe('nonFastScrollableRects.length', '1');
129 shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', ele mToShowExpected);
130 next();
131 });
85 }); 132 });
86 }); 133 });
87 }); 134 });
88 } 135 }
89 136
90 // Makes the container non-fast scrollable area by appending a large element t o it. 137 // Makes the container non-fast scrollable area by appending a large element t o it.
Rick Byers 2015/01/22 15:21:34 nit: this makes the container "scrollable", right?
majidvp 2015/01/22 22:34:56 Changed the function name to be more appropriate a
91 function makeNonFastScrollable(container) { 138 function makeNonFastScrollable(container, type) {
92 var inner = document.createElement('div'); 139 var inner;
93 container.appendChild(inner); 140 switch (type) {
141 case 'div':
142 inner = '<div>This should be covered by a green overlay.</div>';
143 break;
144 case 'iframe':
145 inner = '<iframe id="iframe" src="data:text/html;charset=utf-8,<div style =\'height:1000; width:1000; background: linear-gradient(to bottom, green, white) ;\'>This should be covered by a green overlay.</div>"></iframe>';
Rick Byers 2015/01/22 15:21:34 Again your style is busted. So how is this worki
majidvp 2015/01/22 22:34:56 Fixed. Chrome interprets 1000 as 1000px.
146 break;
147 }
148 container.innerHTML = inner;
149 }
150
151 // Shows sections that pass condition but hides others
152 function showSectionIf(condition) {
153 var sections = document.querySelectorAll('section');
154 for (var i = 0; i < sections.length; i++)
155 sections[i].style.display = condition(sections[i]) ? 'block' : 'none';
94 } 156 }
95 157
96 // Waits for one RAF call to ensure compositing update has occurred and invoke s task. 158 // Waits for one RAF call to ensure compositing update has occurred and invoke s task.
97 function awaitCompsitingUpdate(task) { 159 function awaitCompsitingUpdate(task) {
98 window.requestAnimationFrame(task); 160 window.requestAnimationFrame(task);
99 } 161 }
100 162
101 function rectToString(rect) { 163 function rectToString(rect) {
102 return '[' + [rect.left, rect.top, rect.width, rect.height].join(', ') + ']' ; 164 return '[' + [rect.left, rect.top, rect.width, rect.height].join(', ') + ']' ;
103 } 165 }
104 </script> 166 </script>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/scrollingcoordinator/non-fast-scrollable-visibility-change-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698