contain-paint-table-002.html (1636B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Containment Test: 'contain: paint' applies to 'table' elements</title> 6 7 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 8 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 9 <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint"> 10 <link rel="match" href="reference/contain-paint-047-ref.html"> 11 12 <meta content="This test checks that paint containment applies to table elements. Therefore the content of the table element (including its caption) should be clipped to the padding edge of its principal box." name="assert"> 13 14 <style> 15 div#table 16 { 17 display: table; 18 font-family: monospace; 19 font-size: 100px; 20 table-layout: fixed; 21 width: 4ch; 22 contain: paint; 23 } 24 div.caption 25 { 26 display: table-caption; 27 color: green; 28 /* We have to limit the width of the caption here, or else the caption's 29 intrinsic width (including the "FAIL" span) would "prop up" the width 30 of the table to be a size that'd be larger than its specified width. 31 Really, we want the table to be *only* 4 characters wide (as wide as 32 the text "PASS"), with "FAIL" overflowing and getting clipped by 33 "contain:paint" on the table wrapper box. */ 34 width: 4ch; 35 } 36 span 37 { 38 background-color: red; 39 color: yellow; 40 } 41 </style> 42 43 <p>Test passes if there is <strong>no red</strong>. 44 45 <div id="table"> 46 <div class="caption"> 47 PASS<span>FAIL</span> 48 </div> 49 </div>