contain-paint-ignored-cases-ib-split-001-ref.html (2111B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Reftest Reference</title> 6 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 7 <style> 8 .abspos-box { 9 position: absolute; 10 width: 200px; 11 height: 200px; 12 } 13 14 /* The boxes should stack in the order that I've listed their CSS classes 15 here. The class names' first word (outside/before/inside/after) refers 16 to the boxes' DOM position, and "background"/"midground"/"foreground" 17 refers to their z-index values. */ 18 19 .before-IB-background { 20 background: darkmagenta; 21 z-index: -1; 22 top: 50px; 23 left: 50px; 24 } 25 .after-IB-background { 26 background: magenta; 27 z-index: -1; 28 top: 70px; 29 left: 70px; 30 } 31 .outside-span-midground { 32 background: darkkhaki; 33 top: 90px; 34 left: 90px; 35 } 36 .inside-IB-midground { 37 background: khaki; 38 top: 110px; 39 left: 110px; 40 } 41 .before-IB-foreground { 42 background: darkcyan; 43 z-index: 1; 44 top: 130px; 45 left: 130px; 46 } 47 .after-IB-foreground { 48 background: cyan; 49 z-index: 1; 50 top: 150px; 51 left: 150px; 52 } 53 </style> 54 </head> 55 <body> 56 <!-- The expectation here is that 'abspos-box' elements will all interact in 57 the same top-level stacking context. That means the box ordering should 58 be (back to front): darkmagenta/magenta/darkkhaki/khaki/darkcyan/cyan, 59 with the boxes stacked (visually) from top-left to bottom-right. --> 60 61 <div class="abspos-box outside-span-midground"></div> 62 63 <!-- Note: this file is identical to the testcase, 64 except for the lack of "contain: paint" on this span. --> 65 <span> 66 <div class="abspos-box before-IB-background"></div> 67 <div class="abspos-box before-IB-foreground"></div> 68 <!-- This unstyled div crates the IB split: --> 69 <div> 70 <div class="abspos-box inside-IB-midground"></div> 71 </div> 72 <div class="abspos-box after-IB-background"></div> 73 <div class="abspos-box after-IB-foreground"></div> 74 </span> 75 </body> 76 </html>