block-ellipsis-repaint-004.html (1321B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>CSS Overflow: line-clamp ellipsis repaint tests</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/#block-ellipsis"> 7 <link rel="match" href="reference/block-ellipsis-repaint-004-ref.html"> 8 <meta name="assert" content="This test makes sure that, if the inline root containing the ellipsis changes the styles that affect the ellipsis, the ellipsis will indeed change; and that this will happen even if nothing else needs to be repainted."> 9 <script src="/common/reftest-wait.js"></script> 10 <style> 11 #clamp { 12 line-clamp: 3; 13 border: 1px solid black; 14 padding: 4px; 15 background-color: yellow; 16 17 font: 16px/0 serif; 18 19 & span { 20 font: 16px/16px serif; 21 } 22 } 23 </style> 24 25 <p>The ellipsis should be bold and twice as large as the rest of the text.</p> 26 27 <div id="clamp"> 28 <span> 29 Line 1 <br> 30 Line 2 <br> 31 Line 3 <br> 32 Line 4 33 </span> 34 </div> 35 36 <script> 37 window.onload = () => { 38 requestAnimationFrame(() => { 39 requestAnimationFrame(() => { 40 document.getElementById("clamp").style.fontSize = "32px"; 41 document.getElementById("clamp").style.fontWeight = "bold"; 42 takeScreenshot(); 43 }); 44 }); 45 }; 46 </script>