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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling-after-style-change.html

Issue 13913013: Only update composited scrolling state when necessary (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Updating test expectations. Created 7 years, 8 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/compositing/overflow/automatically-opt-into-composited-scrolling-after-style-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
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 #predecessor {
6 width: 70px;
7 height: 70px;
8 left: 25px;
9 top: 25px;
10 z-index: 2;
11 background-color: red;
12 position: absolute;
13 display: none;
14 }
15
16 #container {
17 width: 500px;
18 height: 500px;
19 position: absolute;
20 }
21
22 #content {
23 width: 1px;
24 height: 1px;
25 background-color: yellow;
26 position: relative;
27 }
28
29 #contentPredecessor {
30 z-index: 3;
31 width: 50px;
32 height: 50px;
33 background-color: blue;
34 position: relative;
35 display: none;
36 }
37
38 #contentSuccessor {
39 width: 1000px;
40 height: 1000px;
41 background-color: green;
42 position: relative;
43 display: none;
44 }
45 </style>
46
47 <script>
48 var debug = false;
49
50 if (window.testRunner)
51 testRunner.dumpAsText(false);
52
53 if (window.internals)
54 window.internals.settings.setAcceleratedCompositingForOverflowScrollEnable d(true);
55
56 function writeResult(iteration, expectedResult)
57 {
58 document.body.offsetTop;
59
60 if (!window.internals)
61 return;
62
63 if (debug)
64 writeDebug(iteration);
65
66 var result = document.getElementById('result');
67 result.innerText += "iteration " + iteration + ": ";
68
69 var hasLayerTree = !!window.internals.layerTreeAsText(document);
70 if (hasLayerTree === expectedResult)
71 result.innerText += "PASS, ";
72 else
73 result.innerText += "FAIL, ";
74
75 if (hasLayerTree)
76 result.innerText += "has layer tree.\n";
77 else
78 result.innerText += "does not have layer tree.\n";
79 }
80
81 function writeDebug(iteration)
82 {
83 var result = document.getElementById('result');
84 var content = document.getElementById('content');
85 var container = document.getElementById('container');
86 var contentPredecessor = document.getElementById('contentPredecessor');
87 var contentSuccessor = document.getElementById('contentSuccessor');
88
89 var elements = [container, contentPredecessor, content, contentSuccessor];
90
91 for (var i = 0; i < elements.length; i++) {
92 var element = elements[i];
93 var computedStyle = getComputedStyle(element);
94
95 result.innerText += "iteration " + iteration + ":\n";
96 result.innerText += "\telement: " + element.id + "\n";
97 result.innerText += "\theight: " + computedStyle.height + "\n";
98 result.innerText += "\twidth: " + computedStyle.width + "\n";
99 result.innerText += "\toverflowX: " + computedStyle.overflowX + "\n";
100 result.innerText += "\toverflowY: " + computedStyle.overflowY + "\n";
101 result.innerText += "\tdisplay: " + computedStyle.display + "\n";
102 result.innerText += "\tzIndex: " + computedStyle.zIndex + "\n";
103 }
104 }
105
106 function doSuccessorTest(test, testIndex)
107 {
108 container = document.getElementById('container');
109 contentSuccessor = document.getElementById('contentSuccessor');
110
111 content.style.width = test['width'];
112 content.style.height = test['height'];
113 container.style.overflowX = test['overflowX'];
114 container.style.overflowY = test['overflowY'];
115 contentSuccessor.style.display = test['display'];
116
117 var descendantCausesOverflow = test['width'] === '1000px' || test['height' ] === '1000px' || test['display'] === 'block';
118 var containerScrolls = test['overflowX'] === 'scroll' || test['overflowY'] === 'scroll';
119
120 var shouldOptIn = descendantCausesOverflow && containerScrolls;
121
122 writeResult(testIndex, shouldOptIn);
123 }
124
125 function doPredecessorTest(test, testIndex)
126 {
127 container = document.getElementById('container');
128 contentPredecessor = document.getElementById('contentPredecessor');
129
130 contentPredecessor.style.display = test['display'];
131 container.style.zIndex = test['zIndex'];
132
133 var containerIsAStackingContext = test['zIndex'] === '1';
134 var predecessorIsInvisible = test['display'] === 'none';
135
136 // If the contentPredecessor is visible and the container is not a stackin g
137 // context, then a non-descendant appears between our descendants; we
138 // fail the contiguity check and we should not opt in. If we are a
139 // stacking context or the predecessor is gone, we can opt in.
140 var shouldOptIn = containerIsAStackingContext || predecessorIsInvisible;
141
142 writeResult(testIndex, shouldOptIn);
143 }
144
145 function runTests()
146 {
147 var successorTests = [
148 { 'width': '1px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'none' },
149 { 'width': '1px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'block' },
150 { 'width': '1px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'none' },
151 { 'width': '1px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'block' },
152 { 'width': '1px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': ' visible', 'display': 'none' },
153 { 'width': '1px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': ' visible', 'display': 'block' },
154 { 'width': '1px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': ' scroll', 'display': 'none' },
155 { 'width': '1px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': ' scroll', 'display': 'block' },
156 { 'width': '1px', 'height': '1000px', 'overflowX': 'visible', 'overflowY ': 'visible', 'display': 'none' },
157 { 'width': '1px', 'height': '1000px', 'overflowX': 'visible', 'overflowY ': 'visible', 'display': 'block' },
158 { 'width': '1px', 'height': '1000px', 'overflowX': 'visible', 'overflowY ': 'scroll', 'display': 'none' },
159 { 'width': '1px', 'height': '1000px', 'overflowX': 'visible', 'overflowY ': 'scroll', 'display': 'block' },
160 { 'width': '1px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY' : 'visible', 'display': 'none' },
161 { 'width': '1px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY' : 'visible', 'display': 'block' },
162 { 'width': '1px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY' : 'scroll', 'display': 'none' },
163 { 'width': '1px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY' : 'scroll', 'display': 'block' },
164 { 'width': '1000px', 'height': '1px', 'overflowX': 'visible', 'overflowY ': 'visible', 'display': 'none' },
165 { 'width': '1000px', 'height': '1px', 'overflowX': 'visible', 'overflowY ': 'visible', 'display': 'block' },
166 { 'width': '1000px', 'height': '1px', 'overflowX': 'visible', 'overflowY ': 'scroll', 'display': 'none' },
167 { 'width': '1000px', 'height': '1px', 'overflowX': 'visible', 'overflowY ': 'scroll', 'display': 'block' },
168 { 'width': '1000px', 'height': '1px', 'overflowX': 'scroll', 'overflowY' : 'visible', 'display': 'none' },
169 { 'width': '1000px', 'height': '1px', 'overflowX': 'scroll', 'overflowY' : 'visible', 'display': 'block' },
170 { 'width': '1000px', 'height': '1px', 'overflowX': 'scroll', 'overflowY' : 'scroll', 'display': 'none' },
171 { 'width': '1000px', 'height': '1px', 'overflowX': 'scroll', 'overflowY' : 'scroll', 'display': 'block' },
172 { 'width': '1000px', 'height': '1000px', 'overflowX': 'visible', 'overfl owY': 'visible', 'display': 'none' },
173 { 'width': '1000px', 'height': '1000px', 'overflowX': 'visible', 'overfl owY': 'visible', 'display': 'block' },
174 { 'width': '1000px', 'height': '1000px', 'overflowX': 'visible', 'overfl owY': 'scroll', 'display': 'none' },
175 { 'width': '1000px', 'height': '1000px', 'overflowX': 'visible', 'overfl owY': 'scroll', 'display': 'block' },
176 { 'width': '1000px', 'height': '1000px', 'overflowX': 'scroll', 'overflo wY': 'visible', 'display': 'none' },
177 { 'width': '1000px', 'height': '1000px', 'overflowX': 'scroll', 'overflo wY': 'visible', 'display': 'block' },
178 { 'width': '1000px', 'height': '1000px', 'overflowX': 'scroll', 'overflo wY': 'scroll', 'display': 'none' },
179 { 'width': '1000px', 'height': '1000px', 'overflowX': 'scroll', 'overflo wY': 'scroll', 'display': 'block' }
180 ];
181
182 var predecessorTests = [
183 { 'display': 'block', 'zIndex': '1' },
184 { 'display': 'block', 'zIndex': 'auto' },
185 { 'display': 'none', 'zIndex': '1' },
186 { 'display': 'none', 'zIndex': 'auto' },
187 ];
188
189 var testIndex = 0;
190 writeResult(testIndex++, false);
191
192 for (var i = 0; i < successorTests.length; i++)
193 doSuccessorTest(successorTests[i], testIndex++);
194
195 content.style.height = '1000px';
196 content.style.width = '1000px';
197 container.style.overflowX = 'scroll';
198 container.style.overflowY = 'scroll';
199 contentSuccessor.style.display = 'none';
200 predecessor.style.display = 'block';
201
202 writeResult(testIndex++, true);
203
204 for (var i = 0; i < predecessorTests.length; i++)
205 doPredecessorTest(predecessorTests[i], testIndex++);
206 }
207
208 window.addEventListener('load', runTests, false);
209 </script>
210 </head>
211
212 <body>
213 <div id="predecessor"></div>
214 <div id="container">
215 <div id="contentPredecessor"></div>
216 <div id="content"></div>
217 <div id="contentSuccessor"></div>
218 </div>
219 <pre id="result"></pre>
220 </body>
221 </html>
OLDNEW
« no previous file with comments | « LayoutTests/TestExpectations ('k') | LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling-after-style-change-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698