| <!DOCTYPE html> |
| <title>Test elementFromPoint for list-item</title> |
| <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint"> |
| <link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| ul { |
| font-size: 10px; |
| } |
| ul.inside { |
| list-style-position: inside; |
| } |
| .image { |
| list-style-image: url(../../images/green-16x16.png); |
| } |
| .debug-marker { |
| position: absolute; |
| width: 0; |
| height: 0; |
| outline: 2px solid red; |
| } |
| </style> |
| <body> |
| <ul> |
| <li>Outside 1</li> |
| <li>Outside 2</li> |
| <li>Outside 3</li> |
| <li class="image">Image Outside 1</li> |
| <li class="image">Image Outside 2</li> |
| </ul> |
| <ul class="inside"> |
| <li>Inside 1</li> |
| <li>Inside 2</li> |
| <li>Inside 3</li> |
| <li class="image">Image Inside 1</li> |
| <li class="image">Image Inside 2</li> |
| </ul> |
| <script> |
| setup({explicit_done:true}); |
| window.onload = function() { |
| for (let li of document.getElementsByTagName('li')) { |
| test(() => { |
| let bounds = li.getBoundingClientRect(); |
| let style = window.getComputedStyle(li); |
| let y = (bounds.top + bounds.bottom) / 2; |
| if (style.listStylePosition === 'inside') { |
| // Inside markers are normal inline boxes. |
| // It is safe to assume "left + 1" is in the box. |
| let x = bounds.left + 1; |
| addDebugMarker(x, y); |
| let result = document.elementFromPoint(x, y); |
| assert_equals(result, li); |
| } else { |
| // The spec does not define outside marker position. |
| // This code assumes that the marker is within "left - 40" to "left - 1". |
| // This is heuristic, but all browsers seem to pass with this method. |
| let result = null; |
| for (let x = bounds.left - 40; x < bounds.left; x++) { |
| result = document.elementFromPoint(x, y); |
| if (result === li) { |
| addDebugMarker(x, y); |
| break; |
| } |
| } |
| assert_equals(result, li); |
| } |
| }, `<li>${li.textContent}</li>`); |
| } |
| done(); |
| }; |
| |
| // Show a marker for the debugging purposes, in case the heuristic doesn't apply. |
| function addDebugMarker(x, y) { |
| let div = document.createElement('div'); |
| div.className = 'debug-marker'; |
| let style = div.style; |
| style.left = x + 'px'; |
| style.top = y + 'px'; |
| document.body.appendChild(div); |
| } |
| </script> |
| </body> |
