author Botond Ballo <>
Wed, 17 Jun 2015 19:11:25 -0400
changeset 267948 89b4c0b06ff3839c2e263bf5c2cac68adb1a07bd
parent 267375 d5011b666d31160d5456a99441fdd6bf8d2c115b
child 267959 2f952a21d83ca492a4cd0c311a2e261f93c891d5
permissions -rw-r--r--
Bug 1175585 - Generalize scrollWheelOver() so it's usable by other APZ tests. r=kats

  <title>Test for layerization</title>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
  <script type="application/javascript" src="apz_test_native_event_utils.js"></script>
  <script type="application/javascript" src="apz_test_utils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  <link rel="stylesheet" type="text/css" href="helper_subframe_style.css"/>
  #container {
    display: flex;
  .outer-frame {
    height: 500px;
    overflow: scroll;
    flex-basis: 100%;
    background: repeating-linear-gradient(#CCC, #CCC 100px, #BBB 100px, #BBB 200px);
  #page-content {
    height: 200%;
<a target="_blank" href="">APZ layerization tests</a>
<p id="display"></p>
<div id="container">
  <div id="outer1" class="outer-frame">
    <div id="inner1" class="inner-frame">
      <div class="inner-content"></div>
  <div id="outer2" class="outer-frame">
    <div id="inner2" class="inner-frame">
      <div class="inner-content"></div>
  <iframe id="outer3" class="outer-frame" src="helper_iframe1.html"></iframe>
  <iframe id="outer4" class="outer-frame" src="helper_iframe2.html"></iframe>
<!-- The page-content div ensures the page is scrollable, so none of the
     subframes are layerized by the optimization that layerizes the
     primary async-scrollable frame on page load. -->
<div id="page-content"></div>
<pre id="test">
<script type="application/javascript;version=1.7">

function scrollWheel(element) {
    scrollWheelOver(element, -10, driveTest);

var gTestContinuation = null;
var utils;

// Return whether the element with id |elementId| has been layerized.
// Assumes |elementId| will be present in the content description for the
// element, and not in the content descriptions of other elements.
function isLayerized(elementId) {
  var contentTestData = utils.getContentAPZTestData();
  ok(contentTestData.paints.length > 0, "expected at least one paint");
  var seqno = contentTestData.paints[contentTestData.paints.length - 1].sequenceNumber;
  contentTestData = convertTestData(contentTestData);
  var paint = contentTestData.paints[seqno];
  for (var scrollId in paint) {
    if ("contentDescription" in paint[scrollId]) {
      if (paint[scrollId]["contentDescription"].includes(elementId)) {
        return true;
  return false;

function* runTest() {
  utils = SpecialPowers.getDOMWindowUtils(window);

  // Initially, nothing should be layerized.
  ok(!isLayerized('outer1'), "initially 'outer1' should not be layerized");
  ok(!isLayerized('inner1'), "initially 'inner1' should not be layerized");
  ok(!isLayerized('outer2'), "initially 'outer2' should not be layerized");
  ok(!isLayerized('inner2'), "initially 'inner2' should not be layerized");
  ok(!isLayerized('outer3'), "initially 'outer3' should not be layerized");
  ok(!isLayerized('inner3'), "initially 'inner3' should not be layerized");
  ok(!isLayerized('outer4'), "initially 'outer4' should not be layerized");
  ok(!isLayerized('inner4'), "initially 'inner4' should not be layerized");

  // Scrolling over outer1 should layerize outer1, but not inner1.
  yield scrollWheel(document.getElementById('outer1'));
  ok(isLayerized('outer1'), "scrolling 'outer1' should cause it to be layerized");
  ok(!isLayerized('inner1'), "scrolling 'outer1' should not cause 'inner1' to be layerized");

  // Scrolling over inner2 should layerize both outer2 and inner2.
  yield scrollWheel(document.getElementById('inner2'));
  ok(isLayerized('inner2'), "scrolling 'inner2' should cause it to be layerized");
  ok(isLayerized('outer2'), "scrolling 'inner2' should also cause 'outer2' to be layerized");

  // The second half of the test repeats the same checks as the first half,
  // but with an iframe as the outer scrollable frame.

  // Scrolling over outer3 should layerize outer3, but not inner3.
  yield scrollWheel(document.getElementById('outer3').contentDocument.documentElement);
  ok(isLayerized('outer3'), "scrolling 'outer3' should cause it to be layerized");
  ok(!isLayerized('inner3'), "scrolling 'outer3' should not cause 'inner3' to be layerized");

  // Scrolling over outer4 should layerize both outer4 and inner4.
  yield scrollWheel(document.getElementById('outer4').contentDocument.getElementById('inner4'));
  ok(isLayerized('inner4'), "scrolling 'inner4' should cause it to be layerized");
  ok(isLayerized('outer4'), "scrolling 'inner4' should also cause 'outer4' to be layerized");

function driveTest() {
  if (!gTestContinuation) {
    gTestContinuation = runTest();
  var ret =;
  if (ret.done) {

function startTest() {
  // This test requires APZ - if it's not enabled, skip it.
  var apzEnabled = SpecialPowers.getBoolPref("layers.async-pan-zoom.enabled");
  if (!apzEnabled) {
    ok(true, "APZ not enabled, skipping test");


SimpleTest.waitForFocus(startTest, window);