contain-content-001.html (1021B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Containment Test: a block with 'contain: content' alongside a float</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 <link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property"> 9 <link rel="match" href="reference/contain-layout-ifc-022-ref.html"> 10 11 12 <style> 13 div 14 { 15 color: transparent; 16 font-size: 16px; 17 padding: 8px; 18 } 19 20 div#floated-left 21 { 22 background-color: blue; 23 float: left; 24 margin: 8px; 25 width: 6em; 26 } 27 28 div#with-contain-content 29 { 30 background-color: orange; 31 width: 12em; 32 33 contain: content; 34 } 35 </style> 36 37 38 <p>Test passes if the orange rectangle and blue rectangle do not overlap. 39 40 <div id="floated-left">Some text in a blue rectangle.</div> 41 42 <div id="with-contain-content">Some text in an orange rectangle. Some text in an orange rectangle. Some text in an orange rectangle.</div>