resizable-iframe-paint-order.html (872B)
1 <!DOCTYPE html> 2 <title>Resizable iframe paint order</title> 3 <link rel="help" href="https://www.w3.org/TR/CSS2/zindex.html"> 4 <link rel="match" href="resizable-iframe-paint-order-ref.html"> 5 <!-- Ignore the resizer which may be visible or invisible depending on 6 in which paint phase the browser paint the resizer. --> 7 <meta name="fuzzy" content="0-255;0-200"> 8 <style> 9 iframe { 10 display: block; 11 background: red; 12 width: 100px; 13 height: 100px; 14 padding: 30px; 15 border: none; 16 resize: both; 17 box-sizing: border-box; 18 } 19 #negative-margin { 20 width: 100px; 21 height: 100px; 22 background: green; 23 margin-top: -100px; 24 } 25 </style> 26 <iframe srcdoc="<style>html { background: lime; }</style>"></iframe> 27 <!-- #negative-margin should paint on top of the background of the iframe 28 (but not the contents). --> 29 <div id="negative-margin"></div>