baseline-source-first-textarea-001.tentative.html (1967B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-inline-3/#baseline-source"> 3 <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> 4 <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> 5 <meta name="assert" content="<textarea> with baseline-source: first generates sensible baselines."> 6 <link rel="stylesheet" href="/fonts/ahem.css"> 7 <style> 8 .target { 9 inline-size: 200px; 10 padding: 10px; 11 border: solid 3px; 12 position: relative; 13 line-height: 0; 14 font-size: 20px; 15 } 16 17 .inner { 18 border: solid 5px; 19 padding: 10px; 20 baseline-source: first; 21 font-size: 30px; 22 } 23 24 span { 25 display: inline-block; 26 width: 1em; 27 height: 1em; 28 outline: solid cyan 3px; 29 outline-offset: -3px; 30 } 31 32 textarea { 33 border: solid 5px; 34 width: 60px; 35 height: 60px; 36 vertical-align: baseline; 37 font-family: Ahem; 38 line-height: 1; 39 margin: 0; 40 padding: 0; 41 } 42 43 </style> 44 <script src="/resources/testharness.js"></script> 45 <script src="/resources/testharnessreport.js"></script> 46 <script src="/resources/check-layout-th.js"></script> 47 <body onload="checkLayout('.target > *')"> 48 <div class="target"> 49 <span data-offset-y="29"></span> 50 <textarea data-offset-y="10" class="inner"></textarea> 51 </div> 52 <div class="target"> 53 <span data-offset-y="29"></span> 54 <textarea data-offset-y="10" class="inner">X X X X X</textarea> 55 </div> 56 <div class="target"> 57 <span data-offset-y="29"></span> 58 <textarea data-offset-y="10" class="inner" placeholder="X X X X X"></textarea> 59 </div> 60 <div class="target"> 61 <span data-offset-y="80"></span> 62 <textarea data-offset-y="10" class="inner" style="font-size: 100px;"></textarea> 63 </div> 64 <div class="target"> 65 <span data-offset-y="80"></span> 66 <textarea data-offset-y="10" class="inner" style="font-size: 100px;">X X X X X</textarea> 67 </div> 68 <div class="target"> 69 <span data-offset-y="80"></span> 70 <textarea data-offset-y="10" class="inner" style="font-size: 100px;" placeholder="X X X X X"></textarea> 71 </div>