LayoutTests/compositing/overflow/build-paint-order-list-where-opt-in-decisions-can-affect-each-other.html - Issue 13467028: Add an intermediate function to generate 2 paint-order lists.

Side by Side Diff: LayoutTests/compositing/overflow/build-paint-order-list-where-opt-in-decisions-can-affect-each-other.html

Issue 13467028: Add an intermediate function to generate 2 paint-order lists. (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: minor fix - remove duplicate method 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 | Annotate | Revision Log

« no previous file with comments | « no previous file | LayoutTests/compositing/overflow/build-paint-order-list-where-opt-in-decisions-can-affect-each-other-expected.txt » ('j') | LayoutTests/compositing/overflow/build-paint-order-lists.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2

	3 <html><head>

	4 <style>

	5 .filler {

	6 background-color: #CC9900;

	7 margin: 20px;

	8 border-style: solid;

	9 border-width: 1px;

	10 width: 400px;

	11 height: 100px;

	12 }

	13

	14 .negativechild {

	15 z-index: -1;

	16 position: relative;

	17 }

	18

	19 #parentscrollinglayer {

	20 background-color: #CC9999;

	21 height: 200px;

	22 width: 500px;

	23 overflow-y: scroll;

	24 }

	25

	26 #childscrollinglayer {

	27 margin: 30px;

	28 position: relative;

	29 left: 20px;

	30 top: 20px;

	31 background-color: #990066;

	32 height: 200px;

	33 width: 300px;

	34 overflow-x: scroll;

	35 }

	36 </style>

	37

	38 <script src="resources/build-paint-order-lists.js"></script>

	39 <script>

	40 var debugMode = false;

	41

	42 if (window.testRunner)

	43 testRunner.dumpAsText();

	44

	45 function write(str)

	46 {

	47 var pre = document.getElementById('console');

	48 var text = document.createTextNode(str + '\n');

	49 pre.appendChild(text);

	50 }

	51

	52 function getStackingOrder()

	53 {

	54 var divElements = [];

	55 // Force a style recalc.

	56 document.body.offsetTop;

	57

	58 var stackingOrder = window.internals.nodesFromRect(document, 100, 75, 200, 200, 200, 200, false, false, false);

	59

	60 for (var i = 0; i < stackingOrder.length; ++i)

	61 if (stackingOrder[i].nodeName === "DIV")

	62 divElements.push(stackingOrder[i]);

	63

	64 return divElements;

	65 }

	66

	67 function compareStackingOrderWithPaintOrder(stackingOrder, paintOrder)

	68 {

	69 if (debugMode) {

	70 write("paint:")

	71 for (var i = 0; i < paintOrder.length; i++)

	72 write(paintOrder[i].id + " " + paintOrder[i].className + " " + paintOr der[i].tagName);

	73

	74 write("stacking:")

	75 for (var i = 0; i < stackingOrder.length; i++)

	76 write(stackingOrder[i].id + " " + stackingOrder[i].className + " " + s tackingOrder[i].tagName);

	77 }

	78

	79 for (var i = 0, j = 0; i < stackingOrder.length && j < paintOrder.length; i++) {

	80 // Ignore elements with class "filler negativechild". These elements are

	81 // irrelevant to stacking order, since they do not overlap with the

	82 // elements we care about. They exist in the paint order lists because

	83 // they are still descendants of the same stacking context, but they

	84 // will not affect visual layout.

	85 while (j < paintOrder.length && paintOrder[paintOrder.length - j - 1].cl assName === "filler negativechild")

	86 j++;

	87

	88 if (j >= paintOrder.length)

	89 break;

	90

	91 if (stackingOrder[i] === paintOrder[paintOrder.length - j - 1])

	92 j++;

	93 }

	94

	95 if (debugMode)

	96 write(stackingOrder.length + " " + i + " " + paintOrder.length + " " + j );

	97

	98 return j === paintOrder.length;

	99 }

	100

	101 function doTest()

	102 {

	103 var parentscrollinglayer = document.getElementById('parentscrollinglayer') ;

	104 var childscrollinglayer = document.getElementById('childscrollinglayer');

	105

	106 if (window.internals) {

	107 // Here we want to compare paint order lists before and after promotion

	108 // to the actual stacking order as determined by hit-testing. So we

	109 // first force the element not to promote, then compute its paint and

	110 // stacking order lists. We then force the element to opt in, and

	111 // generate the paint and stacking order lists after opt-in.

	112 //

	113 // The paint order lists should exactly match the stacking order lists

	114 // (modulo children that fall outside of the hit-testing area

	115 // on-screen), both before and after promotion.

	116 parentscrollinglayer.style.webkitTransform = 'translateZ(0px)';

	117 document.body.offsetTop;

	118

	119 window.internals.settings.setAcceleratedCompositingForOverflowScrollEnab led(false);

	120 parentscrollinglayer.style.webkitTransform = '';

	121

	122 var oldStackingOrder = getStackingOrder();

	123 var oldPaintOrder = getPaintOrder(childscrollinglayer);

	124

	125 window.internals.settings.setAcceleratedCompositingForOverflowScrollEnab led(true);

	126 parentscrollinglayer.style.webkitTransform = 'translateZ(0px)';

	127

	128 var newStackingOrder = getStackingOrder();

	129 var newPaintOrder = getPaintOrder(childscrollinglayer);

	130

	131 // The getPaintOrder() function should return a pair of paint orders.

	132 // One before promotion and one after. This pair of lists should remain

	133 // identical whether the element is actually currently promoted or not,

	134 // its purpose is to generate hypothetical pre- and post-lists to

	135 // determine if the element is promotable.

	136 if (!comparePaintOrderLists(oldPaintOrder, newPaintOrder))

	137 write("FAIL - paint order lists not identical before/after promotion") ;

	138

	139 if (!compareStackingOrderWithPaintOrder(oldStackingOrder, oldPaintOrder. beforePromote))

	140 write("FAIL - paint order list before promote doesn't match stacking o rder");
	Julien - ping for review 2013/04/24 15:44:01 Does it make sense for these failure to not return Does it make sense for these failure to not return? (ie continue testing and finally print PASS) hartmanng 2013/04/24 17:02:41 No, you're right, it probably doesn't make sense t Show quoted text On 2013/04/24 15:44:01, Julien Chaffraix wrote: > Does it make sense for these failure to not return? (ie continue testing and > finally print PASS) No, you're right, it probably doesn't make sense to print PASS at the end. I'd rather we not return immediately though, it seems like we can get more information if we print out all the failures instead of stopping after the first one. I've wrapped the write("PASS...") in an if statement so that we only print PASS if we haven't already failed somewhere.
	141

	142 if (!compareStackingOrderWithPaintOrder(newStackingOrder, oldPaintOrder. afterPromote))

	143 write("FAIL - paint order list after promote doesn't match stacking or der");

	144

	145 var childScrollingLayerOccurrences = countOccurrencesOfElementInPaintOrd erList(oldPaintOrder.beforePromote, childscrollinglayer);

	146 if (childScrollingLayerOccurrences !== 1)

	147 write("FAIL - paint order list before promote contains " + childScroll ingLayerOccurrences + " occurrences of child scrolling layer. Should be exactly 1.");

	148

	149 childScrollingLayerOccurrences = countOccurrencesOfElementInPaintOrderLi st(oldPaintOrder.afterPromote, childscrollinglayer);

	150 if (childScrollingLayerOccurrences !== 1)

	151 write("FAIL - paint order list after promote contains " + childScrolli ngLayerOccurrences + " occurrences of child scrolling layer. Should be exactly 1 .");

	152

	153 write("PASS - did not crash.");

	154 }

	155 }

	156

	157 window.addEventListener('load', doTest, false);

	158 </script>

	159 </head>

	160 <body>

	161 <div class="filler"></div>

	162 <div id="parentscrollinglayer">

	163 <div id="childscrollinglayer">

	164 <div class="filler"></div>

	165 </div>

	166 <div class="filler"></div>

	167 <div class="filler"></div>

	168 </div>

	169 <div id="fillerchild1" class="filler negativechild"></div>

	170 <div id="fillerchild2" class="filler negativechild"></div>

	171 <div id="fillerchild3" class="filler negativechild"></div>

	172 <div id="fillerchild4" class="filler negativechild"></div>

	173 <pre id="console"></pre>

	174 </body>

	175 </html>

OLD	NEW