hypothetical-box-dynamic.html (1114B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <title>Layout is correctly updated when the hypothetical display of an element changes, even though the final computed display doesn't</title> 4 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 5 <link rel="author" title="Mozilla" href="https://mozilla.org"> 6 <link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements"> 7 <link rel="match" href="hypothetical-box-dynamic-ref.html"> 8 <style> 9 div { 10 font: 16px / 1 monospace; 11 text-align: center; 12 margin: 5px; 13 position: relative; 14 min-height: 30px; 15 } 16 span { 17 position: absolute; 18 } 19 .block { 20 display: block; 21 } 22 </style> 23 <p>Should see two words at the same horizontal position below:</p> 24 <div> 25 <span class="block">Foo</span> 26 </div> 27 <div> 28 <span>Foo</span> 29 </div> 30 <script> 31 onload = function() { 32 requestAnimationFrame(() => requestAnimationFrame(() => { 33 document.querySelector(".block").className = ""; 34 document.documentElement.className = ""; 35 })); 36 } 37 </script>