contain-paint-cell-002.html (1324B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Containment Test: 'contain: paint' and 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 table 15 { 16 border-spacing: 0px; 17 /* to help reuse an already created reference file */ 18 font-family: monospace; 19 font-size: 100px; 20 table-layout: fixed; 21 width: 4ch; 22 } 23 24 td 25 { 26 padding: 0px; 27 /* to help reuse an already created reference file */ 28 } 29 30 col#middle-column 31 { 32 width: 4ch; 33 } 34 35 td#test 36 { 37 color: green; 38 contain: paint; 39 } 40 41 span 42 { 43 background-color: red; 44 color: yellow; 45 } 46 </style> 47 48 <p>Test passes if there is <strong>no red</strong>. 49 50 <table> 51 52 <col><col id="middle-column"><col> 53 54 <tr><td><td><td> 55 56 <tr><td><td id="test">PASS<span>FAIL</span><td> 57 58 <tr><td><td><td> 59 60 </table>