anchor-position-005-print.html (1156B)
1 <!DOCTYPE html> 2 <title>Basic anchor positioning test for printing</title> 3 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos"> 5 <link rel="match" href="anchor-position-005-print-ref.html"> 6 <style> 7 :root { 8 print-color-adjust: exact; 9 } 10 </style> 11 <p>There should be a green square below, and no red.</p> 12 <div style="width:100px; height:100px; background:red;"> 13 <div style="anchor-name:--first; width:50px; height:100px; background:green;"></div> 14 </div> 15 <div style="height:30px;"></div> 16 <div style="position:absolute; position-anchor:--first; top:anchor(top); left:anchor(right); width:50px; height:100px; background:green;"></div> 17 18 <p style="break-before:page;">There should be a green square below, and no red.</p> 19 <div style="width:100px; height:100px; background:red;"> 20 <div style="anchor-name:--second; width:50px; height:100px; background:green;"></div> 21 </div> 22 <div style="height:30px;"></div> 23 <div style="position:absolute; position-anchor:--second; top:anchor(top); left:anchor(right); width:50px; height:100px; background:green;"></div>