overflow-recalc-001.html (1456B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>CSS Overflow: Overflow recalc after font-size change</title> 5 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-overflow/"> 7 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1036644"> 8 <link rel="match" href="reference/overflow-recalc-001-ref.html"> 9 <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-5"> 10 <meta name="assert" content="Checks that overflow of an inline element is properly recomputed after changes on the descendants."> 11 <script src="/common/reftest-wait.js"></script> 12 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 13 <style> 14 #scroller { 15 height: 200px; 16 overflow: scroll; 17 position: relative; 18 } 19 #wrapper { 20 margin-top: 100px; 21 width: 200px; 22 height: 200px; 23 overflow: hidden; 24 font-family: Ahem; 25 line-height: 1; 26 color: green; 27 } 28 #red { 29 background: red; 30 width: 200px; 31 height: 200px; 32 position: absolute; 33 top: 100px; 34 z-index: -1; 35 } 36 </style> 37 <p>Test passes if there is <strong>no red</strong>.</p> 38 <div id="scroller"> 39 <div id="wrapper"> 40 <span id="inlineouter"> 41 <span id="inlineinner">X</span> 42 </span> 43 </div> 44 <div id="red"></div> 45 </div> 46 47 <script> 48 requestAnimationFrame(() => requestAnimationFrame(() => { 49 inlineinner.style.fontSize = "200px"; 50 takeScreenshot(); 51 })); 52 </script> 53 </html>