<html>
<head>
<style>
  div {
    position:relative;
    white-space: nowrap;
  }

  .container {
    z-index:1;
  }

  .transform {
    -webkit-transform: translateZ(0);
    height: 20px;
    width: 20px;
    top: 0px;
    z-index:0;
    border: solid 1px red;
  }

  .box {
    border: solid 1px green;
    top: 10px;
    width: 100px;
  }
</style>

<script type="text/javascript">
  if (testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
  }

  function changeOverflowVisibilityAndRemoveId() {
    document.getElementById("changeOverFlowHiddenToVisible").style.overflow = "visible";
    document.getElementById("changeOverFlowVisibleToHidden").style.overflow = "hidden";
    if (window.internals)
      document.getElementById('layers').innerText = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_VISIBLE_RECTS);

    if (testRunner)
      testRunner.notifyDone();
  }

  function run() {
    document.getElementById('changeOverFlowHiddenToVisible').style.overflow = 'hidden';
    document.getElementById('changeOverFlowVisibleToHidden').style.overflow = 'visible';
    setTimeout('changeOverflowVisibilityAndRemoveId();', 0);
  }
</script>
</head>
<body onload='run();'>
<p>This tests if changing the clipping behaviour on the parent compositing layer makes the child layer disappear.</p>
<p>Text in both of the green boxes should stay visible.</p>

<div class='container'>
  <div class='box' id='changeOverFlowVisibleToHidden'>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>
<div class='transform'></div>

<div class='container'>
  <div class='box' id='changeOverFlowHiddenToVisible'>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>
<div class='transform'></div>

<pre id="layers">Layer tree goes here when testing</pre>
</body>
</html>