marker-hit-testing.html (3151B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Pseudo-Elements Test: Hit testing ::marker</title> 4 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> 5 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 6 <meta name="assert" content="This test checks that hit-testing a ::marker, the APIs provide the nearest element ancestor." /> 7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 8 <style> 9 ol { 10 display: inline-block; 11 padding-left: 100px; 12 } 13 li { 14 font: 50px/100px Ahem; 15 width: 50px; 16 } 17 .inside { 18 list-style-position: inside; 19 } 20 .image { 21 list-style-image: url("/images/green-100x50.png"); 22 } 23 .string { 24 list-style-type: "X"; 25 } 26 .marker::marker { 27 content: "X"; 28 } 29 .nested { 30 display: block; 31 } 32 .nested::before { 33 content: ''; 34 display: list-item; 35 } 36 </style> 37 <!-- The <li> are 50px wide, and the ::marker are at least 50px wide. 38 Since they are outside, try to locate them at -40px to the left of 39 the <li>, i.e. -65px from the center of the <li> --> 40 <ol class="outside" data-x="-65"> 41 <li class="image"></li> 42 <li class="string"></li> 43 <li class="marker"></li> 44 <li class="nested image"></li> 45 <li class="nested string"></li> 46 </ol> 47 <!-- The <li> are 50px wide, and the inside ::marker are at least 50px, 48 so locate them at the horizontal center of the <li> --> 49 <ol class="inside" data-x="0"> 50 <li class="image"></li> 51 <li class="string"></li> 52 <li class="marker"></li> 53 <li class="nested image"></li> 54 <li class="nested string"></li> 55 </ol> 56 <script src="/resources/testharness.js"></script> 57 <script src="/resources/testharnessreport.js"></script> 58 <script src="/resources/testdriver.js"></script> 59 <script src="/resources/testdriver-actions.js"></script> 60 <script src="/resources/testdriver-vendor.js"></script> 61 <script> 62 function check(event, li) { 63 assert_equals(event.target, li, "event.target"); 64 if (event.path) { 65 assert_equals(event.path[0], li, "event.path"); 66 } 67 const el = document.elementFromPoint(event.clientX, event.clientY); 68 assert_equals(el, li, "elementFromPoint"); 69 } 70 setup({ explicit_done: true }); 71 addEventListener("load", async function() { 72 for (let list of document.querySelectorAll("ol")) { 73 for (let li of list.querySelectorAll("li")) { 74 const listener = e => check(e, li); 75 async_test(function(t) { 76 document.addEventListener("mousedown", t.step_func_done(listener)); 77 }, list.className + " " + li.className + " ::marker's content"); 78 async_test(function(t) { 79 document.addEventListener("mouseup", t.step_func_done(listener)); 80 }, list.className + " " + li.className + " ::marker"); 81 await new test_driver.Actions() 82 // Send an event at the vertical middle of the <li>, this should 83 // hit the contents of the ::marker 84 .pointerMove(+list.dataset.x, 0, {origin: li}) 85 .pointerDown() 86 // The ::marker is 100px tall but its contents only 50px tall. 87 // Send an event inside the ::marker but above its contents. 88 .pointerMove(+list.dataset.x, -40, {origin: li}) 89 .pointerUp() 90 .send(); 91 } 92 } 93 done(); 94 }); 95 </script>