contain-layout-suppress-baseline-002-ref.html (1733B)
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 } 12 .flexBaselineCheck > * { 13 border: 2px solid teal; 14 /* In the testcase, the (baseline-aligned) items should all have their 15 bottom borders aligned with the 50px-tall canvas. In other words, their 16 bottom borders should all be aligned at the bottom of their flex 17 container, separated from the bottom by only by their margin-end 18 distance. Here in the reference case, we just use "flex-end" alignment 19 (plus the same amount of margin) to produce a precise reference for what 20 that should look like. */ 21 align-self: flex-end; 22 margin: 2px; 23 } 24 canvas { 25 background: purple; 26 width: 20px; 27 height: 50px; 28 box-sizing: border-box; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="flexBaselineCheck"> 34 <canvas></canvas> 35 <button>btn</button> 36 <input type="button" value="i-btn"> 37 <input type="submit" value="i-sub"> 38 </div> 39 40 <div class="flexBaselineCheck"> 41 <canvas></canvas> 42 <input type="text" value="text"> 43 <input type="number" value="0"> 44 </div> 45 46 <div class="flexBaselineCheck"> 47 <canvas></canvas> 48 <input type="date"> 49 <input type="time"> 50 </div> 51 52 <div class="flexBaselineCheck"> 53 <canvas></canvas> 54 <input type="file"> 55 <textarea>textarea</textarea> 56 </div> 57 58 <div class="flexBaselineCheck"> 59 <canvas></canvas> 60 <select><option>dropdown</option></select> 61 <select multiple style="max-height:40px"><option>multi</option></select> 62 </div> 63 </body> 64 </html>