contain-layout-baseline-001.html (913B)
1 <!doctype html> 2 <html lang=en> 3 <meta charset=utf-8> 4 <title>CSS-contain test: layout containment and baselines</title> 5 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> 6 <meta name=assert content="With contain:layout, for the purpose of the vertical-align property, the containing element is treated as having no baseline."> 7 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 8 <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-layout"> 9 10 <style> 11 #red { 12 position: absolute; 13 background: red; 14 width: 100px; 15 height: 100px; 16 z-index: -1; 17 } 18 .green { 19 display: inline-block; 20 height: 100px; 21 background: green; 22 width: 50px; 23 contain: layout; 24 color: transparent; 25 } 26 </style> 27 28 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 29 <div id=red></div> 30 <div class=green></div><div class=green>a</div>