contain-layout-cell-001.html (1555B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Containment Test: 'contain: layout' applies to 'table-cell' elements</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/#containment-layout"> 9 <link rel="match" href="reference/contain-layout-cell-001-ref.html"> 10 11 <meta content="In this test, the div#contain should act as the containing block for div#abs-pos ." name="assert"> 12 13 <style> 14 div#table 15 { 16 background-color: blue; 17 border-spacing: 2px; 18 display: table; 19 height: 206px; 20 table-layout: fixed; 21 width: 206px; 22 } 23 24 div.row 25 { 26 display: table-row; 27 } 28 29 div.cell 30 { 31 background-color: white; 32 display: table-cell; 33 vertical-align: top; 34 } 35 36 div#contain 37 { 38 contain: layout; 39 } 40 41 span 42 { 43 background-color: red; 44 color: yellow; 45 font-family: monospace; 46 vertical-align: top; 47 } 48 49 div#abs-pos 50 { 51 background-color: green; 52 color: white; 53 font-family: monospace; 54 left: 0px; 55 position: absolute; 56 top: 0px; 57 } 58 </style> 59 60 <p>Test passes if there is the word PASS and if there is <strong>no red</strong>. 61 62 <div id="table"> 63 64 <div class="row"><div class="cell"> </div><div class="cell"> </div></div> 65 66 <div class="row"><div class="cell"> </div><div class="cell" id="contain"><span>FAIL</span><div id="abs-pos">PASS</div></div></div> 67 68 </div>