contain-layout-suppress-baseline-001.html (1811B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Test: 'contain: layout' should make elements behave as if they have no baseline</title> 6 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 7 <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout"> 8 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-baseline"> 9 <link rel="match" href="contain-layout-suppress-baseline-001-ref.html"> 10 <style> 11 .flexBaselineCheck { 12 display: flex; 13 border: 1px solid black; 14 height: 100px; 15 } 16 .flexBaselineCheck > * { 17 contain: layout; 18 border: 2px solid teal; 19 align-self: baseline; 20 } 21 canvas { 22 background: purple; 23 width: 20px; 24 height: 80px; 25 box-sizing: border-box; 26 } 27 .flex { 28 display: flex; 29 } 30 .grid { 31 display: grid; 32 } 33 .multicol { 34 column-count: 2; 35 } 36 </style> 37 </head> 38 <body> 39 <div class="flexBaselineCheck"> 40 <!-- This canvas just exists to establish a precise, far-down baseline 41 alignment position: --> 42 <canvas></canvas> 43 <!-- "contain:layout" should force all the elements below to behave as if 44 they have no baseline. That means they all should *synthesize* a 45 baseline from their border-box edge, in order to participate in flex 46 item baseline alignment (to honor the outer flex container's 47 "align-items:baseline"). So, the expectation here is that all of these 48 elements' border-bottom edges should be aligned. --> 49 <div>block</div> 50 <fieldset><legend>leg</legend>fieldset</fieldset> 51 <div class="flex">flex</div> 52 <div class="grid">grid</div> 53 <div class="multicol">multi<br>col</div> 54 <details open><summary>summary</summary>details</details> 55 </div> 56 </body> 57 </html>