synthesize-vrl-baseline.html (739B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-align-3/#generate-baselines"> 3 <link rel="help" href="https://www.w3.org/TR/css-inline-3/#valdef-dominant-baseline-auto"> 4 <link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> 5 <style> 6 #inline-block { 7 display: inline-block; 8 width: 100px; 9 height: 50px; 10 background: green; 11 } 12 13 #inline-flex { 14 display: inline-flex; 15 } 16 17 #inline-flex > div { 18 width: 100px; 19 height: 50px; 20 background: green; 21 } 22 </style> 23 <p>Test passes if there is a filled green square.</p> 24 <div style="width: 100px; height: 100px; line-height: 0; writing-mode: vertical-rl; background: red;"> 25 <span id="inline-block"></span><span id="inline-flex"><div></div></span> 26 </div>