contain-layout-baseline-004.html (1004B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Containment Test: Layout containment supress baseline in table cells</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout"> 6 <link rel="match" href="reference/contain-layout-baseline-004-ref.html"> 7 <meta name=assert content="Table cells with layout containment are treated as having no baseline, for that reason their baseline is synthesized from the cell's border box when they're baseline aligned."> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 9 <style> 10 #table { 11 display: table; 12 font: 100px/1 Ahem; 13 } 14 15 #table > * { 16 display: table-cell; 17 } 18 19 #first { 20 color: blue; 21 } 22 23 #second { 24 color: green; 25 contain: layout; 26 } 27 </style> 28 <p>Test passes if there is not a rectangle as the two boxes ("blue" and "green") are not baseline aligned.</p> 29 <div id="table"> 30 <div id="first">X</div> 31 <div id="second">X</div> 32 </div>