baseline-of-scrollable-2.html (1447B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title> 6 CSS Test: baseline of scrollable "details" element should be derived 7 from its margin-box. 8 </title> 9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 10 <link rel="author" title="Mozilla" href="https://www.mozilla.org"> 11 <link rel="help" href="https://drafts.csswg.org/css-align/#baseline-export"> 12 <link rel="match" href="reference/baseline-of-scrollable-2-ref.html"> 13 <style> 14 .overflow-ib { 15 overflow: hidden; 16 display: inline-block; 17 } 18 19 details { 20 height: 40px; 21 width: 100px; 22 /* Transparent text & "details-arrow", so that it's easier to make 23 a simple reference case: */ 24 color: transparent; 25 border-color: gray; 26 border-style: solid; 27 border-width: 2px 3px 4px 5px; 28 padding: 4px 5px 7px 8px; 29 margin: 1px 2px 3px 4px; 30 } 31 </style> 32 </head> 33 <body> 34 Test passes if the a/b text aligns with the bottom margin-edge of the 35 gray rects. 36 <br><br> 37 38 a 39 <details class="overflow-ib"> 40 c<br>d<br>e<br>f<br>g 41 </details> 42 b 43 <br> 44 45 a 46 <details class="overflow-ib" open> 47 c<br>d<br>e<br>f<br>g 48 </details> 49 b 50 <br> 51 52 a 53 <div class="overflow-ib"> 54 <details> 55 c<br>d<br>e<br>f<br>g 56 </details> 57 </div> 58 b 59 <br> 60 61 a 62 <div class="overflow-ib"> 63 <details open> 64 c<br>d<br>e<br>f<br>g 65 </details> 66 </div> 67 b 68 69 </body> 70 </html>