test_range_getClientRectsAndTexts.html (3395B)
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 5 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 6 <script> 7 "use strict"; 8 9 SimpleTest.waitForExplicitFinish(); 10 11 function runTests() { 12 let range = document.createRange(); 13 14 let attempts = [ 15 {startNode: "one", start: 0, endNode: "one", end: 0, textList: [], message: "Empty rect"}, 16 {startNode: "one", start: 2, endNode: "one", end: 6, textList: ["l on"], message: "Single line"}, 17 {startNode: "implicit", start: 6, endNode: "implicit", end: 12, textList: ["it bre"], message: "Implicit break"}, 18 {startNode: "two.a", start: 1, endNode: "two.b", end: 2, textList: ["wo", "", "li"], message: "Two lines"}, 19 {startNode: "embed.a", start: 7, endNode: "embed.b", end: 2, textList: ["th ", "simple nested", " ", "te"], message: "Simple nested"}, 20 {startNode: "deep.a", start: 2, endNode: "deep.b", end: 2, textList: ["ne with ", "complex, more deeply nested", " ", "te"], message: "Complex nested"}, 21 {startNode: "image.a", start: 7, endNode: "image.b", end: 2, textList: ["th inline ", "", " ", "im"], message: "Inline image"}, 22 {startNode: "hyphen1", start: 0, endNode: "hyphen1", end: 3, textList: ["a\u00AD", "b"], message: "Shy hyphen (active)"}, 23 {startNode: "hyphen2", start: 0, endNode: "hyphen2", end: 3, textList: ["c\u00ADd"], message: "Shy hyphen (inactive)"}, 24 {startNode: "hyphen2", start: 0, endNode: "hyphen2", end: 2, textList: ["c\u00AD"], message: "Shy hyphen (inactive, trailing)"}, 25 {startNode: "hyphen2", start: 1, endNode: "hyphen2", end: 3, textList: ["\u00ADd"], message: "Shy hyphen (inactive, leading)"}, 26 {startNode: "uc", start: 0, endNode: "uc", end: 2, textList: ["EF"], message: "UC transform"}, 27 {startNode: "pre", start: 0, endNode: "pre", end: 3, textList: ["g\n", "h"], message: "pre with break"}, 28 ]; 29 30 for (let attempt of attempts) { 31 range.setStart(document.getElementById(attempt.startNode).childNodes[0], attempt.start); 32 range.setEnd(document.getElementById(attempt.endNode).childNodes[0], attempt.end); 33 34 let result = range.getClientRectsAndTexts(); 35 36 is(result.textList.length, attempt.textList.length, attempt.message + " range has expected number of texts."); 37 let i = 0; 38 for (let text of result.textList) { 39 is(text, attempt.textList[i], attempt.message + " matched text index " + i + "."); 40 i++; 41 } 42 } 43 44 SimpleTest.finish(); 45 } 46 </script> 47 </head> 48 <body onLoad="runTests()"> 49 50 <div id="one">All on one line</div> 51 52 <div id="implicit">Implicit 53 break in one line</div> 54 55 <div id="two.a">Two<br/ 56 ><span id="two.b">lines</span></div> 57 58 <div id="embed.a">Line with <span>simple nested</span> <span id="embed.b">text</span></div> 59 60 <div id="deep.a">Line with <span>complex, <span>more <span>deeply <span>nested</span></span></span></span> <span id="deep.b">text</span></div> 61 62 <div id="image.a">Line with inline <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC" width="20" height="20"/> <span id="image.b">image</span></div> 63 64 <div id="hyphen1" style="width:0">a­b</div> 65 66 <div id="hyphen2" style="width:100px">c­d</div> 67 68 <div id="uc" style="text-transform:uppercase">ef</div> 69 70 <pre id="pre">g 71 h</pre> 72 73 </body> 74 </html>