text-overflow-017.html (1198B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Basic User Interface Test: interacting with the ellipsis</title> 5 <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> 6 <link rel="help" href="http://www.w3.org/TR/css3-ui/#text-overflow"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <meta name="assert" content="Ellipsing must not prevent dispatching of pointer events."> 12 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 13 <style> 14 #test { 15 overflow: hidden; 16 text-overflow: ellipsis; 17 margin-left: -100px; 18 width: 2.5em; 19 height: 1em; 20 white-space: pre; 21 font: 100px/1 Ahem; 22 color: blue; 23 } 24 #desc { 25 float: left; 26 } 27 </style> 28 29 <div id="desc">First, click the blue box. </div> 30 <div id="test"> </div> 31 <script> 32 33 let test = document.getElementById("test"); 34 35 promise_test(async t => { 36 await document.fonts.ready; 37 38 let clicked = false; 39 test.addEventListener("click", () => { 40 clicked = true; 41 }); 42 43 await test_driver.click(test); 44 45 assert_true(clicked); 46 }); 47 48 </script>