baseline-source-first-textarea-002.tentative.html (1996B)
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 writing-mode: vertical-rl; 16 } 17 18 .inner { 19 border: solid 5px; 20 padding: 10px; 21 baseline-source: first; 22 font-size: 30px; 23 } 24 25 span { 26 display: inline-block; 27 width: 1em; 28 height: 1em; 29 outline: solid cyan 3px; 30 outline-offset: -3px; 31 } 32 33 textarea { 34 border: solid 5px; 35 width: 60px; 36 height: 60px; 37 vertical-align: baseline; 38 font-family: Ahem; 39 line-height: 1; 40 margin: 0; 41 padding: 0; 42 } 43 44 </style> 45 <script src="/resources/testharness.js"></script> 46 <script src="/resources/testharnessreport.js"></script> 47 <script src="/resources/check-layout-th.js"></script> 48 <body onload="checkLayout('.target > *')"> 49 <div class="target"> 50 <span data-offset-x="60"></span> 51 <textarea data-offset-x="10" class="inner"></textarea> 52 </div> 53 <div class="target"> 54 <span data-offset-x="60"></span> 55 <textarea data-offset-x="10" class="inner">X X X X X</textarea> 56 </div> 57 <div class="target"> 58 <span data-offset-x="60"></span> 59 <textarea data-offset-x="10" class="inner" placeholder="X X X X X"></textarea> 60 </div> 61 <div class="target"> 62 <span data-offset-x="25"></span> 63 <textarea data-offset-x="10" class="inner" style="font-size: 100px;"></textarea> 64 </div> 65 <div class="target"> 66 <span data-offset-x="25"></span> 67 <textarea data-offset-x="10" class="inner" style="font-size: 100px;">X X X X X</textarea> 68 </div> 69 <div class="target"> 70 <span data-offset-x="25"></span> 71 <textarea data-offset-x="10" class="inner" style="font-size: 100px;" placeholder="X X X X X"></textarea> 72 </div>