component-alpha-enter-1.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html class="reftest-wait">

<title>Test transition from single-alpha layer to component-alpha layer from a display port size change</title>

<script type="text/javascript">

  document.addEventListener('MozReftestInvalidate', function() {

    var scrollbox = document.getElementById('scrollbox');

    scrollbox.scrollTop = 1000;

    window.addEventListener("MozAfterPaint", function() {

      // Remove dummy to make scrollbox the first scroll element giving it a

      // display port. The display port will then contain the text forcing the

      // layer to transition to component alpha.

      document.getElementById('dummy').remove();

      document.documentElement.className = '';

    }, {once: true});

});

</script>

<style>

#dummy {

  margin: 20px;

  width: 300px;

  height: 400px;

  overflow: scroll;

#filler {

  height: 600px;

#scrollbox {

  margin: 20px;

  width: 300px;

  height: 400px;

  overflow-y: scroll;

  background: linear-gradient(#FFF, #FFF);

#inner {

  background-color: #000;

  margin-top: 10px;

  height: 5px;

  line-height: 5px;

  padding-bottom: 400px;

</style>

<div id="dummy">

  <div id="filler">

  </div>

</div>

<div id="scrollbox">

  <div id="inner">

    Text

  </div>

</div>