3d-scene-with-iframe-001.html (1740B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="UTF-8"> 4 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 5 <link rel="author" title="Google" href="http://www.google.com/"> 6 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1264783"> 7 <link rel="help" href="https://www.w3.org/TR/css-transforms-2/#3d-rendering-contexts"> 8 <link rel="match" href="3d-scene-with-iframe-001-ref.html"> 9 <meta name="assert" content="The iframe should be covered by the green div."> 10 11 <style> 12 13 #container { 14 perspective: 400px; 15 perspective-origin: 0 0; 16 } 17 #scene { 18 transform-style: preserve-3d; 19 transform: translate(100px, 100px); 20 width: 300px; 21 height: 300px; 22 } 23 .transform1, .transform2 { 24 position: absolute; 25 transform-style: preserve-3d; 26 top: 0; 27 left: 0; 28 } 29 .transform1 { 30 transform: translateZ(200px); 31 } 32 .transform1 > div { 33 background-color: green; 34 width: 150px; 35 height: 100px; 36 transform: translate(-100px, -100px) 37 } 38 .transform2 { 39 transform: translateZ(100px); 40 } 41 .transform2 > iframe { 42 display: block; 43 transform: translate(-50px, -75px); 44 } 45 46 </style> 47 48 <div id="container"> 49 <div id="scene"> 50 <div class="transform1"> 51 <div></div> 52 </div> 53 <div class="transform2"> 54 <iframe width="150" height="100"></iframe> 55 </div> 56 </div> 57 </div> 58 59 <script> 60 61 let iframe = document.getElementsByTagName("iframe")[0]; 62 iframe.addEventListener("load", function() { 63 let root = iframe.contentDocument.documentElement; 64 root.style.height = "10000px"; 65 root.style.background = "red"; 66 document.documentElement.classList.remove("reftest-wait"); 67 }); 68 iframe.src = "/resources/blank.html"; 69 70 </script>