<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Reftest Reference</title> <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> <style> .flexBaselineCheck { display: flex; border: 1px solid black; height: 100px; } .flexBaselineCheck > * { border: 2px solid teal; /* In the testcase, the (baseline-aligned) items should all have their bottom borders aligned with the 80px-tall canvas. In other words, their bottom borders should all be 20px away from the bottom of their flex container. Here in the reference case, we just use "flex-end" alignment plus a hardcoded 20px margin-bottom to produce a precise reference for what that should look like. */ align-self: flex-end; margin-bottom: 20px; } canvas { background: purple; width: 20px; height: 80px; box-sizing: border-box; } .flex { display: flex; } .grid { display: grid; } .multicol { column-count: 2; } </style> </head> <body> <div class="flexBaselineCheck"> <canvas></canvas> <div>block</div> <fieldset><legend>leg</legend>fieldset</fieldset> <div class="flex">flex</div> <div class="grid">grid</div> <div class="multicol">multi<br>col</div> <details open><summary>summary</summary>details</details> </div> </body> </html>