contain-paint-dynamic-005-ref.html (1259B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>Dynamic change to paint containment (reference)</title> 5 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 8 <style> 9 div { 10 font: 25px/1 Ahem; 11 } 12 #wrapper { 13 width: 15em; 14 background: lightgray; 15 } 16 .containment { 17 contain: paint; 18 } 19 .float { 20 box-sizing: border-box; 21 border: 1px solid black; 22 } 23 .left { 24 float: left; 25 width: 1em; 26 height: 2em; 27 } 28 .right { 29 float: right; 30 width: 1em; 31 height: 3em; 32 } 33 </style> 34 35 <body> 36 <p>PASS if the boxes with dark colors are floating next to the boxes with 37 light colors.</p> 38 <div id="wrapper"> 39 <div> 40 <div id="container"> 41 <div><div class="float left" style="background: lightblue"></div></div> 42 <div class="float right" style="background: lightyellow"></div> 43 <div>XX XXX XXXX X</div> 44 </div> 45 <div class="float left" style="background: blue"></div> 46 <div> 47 <div> 48 <div><div class="float right" style="background: yellow"></div></div> 49 <div>XXX XXXXXX XXXX XX XX</div> 50 </div> 51 <div>XXXX XXXXX XX</div> 52 </div> 53 <div>XXX XXX XX XXXX</div> 54 </div> 55 </div> 56 </body> 57 </html>