LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling-after-style-change.html - Issue 244193002: Enable universal accelerated overflow scroll

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

Issue 244193002: Enable universal accelerated overflow scroll (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Update test expectations for crashing test. Created 6 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 | Annotate | Revision Log

« no previous file with comments | « LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling-after-sibling-z-index-change-expected.txt ('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') | Hide Comments ('s')

OLD	NEW
	(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();

52

53 if (window.internals) {

54 window.internals.settings.setAcceleratedCompositingForOverflowScrollEnable d(true);

55 window.internals.settings.setCompositorDrivenAcceleratedScrollingEnabled(f alse);

56 }

57

58 function writeResult(iteration, expectedResult)

59 {

60 document.body.offsetTop;

61

62 if (!window.internals)

63 return;

64

65 if (debug)

66 writeDebug(iteration);

67

68 var result = document.getElementById('result');

69 result.innerText += "iteration " + iteration + ": ";

70

71 var container = document.getElementById('container');

72 var containerOptedIn = window.internals.needsCompositedScrolling(container );

73 if (containerOptedIn === expectedResult)

74 result.innerText += "PASS, ";

75 else

76 result.innerText += "FAIL, ";

77

78 if (containerOptedIn)

79 result.innerText += "container is composited.\n";

80 else

81 result.innerText += "container is not composited.\n";

82 }

83

84 function writeDebug(iteration)

85 {

86 var result = document.getElementById('result');

87 var content = document.getElementById('content');

88 var container = document.getElementById('container');

89 var contentPredecessor = document.getElementById('contentPredecessor');

90 var contentSuccessor = document.getElementById('contentSuccessor');

91

92 var elements = [container, contentPredecessor, content, contentSuccessor];

93

94 for (var i = 0; i < elements.length; i++) {

95 var element = elements[i];

96 var computedStyle = getComputedStyle(element);

97

98 result.innerText += "iteration " + iteration + ":\n";

99 result.innerText += "\telement: " + element.id + "\n";

100 result.innerText += "\theight: " + computedStyle.height + "\n";

101 result.innerText += "\twidth: " + computedStyle.width + "\n";

102 result.innerText += "\toverflowX: " + computedStyle.overflowX + "\n";

103 result.innerText += "\toverflowY: " + computedStyle.overflowY + "\n";

104 result.innerText += "\tdisplay: " + computedStyle.display + "\n";

105 result.innerText += "\tzIndex: " + computedStyle.zIndex + "\n";

106 }

107 }

108

109 function doSuccessorTest(test, testIndex)

110 {

111 container = document.getElementById('container');

112 contentSuccessor = document.getElementById('contentSuccessor');

113

114 content.style.width = test['width'];

115 content.style.height = test['height'];

116 container.style.overflowX = test['overflowX'];

117 container.style.overflowY = test['overflowY'];

118 contentSuccessor.style.display = test['display'];

119

120 var descendantCausesOverflow = test['width'] === '1000px' \|\| test['height' ] === '1000px' \|\| test['display'] === 'block';

121 var containerScrolls = test['overflowX'] === 'scroll' \|\| test['overflowY'] === 'scroll';

122

123 var shouldOptIn = descendantCausesOverflow && containerScrolls;

124

125 writeResult(testIndex, shouldOptIn);

126 }

127

128 function doPredecessorTest(test, testIndex)

129 {

130 container = document.getElementById('container');

131 contentPredecessor = document.getElementById('contentPredecessor');

132

133 contentPredecessor.style.display = test['display'];

134 container.style.zIndex = test['zIndex'];

135

136 var containerIsAStackingContext = test['zIndex'] === '1';

137 var predecessorIsInvisible = test['display'] === 'none';

138

139 // If the contentPredecessor is visible and the container is not a stackin g

140 // context, then a non-descendant appears between our descendants; we

141 // fail the contiguity check and we should not opt in. If we are a

142 // stacking context or the predecessor is gone, we can opt in.

143 var shouldOptIn = containerIsAStackingContext \|\| predecessorIsInvisible;

144

145 writeResult(testIndex, shouldOptIn);

146 }

147

148 function runTests()

149 {

150 var successorTests = [

151 { 'width': '1px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'none' },

152 { 'width': '1px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'block' },

153 { 'width': '1px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'none' },

154 { 'width': '1px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'block' },

155 { 'width': '1px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': ' visible', 'display': 'none' },

156 { 'width': '1px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': ' visible', 'display': 'block' },

157 { 'width': '1px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': ' scroll', 'display': 'none' },

158 { 'width': '1px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': ' scroll', 'display': 'block' },

159 { 'width': '1px', 'height': '1000px', 'overflowX': 'visible', 'overflowY ': 'visible', 'display': 'none' },

160 { 'width': '1px', 'height': '1000px', 'overflowX': 'visible', 'overflowY ': 'visible', 'display': 'block' },

161 { 'width': '1px', 'height': '1000px', 'overflowX': 'visible', 'overflowY ': 'scroll', 'display': 'none' },

162 { 'width': '1px', 'height': '1000px', 'overflowX': 'visible', 'overflowY ': 'scroll', 'display': 'block' },

163 { 'width': '1px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY' : 'visible', 'display': 'none' },

164 { 'width': '1px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY' : 'visible', 'display': 'block' },

165 { 'width': '1px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY' : 'scroll', 'display': 'none' },

166 { 'width': '1px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY' : 'scroll', 'display': 'block' },

167 { 'width': '1000px', 'height': '1px', 'overflowX': 'visible', 'overflowY ': 'visible', 'display': 'none' },

168 { 'width': '1000px', 'height': '1px', 'overflowX': 'visible', 'overflowY ': 'visible', 'display': 'block' },

169 { 'width': '1000px', 'height': '1px', 'overflowX': 'visible', 'overflowY ': 'scroll', 'display': 'none' },

170 { 'width': '1000px', 'height': '1px', 'overflowX': 'visible', 'overflowY ': 'scroll', 'display': 'block' },

171 { 'width': '1000px', 'height': '1px', 'overflowX': 'scroll', 'overflowY' : 'visible', 'display': 'none' },

172 { 'width': '1000px', 'height': '1px', 'overflowX': 'scroll', 'overflowY' : 'visible', 'display': 'block' },

173 { 'width': '1000px', 'height': '1px', 'overflowX': 'scroll', 'overflowY' : 'scroll', 'display': 'none' },

174 { 'width': '1000px', 'height': '1px', 'overflowX': 'scroll', 'overflowY' : 'scroll', 'display': 'block' },

175 { 'width': '1000px', 'height': '1000px', 'overflowX': 'visible', 'overfl owY': 'visible', 'display': 'none' },

176 { 'width': '1000px', 'height': '1000px', 'overflowX': 'visible', 'overfl owY': 'visible', 'display': 'block' },

177 { 'width': '1000px', 'height': '1000px', 'overflowX': 'visible', 'overfl owY': 'scroll', 'display': 'none' },

178 { 'width': '1000px', 'height': '1000px', 'overflowX': 'visible', 'overfl owY': 'scroll', 'display': 'block' },

179 { 'width': '1000px', 'height': '1000px', 'overflowX': 'scroll', 'overflo wY': 'visible', 'display': 'none' },

180 { 'width': '1000px', 'height': '1000px', 'overflowX': 'scroll', 'overflo wY': 'visible', 'display': 'block' },

181 { 'width': '1000px', 'height': '1000px', 'overflowX': 'scroll', 'overflo wY': 'scroll', 'display': 'none' },

182 { 'width': '1000px', 'height': '1000px', 'overflowX': 'scroll', 'overflo wY': 'scroll', 'display': 'block' }

183 ];

184

185 var predecessorTests = [

186 { 'display': 'block', 'zIndex': '1' },

187 { 'display': 'block', 'zIndex': 'auto' },

188 { 'display': 'none', 'zIndex': '1' },

189 { 'display': 'none', 'zIndex': 'auto' },

190 ];

191

192 var testIndex = 0;

193 writeResult(testIndex++, false);

194

195 for (var i = 0; i < successorTests.length; i++)

196 doSuccessorTest(successorTests[i], testIndex++);

197

198 content.style.height = '1000px';

199 content.style.width = '1000px';

200 container.style.overflowX = 'scroll';

201 container.style.overflowY = 'scroll';

202 contentSuccessor.style.display = 'none';

203 predecessor.style.display = 'block';

204

205 writeResult(testIndex++, true);

206

207 for (var i = 0; i < predecessorTests.length; i++)

208 doPredecessorTest(predecessorTests[i], testIndex++);

209 }

210

211 window.addEventListener('load', runTests, false);

212 </script>

213 </head>

214

215 <body>

216 <div id="predecessor"></div>

217 <div id="container">

218 <div id="contentPredecessor"></div>

219 <div id="content"></div>

220 <div id="contentSuccessor"></div>

221 </div>

222 <pre id="result"></pre>

223 </body>

224 </html>

OLD	NEW