invisible-images-composited-1.html (1225B)
1 <!DOCTYPE HTML> 2 <title>Largest Contentful Paint: invisible images are not observable</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="resources/invisible-images.js"></script> 6 <style> 7 .opacity0 { 8 opacity: 0; 9 } 10 .visibilityHidden { 11 visibility: hidden; 12 } 13 .displayNone { 14 display: none; 15 } 16 .willChangeTransform { 17 will-change: transform; 18 } 19 .willChangeOpacity { 20 will-change: opacity; 21 } 22 </style> 23 <script> 24 setup({"hide_test_state": true}); 25 </script> 26 <img src='/images/blue.png' class='opacity0 willChangeTransform' id='opacity0-willChangeTransform'/> 27 <img src='/images/green.png' class='visibilityHidden willChangeTransform' id='visibilityHidden'/> 28 <img src='/images/red.png' class='displayNone willChangeTransform' id='displayNone'/> 29 <img src='/images/blue.png' class='opacity0 willChangeOpacity' id='opacity0-willChangeOpacity'/> 30 <div class='opacity0 composited'><img src='/images/yellow.png' id='divOpacity0'/></div> 31 <div class='visibilityHidden composited'><img src='/images/yellow.png' id='divVisibilityHidden'/></div> 32 <div class='displayNone composited'><img src='/images/yellow.png' id='divDisplayNone'/></div>