vertical-align-top-bottom-001.html (3474B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align" /> 3 <link rel="author" href="mailto:kojii@chromium.org"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <style> 8 section.test { 9 display: inline-block; 10 font-size: 20px; 11 line-height: 1.5; 12 font-family: Arial; 13 font-family: Ahem; 14 } 15 section.test > div { 16 background: blue; 17 margin-bottom: 1em; 18 } 19 .filler { 20 display: inline-block; 21 background: cyan; 22 height: 3em; 23 width: 1em; 24 } 25 .target { 26 display: inline-block; 27 background: orange; 28 width: 1em; 29 height: 1em; 30 } 31 div.top, section.top .target { vertical-align: top; } 32 div.text-top, section.text-top .target { vertical-align: text-top; } 33 div.text-bottom, section.text-bottom .target { vertical-align: text-bottom; } 34 div.bottom, section.bottom .target { vertical-align: bottom; } 35 .test .fail { 36 outline: red solid 5px; 37 } 38 </style> 39 <body> 40 <section class="test top"> 41 <div><div class="filler"></div><div class="target" data-y="0"></div></div> 42 <div><div class="filler top"></div><div class="target" data-y="0"></div></div> 43 <div><div class="filler text-top"></div><div class="target" data-y="0"></div></div> 44 <div><div class="filler bottom"></div><div class="target" data-y="0"></div></div> 45 <div><div class="filler text-bottom"></div><div class="target" data-y="0"></div></div> 46 </section> 47 <section class="test text-top"> 48 <div><div class="filler"></div><div class="target" data-y="44"></div></div> 49 <div><div class="filler top"></div><div class="target" data-y="5"></div></div> 50 <div><div class="filler text-top"></div><div class="target" data-y="5"></div></div> 51 <div><div class="filler bottom"></div><div class="target" data-y="35"></div></div> 52 <div><div class="filler text-bottom"></div><div class="target" data-y="40"></div></div> 53 </section> 54 <section class="test text-bottom"> 55 <div><div class="filler"></div><div class="target" data-y="44"></div></div> 56 <div><div class="filler top"></div><div class="target" data-y="5"></div></div> 57 <div><div class="filler text-top"></div><div class="target" data-y="5"></div></div> 58 <div><div class="filler bottom"></div><div class="target" data-y="35"></div></div> 59 <div><div class="filler text-bottom"></div><div class="target" data-y="40"></div></div> 60 </section> 61 <section class="test bottom"> 62 <div><div class="filler"></div><div class="target" data-y="49"></div></div> 63 <div><div class="filler top"></div><div class="target" data-y="40"></div></div> 64 <div><div class="filler text-top"></div><div class="target" data-y="45"></div></div> 65 <div><div class="filler bottom"></div><div class="target" data-y="40"></div></div> 66 <div><div class="filler text-bottom"></div><div class="target" data-y="45"></div></div> 67 </section> 68 <script> 69 setup({explicit_done: true}); 70 document.fonts.ready.then(()=> { 71 for (let target of document.getElementsByClassName('target')) { 72 let container = target.parentElement; 73 let filler = container.firstElementChild; 74 let section = container.parentElement; 75 let pass = false; 76 test(() => { 77 let y = target.offsetTop - container.offsetTop; 78 assert_approx_equals(y, target.dataset.y, 0); 79 pass = true; 80 }, `${section.className.substr(5)}+${filler.className.substr(7)}`); 81 if (!pass) 82 container.classList.add('fail'); 83 } 84 done(); 85 }); 86 </script> 87 </body>