position-try-fallbacks-004.html (1595B)
1 <!DOCTYPE html> 2 3 <html class="reftest-wait"> 4 5 <head> 6 <title>Retrying fallbacks after failing with a non-existing fallback</title> 7 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 8 <link rel="help" href="https://issues.chromium.org/issues/427134601"> 9 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 10 <style> 11 #anchor { 12 anchor-name: --a; 13 } 14 15 #anchored { 16 position: absolute; 17 position-anchor: --a; 18 position-area: left; /* No room on the left. */ 19 position-try-fallbacks: --fits, --bogus; 20 } 21 22 @position-try --fits { 23 position-area: right; 24 } 25 </style> 26 <script src="/common/reftest-wait.js"></script> 27 <script src="/common/rendering-utils.js"></script> 28 </head> 29 30 <body> 31 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 32 <div style="position:relative; height:200px;"> 33 <div id="container" style="overflow:hidden; width:100px; height:100px; background:red;"> 34 <div id="anchor" style="width:50px; height:150px;"> 35 <div style="height:50px;"></div> 36 <div style="height:100px; background:green;"></div> 37 </div> 38 <div style="height:300px;"></div> 39 <div id="anchored" style="width:50px; height:150px;"> 40 <div style="height:50px;"></div> 41 <div style="height:100px; background:green;"></div> 42 </div> 43 </div> 44 </div> 45 <script> 46 waitForAtLeastOneFrame().then(() => { 47 waitForAtLeastOneFrame().then(() => { 48 container.scrollTop = 50; 49 waitForAtLeastOneFrame().then(() => { 50 takeScreenshot(); 51 }); 52 }); 53 }); 54 </script> 55 </body> 56 57 </html>