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