empty-span-size-001.html (1594B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-inline-3/#invisible-line-boxes"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1931466"> 6 <link rel="match" href="empty-span-size-001-ref.html"> 7 <style> 8 .container, .has-height { 9 border: 1px solid; 10 } 11 12 .inline { 13 outline: 1px solid; 14 } 15 16 input { 17 outline: 1px solid; 18 background: transparent; 19 padding: 0; 20 border: 0; 21 line-height: 10px; 22 vertical-align: top; 23 } 24 25 .oa { 26 overflow: hidden; 27 height: 100px; 28 } 29 30 .filler { 31 height: 100px; 32 box-sizing: border-box; 33 border: 1px solid; 34 } 35 36 .bad { 37 background: red; 38 } 39 40 ul { 41 margin: 0; 42 } 43 44 li { 45 width: 0; 46 } 47 48 </style> 49 <!-- Empty inline element in empty line has a height of zero. --> 50 <div class="container"><span class="inline"></span></div><br> 51 <!-- Empty inline element should not contribute to scrollable overflow. --> 52 <div class="container oa"> 53 <div class="filler bad"></div> 54 <span id="scrollTarget"></span> 55 <div class="filler"></div> 56 </div><br> 57 <!-- ... But not if the line has a meaningful height. --> 58 <div class="container"><span class="inline"></span><span class="has-height"></span><span class="inline"></span></div><br> 59 <!-- ... Or if the line is present in some kind of context that gives a meaningful height. --> 60 <div class="container"><ul><li></li><li></li></ul></div><br> 61 <div class="container"><input type="button" value=""></div><br> 62 <script> 63 scrollTarget.scrollIntoView(); 64 document.documentElement.className = ""; 65 </script> 66 </html>