line-clamp-with-abspos-019.html (1557B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: line-clamp hidden abspos should count as ink overflow</title> 4 <link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> 6 <link rel="match" href="reference/line-clamp-with-abspos-019-ref.html"> 7 <meta name="assert" content="Any overflowing content hidden from paint by line-clamp is treated as ink overflow, including absolute positioned boxes, and therefore doesn't cause the scrollable overflow rectangle to grow. Meanwhile, non-hidden abspos count as scrollable overflow."> 8 <style> 9 #scrollContainer { 10 overflow: scroll; 11 position: relative; 12 font: 16px / 32px serif; 13 height: 4lh; 14 border: 1px solid black; 15 } 16 .clamp { 17 line-clamp: 4; 18 padding: 0 4px; 19 background-color: yellow; 20 } 21 .abspos { 22 position: absolute; 23 right: 0; 24 width: 50px; 25 height: 50px; 26 margin: 4px; 27 background-color: skyblue; 28 } 29 .rel { 30 position: relative; 31 } 32 #abspos1 { 33 top: 1lh; 34 } 35 #abspos2 { 36 top: 2lh; 37 } 38 </style> 39 40 <div id="scrollContainer"> 41 <div class="clamp"> 42 <div>Line 1</div> 43 <div>Line 2</div> 44 <div>Line 3</div> 45 <div class="rel">Line 4<div class="abspos" id="abspos1"></div></div> 46 <div>Line 5</div> 47 <div class="rel">Line 6<div class="abspos" id="abspos2"></div></div> 48 </div> 49 </div> 50 51 <script> 52 window.addEventListener("load", () => { 53 const scrollContainer = document.getElementById("scrollContainer"); 54 scrollContainer.scrollTop = scrollContainer.scrollHeight; 55 }); 56 </script>