contain-paint-cell-001.html (1676B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Containment Test: 'contain: paint' 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-paint"> 9 <link rel="match" href="reference/contain-paint-047-ref.html"> 10 11 <meta content="This test checks that the paint containment applies to table-cell elements. Therefore the content of the table-cell element should be clipped to the padding edge of its principal box." name="assert"> 12 13 <style> 14 div#table 15 { 16 display: table; 17 font-family: monospace; 18 font-size: 100px; 19 table-layout: fixed; 20 width: 4ch; 21 } 22 23 div.column 24 { 25 display: table-column; 26 } 27 28 div#middle-column 29 { 30 width: 4ch; 31 } 32 33 div.row 34 { 35 display: table-row; 36 } 37 38 div.cell 39 { 40 background-color: white; 41 display: table-cell; 42 } 43 44 div#contain 45 { 46 color: green; 47 contain: paint; 48 } 49 50 span 51 { 52 background-color: red; 53 color: yellow; 54 } 55 </style> 56 57 <p>Test passes if there is <strong>no red</strong>. 58 59 <div id="table"> 60 61 <div class="column"></div><div class="column" id="middle-column"></div><div class="column"></div> 62 63 <div class="row"><div class="cell"></div><div class="cell"></div><div class="cell"></div></div> 64 65 <div class="row"><div class="cell"></div><div class="cell" id="contain">PASS<span>FAIL</span></div><div class="cell"></div></div> 66 67 <div class="row"><div class="cell"></div><div class="cell"></div><div class="cell"></div></div> 68 69 </div>