select-end-of-line-image.tentative.html (1766B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>Selection: Select the image at the end of the line</title> 5 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 6 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1745435"> 8 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/resources/testdriver.js"></script> 12 <script src="/resources/testdriver-actions.js"></script> 13 <script src='/resources/testdriver-vendor.js'></script> 14 15 <style> 16 img { 17 inline-size: 100px; 18 block-size: 20px; 19 background: orange; 20 } 21 </style> 22 23 <body> 24 You shouldn't see an orange image at the end of this line 25 <img id="target" src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><text>hello</text></svg>'> 26 </body> 27 28 <script> 29 promise_test(async function() { 30 let target = document.getElementById("target"); 31 let actions = new test_driver.Actions(); 32 33 // Move the pointer from the left edge of the image, to the right for about 34 // 3/4 width of the image. This should be sufficient to select the image. 35 await actions.pointerMove(0, 10, {origin: target}) 36 .pointerDown() 37 .pointerMove(75, 10, {origin: target}) 38 .pointerUp() 39 .send(); 40 41 // Delete the image to verify the image is selected. It's tricky to verify 42 // it using Range API. 43 window.getSelection().deleteFromDocument(); 44 45 assert_equals(document.getElementById("target"), null, 46 "The image should be selected and then deleted.") 47 }, "Select image at the end of the line."); 48 </script> 49 </html>