text-overflow-ellipsis-self-painting.html (971B)
1 <!DOCTYPE html> 2 <title>CSS Basic User Interface Test: ellipsis when there are self-painting objects</title> 3 <link rel="help" href="http://www.w3.org/TR/css3-ui/#text-overflow"> 4 <link rel="help" href="https://crbug.com/1005645"> 5 <link rel="author" href="mailto:kojii@chromium.org"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 .test { 10 width: 5ch; 11 white-space: nowrap; 12 } 13 .ellipsis { 14 text-overflow: ellipsis; 15 overflow: hidden; 16 } 17 span { 18 display: inline-block; 19 width: 16px; 20 height: 16px; 21 background: red; 22 opacity: 0.3; 23 } 24 </style> 25 <body> 26 <div id="test" class="test ellipsis">1234567890 <span></span></div> 27 <div id="ref" class="test">1234567890 <span></span></div> 28 <script> 29 test(() => { 30 const ref_element = document.getElementById('ref'); 31 const test_element = document.getElementById('test'); 32 assert_equals(test_element.scrollWidth, ref_element.scrollWidth); 33 }); 34 </script> 35 </body>