LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling-after-style-change.html - Issue 13913013: Only update composited scrolling state when necessary

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: . 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 | « no previous file | LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling-after-style-change-expected.txt » ('j') | Source/WebCore/rendering/RenderLayer.cpp » ('J')
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 type="text/javascript" charset="utf-8">
	Julien - ping for review 2013/04/09 21:06:43 Let's remove these unneeded attribute, they don't Let's remove these unneeded attribute, they don't add anything and move the focus away from the important bits. Ian Vollick 2013/04/12 03:53:14 Done. Show quoted text On 2013/04/09 21:06:43, jchaffraix wrote: > Let's remove these unneeded attribute, they don't add anything and move the > focus away from the important bits. Done.
	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);
	Julien - ping for review 2013/04/09 21:06:43 you don't check if window.internals is available h you don't check if window.internals is available here. As a rule if this needs to be run through DRT, you are better off just bailing out early and saying this is an automated test. Ian Vollick 2013/04/12 03:53:14 I've found it very useful to be able to view this Show quoted text On 2013/04/09 21:06:43, jchaffraix wrote: > you don't check if window.internals is available here. As a rule if this needs > to be run through DRT, you are better off just bailing out early and saying this > is an automated test. I've found it very useful to be able to view this test in a browser and set break points during execution for debugging. Is the early out at the beginning of this function maybe enough?
	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>

OLD	NEW