Update automatically-opt-into-composited-scrolling.html

LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling.js

+var debugMode = false;
+
+if (window.testRunner)
+  testRunner.dumpAsText();
+
+function write(str)
+{
+  var pre = document.getElementById('console');
+  var text = document.createTextNode(str + '\n');
+  pre.appendChild(text);
+}
+
+function didOptIn(element)
+{
+  // Force a style recalc.
+  document.body.offsetTop;
+
+  // Force a layout.
+  window.internals.boundingBox(element);
+  var layerTree = window.internals.layerTreeAsText(document);

[Julien - ping for review, 2013/04/09 17:41:59]

This is really magical unless you start to pull the code fro m layerTreeAsText.
It is also very fragile as if you had a composited layer unrelated to what you
are testing, this will happily return true, regardless of whether you opted in.

[hartmanng, 2013/04/09 20:40:09]

Good point, although in this case there is only 1 div that could become
composited, this js file could feasibly be included in more complex layout tests
down the road.

I switched to a better way using window.internals.nonFastScrollableRects().

+
+  if (debugMode)
+      write(layerTree);
+
+  return !!layerTree;
+}
+
+function getStackingOrder(element)
+{
+  var divElements = [];
+  // Force a style recalc.
+  document.body.offsetTop;
+
+  // Force a layout.
+  window.internals.boundingBox(element);

[Julien - ping for review, 2013/04/09 17:41:59]

I don't understand why you need this line as document.body.offsetTop should
force a layout too!

Also you probably want to avoid using internals for something this trivial:
element.offsetTop;

[hartmanng, 2013/04/09 20:40:09]

Ah, didn't realize that. Removed.

+
+  var errorCode = 0;

[Julien - ping for review, 2013/04/09 17:41:59]

errorCode is useless and should be removed: the funtion raises an exception if
something goes wrong. We also never check it.

[hartmanng, 2013/04/09 20:40:09]

Done.

+  var stackingOrder = window.internals.nodesFromRect(document, 100, 75, 200, 200, 200, 200, false, false, errorCode);
+
+  for (var i = 0; i < stackingOrder.length; ++i)
+    if (stackingOrder[i].nodeName === "DIV")
+      divElements.push(stackingOrder[i]);
+
+  return divElements;
+}
+
+function addDomElement(elementType, className, id, parent)
+{
+  var element = document.createElement(elementType);
+  element.setAttribute("class", className);
+  element.setAttribute("id", id);
+  if (parent === "body")
+    document.body.appendChild(element);
+  else
+    document.getElementById(parent).appendChild(element);
+}
+
+function buildDom()
+{
+  addDomElement("div", "", "ancestor", "body");
+  addDomElement("div", "positioned", "predecessor", "ancestor");
+  addDomElement("div", "container", "container", "ancestor");
+  addDomElement("div", "scrolled", "firstChild", "container");
+  addDomElement("div", "scrolled", "secondChild", "container");
+  addDomElement("div", "", "normalFlow", "container");
+  addDomElement("div", "positioned", "successor", "ancestor");
+  addDomElement("pre", "", "console", "body");
+}
+
+var permutationIteration = 0;
+
+// We've already decided on the ordering of the elements, now we need to do the
+// rest of the permutations.
+function permuteWithFixedOrdering(didPass, siblingIndex, containerIndex, firstChildIndex, secondChildIndex, numElementsWithZIndexZero)
+{
+  if (firstChildIndex > secondChildIndex)
+    return;
+  // One of the two children must be immediately to the right of us.
+  if (numElementsWithZIndexZero === 3 && containerIndex !== firstChildIndex - 1 && containerIndex !== secondChildIndex - 1)
+    return;
+  // If we have 2 elements with z-index:0, they will be the container and the
+  // sibling (we don't care about the case when the container and a child are
+  // both z-index:0 because the tree order would ensure that ordering anyway).
+  // The two elements with z-index:0 need to be adjacent in the ordering.
+  if (numElementsWithZIndexZero === 2 && containerIndex !== siblingIndex - 1 && containerIndex !== siblingIndex + 1)
+    return;
+
+  for (var containerIsPositioned = 0; containerIsPositioned <= 1; ++containerIsPositioned) {
+    for (var hasPositionedAncestor = 0; hasPositionedAncestor <= 1; ++hasPositionedAncestor) {
+      if (containerIsPositioned === 1 && hasPositionedAncestor === 1)
+        continue;
+      for (var siblingPrecedesContainer = 0; siblingPrecedesContainer <= 1; ++siblingPrecedesContainer) {
+        // If the sibling and the container both have z-index: 0, we only have
+        // one choice for who gets to be the sibling. For example, if the
+        // sibling is supposed to precede us in paint order, but we both have
+        // z-index: 0, the order will depend entirely on tree order, so we have
+        // to choose the predecessor as the sibling. If all elements have unique
+        // z-indices, either the predecessor or the successor could be our
+        // sibling; the z-indices will ensure that the paint order is correct.
+        if (numElementsWithZIndexZero >= 2 && siblingPrecedesContainer === 1)
+          continue;
+
+        var sibling = predecessor;
+        var toHide = successor;
+        if ((numElementsWithZIndexZero === 1 && siblingPrecedesContainer === 0) ||
+            (numElementsWithZIndexZero >= 2 && siblingIndex > containerIndex)) {
+          sibling = successor;
+          toHide = predecessor;
+        }
+
+        var ordering = [ null, null, null, null ];
+        ordering[siblingIndex] = sibling;
+        ordering[containerIndex] = hasPositionedAncestor === 1 ? ancestor : container;
+        ordering[firstChildIndex] = firstChild;
+        ordering[secondChildIndex] = secondChild;
+
+        toHide.style.display = 'none';
+        sibling.style.display = '';
+
+        var positioned = null;
+        if (containerIsPositioned === 1) {
+          container.style.position = 'relative';
+          positioned = container;
+        } else
+          container.style.position = '';
+
+        if (hasPositionedAncestor === 1) {
+          ancestor.style.position = 'relative';
+          positioned = ancestor;
+        } else
+          ancestor.style.position = '';
+
+        var currentZIndex = siblingPrecedesContainer === 1 ? 0 : -1;
+        for (var currentIndex = containerIndex - 1; currentIndex >= 0; --currentIndex) {
+          ordering[currentIndex].style.zIndex = currentZIndex.toString();
+          currentZIndex--;
+        }
+
+        currentZIndex = 1;
+        for (var currentIndex = containerIndex + 1; currentIndex < 4; ++currentIndex) {
+          ordering[currentIndex].style.zIndex = currentZIndex.toString();
+          currentZIndex++;
+        }
+
+        if (numElementsWithZIndexZero >= 1)
+          ordering[containerIndex].style.zIndex = '0';
+
+        if (numElementsWithZIndexZero >= 2)
+            ordering[siblingIndex].style.zIndex = '0';
+
+        // We want the first descendant succeeding us in the ordering to get
+        // z-index: 0.
+        if (numElementsWithZIndexZero === 3) {
+          if (firstChildIndex > containerIndex)
+            ordering[firstChildIndex].style.zIndex = '0';
+          else
+            ordering[secondChildIndex].style.zIndex = '0';
+        }
+
+        if (window.internals) {

[Julien - ping for review, 2013/04/09 17:41:59]

I don't see why you check window.internals here

[hartmanng, 2013/04/09 20:40:09]

The particular didPass() function in this case requires internals to be able to
do anything useful. Moved the window.internals check inside that function, it
makes a lot more sense there.

[Julien - ping for review, 2013/04/09 22:05:06]

Ah, it makes sense indeed. You could also require this test to run under DRT and
bail out early with an error if it is not the case (I don't see what you would
get by running it manually).

+          didPass(permutationIteration, ordering, hasPositionedAncestor, containerIsPositioned);
+          permutationIteration++;
+        }
+      }
+    }
+  }
+}
+
+function permute(didPass)
+{
+  var ancestor = document.getElementById('ancestor');
+  var predecessor = document.getElementById('predecessor');
+  var successor = document.getElementById('successor');
+  var container = document.getElementById('container');
+  var firstChild = document.getElementById('firstChild');
+  var secondChild = document.getElementById('secondChild');
+
+  var indices = [ 0, 1, 2, 3 ];
+  for (var siblingIndex = 0; siblingIndex < 4; ++siblingIndex) {

[Julien - ping for review, 2013/04/09 17:41:59]

4 is a magic constant here, indices.length is way better!

[hartmanng, 2013/04/09 20:40:09]

Done.

+    var siblingIndices = indices.slice(0);
+    siblingIndices.splice(siblingIndex, 1);
+    for (var containerSubindex = 0; containerSubindex < 3; ++containerSubindex) {

[Julien - ping for review, 2013/04/09 17:41:59]

Again, 3 is a magic constant, you should use siblingIndices.length

[hartmanng, 2013/04/09 20:40:09]

Done.

+      var containerIndices = siblingIndices.slice(0);
+      var containerIndex = containerIndices[containerSubindex];
+      containerIndices.splice(containerSubindex, 1);
+      var firstChildIndex = containerIndices[0];
+      var secondChildIndex = containerIndices[1];
+
+      permuteWithFixedOrdering(didPass, siblingIndex, containerIndex, firstChildIndex, secondChildIndex, 1);
+      permuteWithFixedOrdering(didPass, siblingIndex, containerIndex, firstChildIndex, secondChildIndex, 2);
+      permuteWithFixedOrdering(didPass, siblingIndex, containerIndex, firstChildIndex, secondChildIndex, 3);
+    }
+  }
+} // function doTest