scrollable-overflow-padding-inline.html (2195B)
1 <!DOCTYPE html> 2 <title>CSS Overflow Test: Ensure that padding inflation for inline elements are carried out as part of containing line box's bounds.</title> 3 <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1934960"> 6 <link rel="stylesheet" href="/fonts/ahem.css"> 7 <meta name="viewport" content="width=device-width,initial-scale=1"> 8 <style> 9 .scroller { 10 width: 100px; 11 height: 100px; 12 font: 10px/1 Ahem; 13 padding: 10px; 14 overflow: scroll; 15 } 16 .filler { 17 width: 1px; 18 height: 100px; 19 background: purple; 20 } 21 </style> 22 <script src="/resources/testharness.js"></script> 23 <script src="/resources/testharnessreport.js"></script> 24 <script src="/resources/check-layout-th.js"></script> 25 <body onload="checkLayout('.scroller')"> 26 <!-- Block-end is padding-inflated from the last line, 27 even if it only consists of inline elements --> 28 <div class="scroller" data-expected-scroll-height="130"> 29 <div class="filler"></div> 30 <span>X</span> 31 </div> 32 <!-- Inline element's margin should not add to scrollable overflow, 33 just like how it does not affect the next line's positioning --> 34 <div class="scroller" data-expected-scroll-height="130"> 35 <div class="filler"></div> 36 <span style="margin-bottom: 100px;">X</span> 37 </div> 38 <!-- Line bound is padding-inflated, but not its overflow. --> 39 <div class="scroller" data-expected-scroll-height="120" style="line-height: 0;"> 40 <div class="filler"></div> 41 <span>X</span> 42 </div> 43 <div class="scroller" data-expected-scroll-height="125" style="line-height: 5px;"> 44 <div class="filler"></div> 45 <span>X</span> 46 </div> 47 <!-- Ruby element, despite being `display: ruby`, behaves as if inline --> 48 <div class="scroller" data-expected-scroll-height="120" style="line-height: 0;"> 49 <div class="filler"></div> 50 <ruby>X</ruby> 51 </div> 52 <!-- Inline replaced elements still trigger padding-inflation --> 53 <div class="scroller" data-expected-scroll-height="280" style="line-height: 0px;"> 54 <div class="filler"></div> 55 <img src="../css-images/support/60x60-green.png" style="margin-bottom: 100px;"></img> 56 </div> 57 </body>