contain-layout-baseline-005-ref.html (1791B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Containment Test: Reference file</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <style> 6 .wrapper { 7 height: 110px; 8 } 9 .wrapper > * { 10 vertical-align: bottom; 11 background: cyan; 12 font-size: 20px; 13 } 14 .wrapper > :nth-child(1) { 15 background: magenta; 16 } 17 .inline-block { 18 display: inline-block; 19 } 20 canvas { 21 width: 100px; 22 height: 100px; 23 } 24 fieldset, details { 25 display: inline-block; 26 width: max-content; 27 } 28 </style> 29 <p>Test passes if it has the same output than the reference (all elements are aligned on the bottom edge).</p> 30 <div class="wrapper"> 31 <div class="inline-block" style="font-size: 80px;">foo</div> 32 <div class="inline-block">foo</div> 33 <div class="inline-block" style="border: solid thick; padding: 2px;">foo</div> 34 <div style="display: inline-flex;">foo</div> 35 <div style="display: inline-flex; border: solid thick; padding: 2px;">foo</div> 36 <div style="display: inline-grid;">foo</div> 37 <div style="display: inline-grid; border: solid thick; padding: 2px;">foo</div> 38 </div> 39 <div class="wrapper"> 40 <canvas></canvas> 41 <div class="inline-block">foo</div> 42 <select multiple style="height: 40px;"><option>foo</option></select> 43 <textarea style="height: 40px;"></textarea> 44 </div> 45 <div class="wrapper"> 46 <canvas></canvas> 47 <input value="foo" size="3"></input> 48 <input type="file"></input> 49 </div> 50 <div class="wrapper"> 51 <canvas></canvas> 52 <table style="display: inline-table;"><tr><td>foo</td></tr></table> 53 <canvas></canvas> 54 <fieldset></fieldset> 55 <fieldset><legend>foo</legend></fieldset> 56 <fieldset><legend>foo</legend>foo</fieldset> 57 <details></details> 58 <details><summary>foo</summary>foo</details> <details open="true"><summary>foo</summary>foo</details> 59 </div>