dynamic-fixed-pos-cb-change.html (1480B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <title>CSS Test: Checks that dynamic changes to whether we're a fixed-pos containing block are handled correctly</title> 4 <meta charset="utf-8"> 5 <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#containing-block-for-all-descendants"> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1498873"> 7 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 8 <link rel="author" title="Mozilla" href="https://mozilla.org"> 9 <link rel="match" href="dynamic-fixed-pos-cb-change-ref.html"> 10 <style> 11 html, 12 body { 13 height: 100%; 14 overflow: hidden; 15 margin: 0; 16 padding: 0; 17 background-color: #222; 18 } 19 20 body { 21 display: flex; 22 } 23 24 #fixed { 25 position: fixed; 26 width: 100%; 27 height: 100%; 28 top: 0; 29 left: 0; 30 z-index: 1; 31 background: black; 32 } 33 34 #popup { 35 position: absolute; 36 width: 200px; 37 height: 200px; 38 left: 0; 39 top: 0; 40 z-index: 2; 41 background: red; 42 transform: scale( 1.1111 ); 43 } 44 45 body, #popup { 46 transform-origin: 50% 50%; 47 } 48 </style> 49 <div id="popup"> 50 <!-- Seeing this box change color should not move me or change my size. --> 51 </div> 52 <div id="fixed"></div> 53 <script> 54 onload = function() { 55 requestAnimationFrame(() => { 56 document.body.style.transform = "scale(0.9)"; 57 requestAnimationFrame(() => { 58 popup.style.backgroundColor = "green"; 59 requestAnimationFrame(() => { 60 document.documentElement.className = ""; 61 }); 62 }); 63 }); 64 } 65 </script>