component-alpha-enter-1.html (1236B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Test transition from single-alpha layer to component-alpha layer from a display port size change</title> 4 <script type="text/javascript"> 5 document.addEventListener('MozReftestInvalidate', function() { 6 var scrollbox = document.getElementById('scrollbox'); 7 scrollbox.scrollTop = 1000; 8 9 window.addEventListener("MozAfterPaint", function() { 10 // Remove dummy to make scrollbox the first scroll element giving it a 11 // display port. The display port will then contain the text forcing the 12 // layer to transition to component alpha. 13 document.getElementById('dummy').remove(); 14 document.documentElement.className = ''; 15 }, {once: true}); 16 }); 17 </script> 18 <style> 19 #dummy { 20 margin: 20px; 21 width: 300px; 22 height: 400px; 23 overflow: scroll; 24 } 25 26 #filler { 27 height: 600px; 28 } 29 30 #scrollbox { 31 margin: 20px; 32 width: 300px; 33 height: 400px; 34 overflow-y: scroll; 35 background: linear-gradient(#FFF, #FFF); 36 } 37 38 #inner { 39 background-color: #000; 40 margin-top: 10px; 41 height: 5px; 42 line-height: 5px; 43 padding-bottom: 400px; 44 } 45 </style> 46 47 <div id="dummy"> 48 <div id="filler"> 49 </div> 50 </div> 51 52 <div id="scrollbox"> 53 <div id="inner"> 54 Text 55 </div> 56 </div>