elementFromPoint-list-001.html (2434B)
1 <!DOCTYPE html> 2 <title>Test elementFromPoint for list-item</title> 3 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint"> 4 <link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 ul { 9 font-size: 10px; 10 } 11 ul.inside { 12 list-style-position: inside; 13 } 14 .image { 15 list-style-image: url(../../images/green-16x16.png); 16 } 17 .debug-marker { 18 position: absolute; 19 width: 0; 20 height: 0; 21 outline: 2px solid red; 22 } 23 </style> 24 <body> 25 <ul> 26 <li>Outside 1</li> 27 <li>Outside 2</li> 28 <li>Outside 3</li> 29 <li class="image">Image Outside 1</li> 30 <li class="image">Image Outside 2</li> 31 </ul> 32 <ul class="inside"> 33 <li>Inside 1</li> 34 <li>Inside 2</li> 35 <li>Inside 3</li> 36 <li class="image">Image Inside 1</li> 37 <li class="image">Image Inside 2</li> 38 </ul> 39 <script> 40 setup({explicit_done:true}); 41 window.onload = function() { 42 for (let li of document.getElementsByTagName('li')) { 43 test(() => { 44 let bounds = li.getBoundingClientRect(); 45 let style = window.getComputedStyle(li); 46 let y = (bounds.top + bounds.bottom) / 2; 47 if (style.listStylePosition === 'inside') { 48 // Inside markers are normal inline boxes. 49 // It is safe to assume "left + 1" is in the box. 50 let x = bounds.left + 1; 51 addDebugMarker(x, y); 52 let result = document.elementFromPoint(x, y); 53 assert_equals(result, li); 54 } else { 55 // The spec does not define outside marker position. 56 // This code assumes that the marker is within "left - 40" to "left - 1". 57 // This is heuristic, but all browsers seem to pass with this method. 58 let result = null; 59 for (let x = bounds.left - 40; x < bounds.left; x++) { 60 result = document.elementFromPoint(x, y); 61 if (result === li) { 62 addDebugMarker(x, y); 63 break; 64 } 65 } 66 assert_equals(result, li); 67 } 68 }, `<li>${li.textContent}</li>`); 69 } 70 done(); 71 }; 72 73 // Show a marker for the debugging purposes, in case the heuristic doesn't apply. 74 function addDebugMarker(x, y) { 75 let div = document.createElement('div'); 76 div.className = 'debug-marker'; 77 let style = div.style; 78 style.left = x + 'px'; 79 style.top = y + 'px'; 80 document.body.appendChild(div); 81 } 82 </script> 83 </body>