contain-layout-suppress-baseline-002.html (2259B)
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-002-ref.html"> 10 <style> 11 .flexBaselineCheck { 12 display: flex; 13 border: 1px solid black; 14 } 15 .flexBaselineCheck > * { 16 contain: layout; 17 border: 2px solid teal; 18 align-self: baseline; 19 margin: 2px; 20 } 21 canvas { 22 background: purple; 23 width: 20px; 24 height: 50px; 25 box-sizing: border-box; 26 } 27 </style> 28 </head> 29 <body> 30 <div class="flexBaselineCheck"> 31 <!-- This canvas just exists to establish a precise, far-down baseline 32 alignment position: --> 33 <canvas></canvas> 34 <!-- "contain:layout" should force all the elements below to behave as if 35 they have no baseline. That means they all should *synthesize* a 36 baseline from their border-box edge, in order to participate in flex 37 item baseline alignment (to honor the outer flex container's 38 "align-items:baseline"). So, the expectation here is that all of these 39 elements' border-bottom edges should be aligned. --> 40 <button>btn</button> 41 <input type="button" value="i-btn"> 42 <input type="submit" value="i-sub"> 43 </div> 44 45 <!-- Same as above, but with different form controls: 46 (split into multiple flex containers so as not to be too wide): --> 47 <div class="flexBaselineCheck"> 48 <canvas></canvas> 49 <input type="text" value="text"> 50 <input type="number" value="0"> 51 </div> 52 53 <div class="flexBaselineCheck"> 54 <canvas></canvas> 55 <input type="date"> 56 <input type="time"> 57 </div> 58 59 <div class="flexBaselineCheck"> 60 <canvas></canvas> 61 <input type="file"> 62 <textarea>textarea</textarea> 63 </div> 64 65 <div class="flexBaselineCheck"> 66 <canvas></canvas> 67 <select><option>dropdown</option></select> 68 <select multiple style="max-height:40px"><option>multi</option></select> 69 </div> 70 </body> 71 </html>