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