test_text-fragments-get-text-directive-ranges.html (3134B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Text Fragment Chrome-only API Test</title> 5 <meta charset="UTF-8"> 6 <script src="/tests/SimpleTest/SimpleTest.js"></script> 7 <script src="/tests/SimpleTest/GleanTest.js"></script> 8 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 9 </head> 10 <body> 11 <p> 12 sample text. 13 </p> 14 15 <script> 16 SimpleTest.waitForExplicitFinish(); 17 18 async function changeHash(newHash) { 19 let hashChange = new Promise(r => window.addEventListener('hashchange', r, { once: true })); 20 location.hash = newHash; 21 await hashChange; 22 } 23 24 async function testGetTextDirectiveRangesAndRemoveRanges() { 25 const directiveFindTimeStart = await GleanTest.domTextfragment.findDirectives.testGetValue() ?? {count: 0}; 26 console.log(directiveFindTimeStart.count); 27 28 await changeHash('#:~:text=sample%20text'); 29 30 let ranges = SpecialPowers.wrap(document).fragmentDirective.getTextDirectiveRanges(); 31 is(ranges.length, 1, 'Should have one text directive range'); 32 33 const rangeText = ranges[0].toString(); 34 is(rangeText, "sample text", 'The range text should match the expected text'); 35 36 SpecialPowers.wrap(document).fragmentDirective.removeAllTextDirectives(); 37 38 ranges = SpecialPowers.wrap(document).fragmentDirective.getTextDirectiveRanges(); 39 40 is(ranges.length, 0, "Should have removed all text directive ranges"); 41 42 const directiveFindTime1 = await GleanTest.domTextfragment.findDirectives.testGetValue(); 43 is(directiveFindTime1.count, directiveFindTimeStart.count + 1, "1: Glean should have recorded the time it took to find the text directive"); 44 45 await changeHash("#:~:text=sample&text=text"); 46 47 ranges = SpecialPowers.wrap(document).fragmentDirective.getTextDirectiveRanges(); 48 is(ranges.length, 2, 'Should have two text directive ranges'); 49 is(ranges[0].toString(), "sample", "The first text directive should be the first range"); 50 is(ranges[1].toString(), "text", "The second text directive should be the second range"); 51 52 SpecialPowers.wrap(document).fragmentDirective.removeAllTextDirectives(); 53 54 await changeHash("#:~:text=text&text=sample"); 55 56 ranges = SpecialPowers.wrap(document).fragmentDirective.getTextDirectiveRanges(); 57 is(ranges.length, 2, 'Should have two text directive ranges'); 58 59 // This mirrors the behavior of `Selection`, where the ranges are sorted by 60 // their position in the document. I'm not sure I want this. 61 is(ranges[0].toString(), "sample", "The first text directive should be the first range"); 62 is(ranges[1].toString(), "text", "The second text directive should be the second range"); 63 64 SpecialPowers.wrap(document).fragmentDirective.removeAllTextDirectives(); 65 } 66 67 async function runTests() { 68 try { 69 await SpecialPowers.pushPrefEnv({"set": [ 70 ["dom.text_fragments.enabled", true], 71 ]}); 72 await testGetTextDirectiveRangesAndRemoveRanges(); 73 } 74 finally { 75 SimpleTest.finish(); 76 } 77 } 78 79 document.body.onload = runTests; 80 </script> 81 </body> 82 </html>