elementFromPoint-ellipsis-in-inline-box.html (1096B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint" /> 3 <link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 .ellipsis { 8 overflow: hidden; 9 text-overflow: ellipsis; 10 } 11 </style> 12 </head> 13 <body> 14 <div style="width: 100px"> 15 <div> 16 <span><span class="item" style="display: inline-block">XXXXXXXXXXXXXXXXXXXX</span></span> 17 </div> 18 <div class="ellipsis"> 19 <span><span class="item" style="display: inline-block">XXXXXXXXXXXXXXXXXXXX</span></span> 20 </div> 21 <div class="ellipsis"> 22 <span><span class="item" style="display: inline-flex;">XXXXXXXXXXXXXXXXXXXX</span></span> 23 </div> 24 </div> 25 <div id="log"></div> 26 <script> 27 for (const item of document.getElementsByClassName('item')) { 28 test(() => { 29 const bounds = item.getBoundingClientRect(); 30 const result = document.elementFromPoint(bounds.x + 10, bounds.y + bounds.height / 2); 31 assert_equals(result, item); 32 }); 33 } 34 </script> 35 </body> 36 </html>