text-selection.html (3140B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Pseudo-Elements Test: Text selection</title> 4 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#treelike"> 5 <link rel="help" href="https://drafts.csswg.org/css-ui/#user-interaction"> 6 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 7 <meta name="assert" content="This test checks that text in a ::before or ::marker pseudo-element can't be selected." /> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 9 <style> 10 .test { 11 font: 10px/1 Ahem; 12 margin-left: 200px; 13 } 14 #before::before { 15 content: "::before"; 16 display: inline-block; 17 margin-left: -80px; 18 } 19 #marker { 20 display: list-item; 21 list-style-type: "::marker"; 22 } 23 #before-marker::before { 24 content: ""; 25 display: list-item; 26 list-style-type: "::marker"; 27 height: 0; 28 } 29 </style> 30 <div class="test" id="before"><span>helloworld</span></div> 31 <div class="test" id="marker"><span>helloworld</span></div> 32 <div class="test" id="before-marker"><span>helloworld</span></div> 33 <script src="/resources/testharness.js"></script> 34 <script src="/resources/testharnessreport.js"></script> 35 <script src="/resources/testdriver.js"></script> 36 <script src="/resources/testdriver-actions.js"></script> 37 <script src="/resources/testdriver-vendor.js"></script> 38 <script> 39 function createSelection(element, start, end, step) { 40 getSelection().empty(); 41 step = Math.abs(step); 42 const actions = new test_driver.Actions(); 43 actions.pointerMove(start, 0, {origin: element}); 44 actions.pointerDown(); 45 if (start < end) { 46 for (let x = start + step; x < end; x += step) 47 actions.pointerMove(x, 0, {origin: element}); 48 } else { 49 for (let x = start - step; x > end; x -= step) 50 actions.pointerMove(x, 0, {origin: element}); 51 } 52 actions.pointerMove(end, 0, {origin: element}); 53 actions.pointerUp(); 54 return actions.send(); 55 } 56 (async function() { 57 setup({ explicit_done: true }); 58 for (let target of document.querySelectorAll(".test")) { 59 const contents = target.querySelector("span"); 60 const text = contents.firstChild; 61 const s = getSelection(); 62 63 // Create a selection that starts in the middle of the element contents 64 // and ends in the middle of the pseudo-element 65 await createSelection(contents, 0, -90, 10); 66 test(function(t) { 67 assert_equals(s.toString(), "hello", "toString"); 68 assert_equals(s.anchorNode, text, "anchorNode"); 69 assert_equals(s.anchorOffset, 5, "anchorOffset"); 70 assert_equals(s.focusNode, text, "focusNode"); 71 assert_equals(s.focusOffset, 0, "focusOffset"); 72 }, "Selection ending in ::" + target.id); 73 74 // Create a selection that starts and ends inside the pseudo-element. 75 await createSelection(contents, -80, -110, 10); 76 test(function(t) { 77 assert_equals(s.toString(), "", "toString"); 78 assert_in_array(s.anchorNode, [text, null], "anchorNode"); 79 assert_equals(s.anchorOffset, 0, "anchorOffset"); 80 assert_in_array(s.focusNode, [text, null], "focusNode"); 81 assert_equals(s.focusOffset, 0, "focusOffset"); 82 }, "Selection contained in ::" + target.id); 83 } 84 done(); 85 })(); 86 </script>