contain-layout-suppress-baseline-001-ref.html (1378B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Reftest Reference</title> 6 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 7 <style> 8 .flexBaselineCheck { 9 display: flex; 10 border: 1px solid black; 11 height: 100px; 12 } 13 .flexBaselineCheck > * { 14 border: 2px solid teal; 15 16 /* In the testcase, the (baseline-aligned) items should all have their 17 bottom borders aligned with the 80px-tall canvas. In other words, their 18 bottom borders should all be 20px away from the bottom of their flex 19 container. Here in the reference case, we just use "flex-end" alignment 20 plus a hardcoded 20px margin-bottom to produce a precise reference 21 for what that should look like. */ 22 align-self: flex-end; 23 margin-bottom: 20px; 24 } 25 canvas { 26 background: purple; 27 width: 20px; 28 height: 80px; 29 box-sizing: border-box; 30 } 31 .flex { 32 display: flex; 33 } 34 .grid { 35 display: grid; 36 } 37 .multicol { 38 column-count: 2; 39 } 40 </style> 41 </head> 42 <body> 43 <div class="flexBaselineCheck"> 44 <canvas></canvas> 45 <div>block</div> 46 <fieldset><legend>leg</legend>fieldset</fieldset> 47 <div class="flex">flex</div> 48 <div class="grid">grid</div> 49 <div class="multicol">multi<br>col</div> 50 <details open><summary>summary</summary>details</details> 51 </div> 52 </body> 53 </html>