webkit-line-clamp-048.html (1522B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>CSS Overflow: -webkit-line-clamp display invalidation test</title> 5 <link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> 7 <link rel="match" href="reference/webkit-line-clamp-001-ref.html"> 8 <meta name="assert" content="-webkit-line-clamp needs a specified value of `display: -webkit-box`, but the computed value is set to `display: flow-root`. This test checks that changing the specified value from `-webkit-box` to `flow-root` makes the box no longer a line-clamp container."> 9 <script src="/common/reftest-wait.js"></script> 10 <style> 11 .clamp { 12 display: -webkit-box; 13 -webkit-box-orient: vertical; 14 -webkit-line-clamp: 4; 15 overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ 16 font: 16px / 32px serif; 17 white-space: pre; 18 background-color: yellow; 19 } 20 </style> 21 <div class="clamp">Line 1 22 Line 2 23 Line 3 24 Line 4 25 Line 5</div> 26 27 <script> 28 requestAnimationFrame(() => { 29 requestAnimationFrame(() => { 30 // When `display: -webkit-box` is present with -webkit-line-clamp, its 31 // computed value becomes `display: flow-root`, but the -webkit-line-clamp 32 // behavior needs `-webkit-box` as the specified value. 33 const clampEl = document.querySelector(".clamp"); 34 clampEl.style.display = getComputedStyle(clampEl).display; 35 takeScreenshot(); 36 }); 37 }); 38 </script>