selection-ref.html (5005B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/licenses/publicdomain/ 5 --> 6 <html class="reftest-wait"><head> 7 <title>text-overflow: Selected text, background, decorations</title> 8 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 9 <style type="text/css"> 10 @font-face { 11 font-family: DejaVuSansMono; 12 src: url(../fonts/DejaVuSansMono.woff); 13 } 14 @font-face { 15 font-family: TestEllipsisFallback; 16 src: url(TestEllipsisFallback.woff); 17 } 18 html,body { 19 color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono; 20 } 21 22 .test { 23 overflow:auto; 24 white-space:nowrap; 25 width: 5em; 26 position:relative; 27 margin-top:1em; 28 padding-left: 0.9em; 29 padding-right: 1.3em; 30 } 31 32 .hidden { 33 overflow:hidden; 34 width: 4.4em; 35 } 36 37 .rlo { 38 unicode-bidi: bidi-override; direction: rtl; 39 } 40 .lro { 41 unicode-bidi: bidi-override; direction: ltr; 42 } 43 .rtl { 44 direction:rtl; 45 } 46 i { display:none; } 47 x {font-family:DejaVuSansMono;} 48 </style> 49 <script> 50 function getTextNode(elm) { 51 if (elm.nodeType != 3) 52 return getTextNode(elm.firstChild); 53 return elm; 54 } 55 function addRange(elm) { 56 try { 57 var sel = window.getSelection(); 58 var range = document.createRange(); 59 var startNode = elm.getAttribute('startNode'); 60 if (startNode == null) 61 startNode = getTextNode(elm); 62 else 63 startNode = getTextNode(elm.childNodes[startNode]) 64 var start = elm.getAttribute('start'); 65 if (start == null) start = 2; 66 var endNode = elm.getAttribute('endNode'); 67 if (endNode == null) 68 endNode = startNode; 69 else 70 endNode = getTextNode(elm.childNodes[endNode]) 71 var end = elm.getAttribute('end'); 72 if (end == null) end = endNode.textContent.length; 73 if (startNode==endNode && start > end) return; 74 if (startNode==null) return; 75 range.setStart(startNode, start); 76 range.setEnd(endNode, end); 77 sel.addRange(range); 78 } catch (e) { 79 alert(e+'\n'+elm.id+'\n'+t) 80 } 81 } 82 function selectText() { 83 // For putting selection ranges to multiple editing hosts, we need to put 84 // a range outside all editable elements first, then, selection's ancestor 85 // limiter won't be set to an editing host. 86 getSelection().collapse(document.body, document.body.childNodes.length); 87 var divs = document.getElementsByTagName('div'); 88 for (i = 0; i < divs.length; ++i) { 89 addRange(divs[i]); 90 } 91 var t1 = document.getElementById('t1'); 92 addRange(t1.firstChild); 93 var t2 = document.getElementById('t2'); 94 addRange(t2.firstChild); 95 document.body.offsetHeight; 96 setTimeout(function(){document.documentElement.removeAttribute('class')},2000); 97 } 98 </script> 99 </head><body onload="selectText();"> 100 101 <!-- LTR overflow:hidden --> 102 <div contenteditable="true" inputmode="none" spellcheck="true" class="test ltr hidden" end=6>Mispe|…</div> 103 <span style="display:block;width:15em"><div contenteditable="true" spellcheck="true" class="test ltr hidden" style="width:auto; float:right; font-family:TestEllipsisFallback; text-align:right; width:9em;" start=0 end=0>...<x><i>z</i>d word</x></div></span><br clear="all"> 104 105 <div id="t1" contenteditable="true" inputmode="none" spellcheck="true" class="test ltr hidden"><span class="rlo" endNode="1" start="0" end="6"><i>z</i>d word</span>… </div> 106 <div id="t2" contenteditable="true" inputmode="none" spellcheck="true" class="test ltr hidden" ><span class="rlo" endNode="2" start="1" end="1">…<i>z</i>d word</span></div> 107 <div contenteditable="true" inputmode="none" spellcheck="true" class="test ltr hidden"><span class="rlo">…<i>z</i>d word</div> 108 <div contenteditable="true" inputmode="none" spellcheck="true" class="test ltr hidden" endNode="1" start="2" end="3" style="text-indent:-0.2em"><span> …s</span><span>pe|</span>…<span></span></div> 109 110 <!-- RTL overflow:hidden --> 111 <div contenteditable="true" inputmode="none" spellcheck="true" class="test rtl hidden" endNode="2" start="8" end="6">Misp …<i>z</i>d word</div> 112 <div contenteditable="true" inputmode="none" spellcheck="true" class="test rtl hidden" end="2"><span class="lro"> …<i>z</i>d word</span></div> 113 <div contenteditable="true" inputmode="none" spellcheck="true" class="test rtl hidden" endNode="1" end=0 start=1><span class="lro">…<i>z</i>d</span><span class="rlo"> word</span></div> 114 <div contenteditable="true" inputmode="none" spellcheck="true" class="test rtl hidden"><span class="rlo">Mis</span><span class="rlo">pel… word</div> 115 <div contenteditable="true" inputmode="none" spellcheck="true" class="test rtl hidden"><span class="rlo">Mis</span><span class="rlo">pel… word</div> 116 <div contenteditable="true" inputmode="none" spellcheck="true" class="test rtl hidden"><span class="rlo" style="margin-right:-0.2em"> …s</span><span class="rlo">pel… </span><span class="rlo"> word</span></div> 117 118 </body></html>