The Tor Browser / file comparison
comparison: layout/generic/crashtests/text-overflow-form-elements.html
layout/generic/crashtests/text-overflow-form-elements.html
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:8cc44da9fac4 |
|---|---|
| 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
| 2 <html><head> | |
| 3 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |
| 4 <title>text-overflow test case</title> | |
| 5 <style type="text/css"> | |
| 6 | |
| 7 .test { | |
| 8 font: 1em bold monospace; | |
| 9 background:lightgrey; | |
| 10 color: black; | |
| 11 margin-left:400px; | |
| 12 } | |
| 13 | |
| 14 .rtl { | |
| 15 direction:rtl; | |
| 16 } | |
| 17 .ltr { | |
| 18 direction:ltr; | |
| 19 } | |
| 20 .rlo > * { | |
| 21 unicode-bidi: bidi-override; direction: rtl; | |
| 22 } | |
| 23 .lro > * { | |
| 24 unicode-bidi: bidi-override; direction: ltr; | |
| 25 } | |
| 26 .b { border: 1px dashed blue; } | |
| 27 .inline-block { | |
| 28 display:inline-block; | |
| 29 } | |
| 30 .ellipsis { | |
| 31 width:4em; | |
| 32 width:6.5ch; | |
| 33 text-overflow: ellipsis; | |
| 34 -o-text-overflow: ellipsis; | |
| 35 overflow:hidden; | |
| 36 } | |
| 37 </style> | |
| 38 <script> | |
| 39 var twoEyes = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAFy7sgCAAAGsUlEQVRo3u2ZbWwcZxHHf3s%2B7LNbO3ZjXBtowprGODRX0qpNQCjmJKuVKhMl1P2AkCwhFOIKkCBSm9IXavGFKAixIAECwkmWo5MrhRI3Ub40IEwQgp6aIDg3Cd6eEqyIHEteah%2B1E69vhw%2BZtTaX8704ZzkKjHS6271nZ56ZZ%2BY%2F%2F%2BdZKF%2FCwYshx3EkkggLsD1v4FQkEZZYLCbAKyG9%2Ba9EIsG6hnUAf8x74K3aUC3j4%2BM54HcsR2oAIomwZOezkv%2FnSHpYNh%2BNCmAE7xv94zvFdd1bHsjMZmQkPSxAJP%2B%2FfuBLwK54PC7JZFKAVJmzXLBt2w%2FMvcDLwIb8QS8CeJ4nkURYIomw7J%2FYJ8BvSiiXptGGxWds2%2Fa9%2Bnaxh%2BYAD%2Bgt04NDgABTpQY2cvvSFLzw86gWeBVwC8SzlOSv2YeBPfmDBoBHgKmR9LBEEmHZfDTqGykqfkUE0nA78BzQGfSgUeP3wNeTXwXg7MwZDhw4UHL6ra2ti79%2FOvljgG8AZ4H64Lhm4MvAocxsRppGG%2FxcXihlwLIs6R%2FfKV2HO%2F26uA94pdDYUKUZUU7W1RQYXA98Gnhaf5%2FXWX0HeAHYoQonqa4sZSOsSWMCWeC9Yko%2BCQwBe4E6oNc0Tc91XTl1%2BaTsn9gnI%2Blhyc5nZWxsrBIkKSbl2tiic3tW53YDEwOKaoFBrcOfqKee53lG9xsPMjV784r%2F4lO%2FpPvyJ9iyZcuvFSaXK5XYeAZ4CDgGvB3MS4B54LQuWYPeuy4iRFsevsXqpuYoqVQKIH2bK1CuDQNo11o4XUzh%2FcDWYIe1LEtyuZx4niee54njOGKapgfsqlL%2Bl2OjEXg8nxrc1dJ0h3hbtL%2BGCtz7KPBF4CuBe9uB15VafE8hr9qylI3HgG8C2%2FK7VyHZoJj7MrBRm30qFotJMpkU27YlHo%2F7Ha5a%2BV%2FKRkSJ4KuKRLVLKapTjB1SzAVIjY2NSXY%2BKyPpYdk%2FsU9OXT4pruv6BdZbBQfKsVGnvWlIe1VB6VQO8JxC1vZYLCbZ%2BaxsPhpdZDyRRFhG0sPiOE6ldKBg2lRg4xF1YCDIIIKN7DGgD3gH%2BBXwejKZfPrs2tPs%2FvPN2bKuYR1nd7xLKBSSJeqoXKnERjPwNWAG%2BLn2rZuM%2B4Tpml6vaWlp4eLcxVusZq5lCgVgOVKJjRqdX86ffL4D5wIoZACnTpw4wRMdT96i%2FImOJxERAs4uVyqxUacF%2FPdiCj%2BjdRBRGFtwXVdG0sPSdbhTmkYbpH98p2RmM2JZlig1vl0GWo4NQ%2Fn%2Bs5pKRXfwjweaxy7TND3HcRZbfC6X8xVPVQlGy7WxVWlO5XRXFXm6EZmrQuSXYyPE3SiVoEhE6Wyr0u2rumO6zv%2B21AFdQAswC1wCMuUCXCmyWQus103Qg8qlDO0lxwOb%2Fl4FiK3AB3VS%2FuKKLtK%2FgbeAnwG%2FvUODuRw%2FFrR0H1UC75fwu8oJ%2FhFsW5VIG%2FBUgEIN6Y65O4AHu4Ap0zQ9y7LEcZyb9lRBUHQcRyzL8unZVBW5bFWAvAp%2BhDQ2g4F47dUYtlU6obXA54DnVdFLekjUGGifh4AFy7LEdV3xj3X9I66m0QZpGm2QrsOd0j%2B%2BU0bSw5KZzYjrun6HWlAd961i4FfCj0aN1Usau%2Bc1lmuXPFwvAEumUut7tQQvAb%2FXb%2FT0bCAej9cODg7yt%2Bm%2F8q2%2F7OUHZ76PnZ1k2p0mJzlykmPancbOTnL0whHs7CQfb%2B5mx2d3sH79%2BtCRI0c6FeaOr9ICrIQfLvA%2B8BGNXxi4R6HrisJVUWrxAVW2oMFf0Aczim8o3kV6enowDIPjF9%2Fk%2BMU3S3rrjzMMg56eHr%2BxP7qKFbASfojG6kpeDGs1tiW53RxwWT%2Bin5q8w4xpQK5evQpAR30H7ZH2khNvj7TTUd8BgD4rqmu1ZKX8qNeY%2BfHz4zlXDgT5E8tpCTUq7XSBC4Euv8227TV9fX1E73%2BYtvo27BmbS9cvFVTY3bSRFza9yOcf6Gfmygy7d%2B%2Fm%2FPnzF4DvrsBLhnJlJfwIKXxv1PheAE4qK6p4H9AGbNKTuhngBPBPXYRe4IemaT5kWZbR19fHNbmGnZ1k4r3U4glDR30Hm5qjbGjsImJEOHbsGHv27JFz5869o0eFq01Jq%2BmHAXwI6FFKagMTgHM7GzFDS%2BoeLSMv7zjzC9x4Y7gxFovVDAwMEI1GaWlpWSzRVCrFwYMH%2FXfxZ4AfAa8B%2F7lDaGg1%2FQgp43lfK0yqtRMuJa3ceKe5DfgYsCYAZ2ngD8CfAkzqTpW7xY%2F%2FSznyX%2FVeUb2kVmX4AAAAAElFTkSuQmCC"; | |
| 40 function initIMG() { | |
| 41 var img = document.getElementsByTagName('img'); | |
| 42 for (i = 0; i < img.length; ++i) | |
| 43 img[i].setAttribute('src', twoEyes); | |
| 44 } | |
| 45 function setTextOverflow(str,quoted) { | |
| 46 var x = document.styleSheets[0]; | |
| 47 var q = quoted ? '"' : ''; | |
| 48 x.insertRule('.ellipsis{text-overflow:' + q + str + q +'}', x.cssRules.length); | |
| 49 } | |
| 50 </script> | |
| 51 </head><body onload="initIMG()"> | |
| 52 text-overflow:"<input placeholder="type text then <ENTER>" onchange='setTextOverflow(this.value,1)'>" | <button onclick="setTextOverflow('ellipsis')">ellipsis</button> | <button onclick="setTextOverflow('clip')">clip</button> (Try "." or "" for example) <br> | |
| 53 | |
| 54 LTR / LTR | |
| 55 <div class="test ltr"> | |
| 56 <span class="ellipsis b inline-block">CSS is awesome</span> | |
| 57 <button class="ellipsis">CSS is awesome</button> | |
| 58 <input type=button class="ellipsis" value="CSS is awesome"> | |
| 59 <input class="ellipsis" value="CSS is awesome"> | |
| 60 <input class="ellipsis" placeholder="CSS is awesome"> | |
| 61 <fieldset style="display:inline" class="ellipsis"><span style="position:relative;left:1em;">CSS is awesome</span></fieldset> | |
| 62 <fieldset style="display:block" class="ellipsis"><span style="position:relative;left:1em;">CSS is awesome</span></fieldset> | |
| 63 <legend class="ellipsis">CSS is awesome</legend> | |
| 64 <textarea class="ellipsis" style="overflow:scroll;width:14em;" wrap="off"> | |
| 65 CSS is awesome CSS is awesome CSS is awesome | |
| 66 CSS is awesome CSS is awesome CSS is awesome | |
| 67 </textarea> | |
| 68 <fieldset style="display:inline"><legend class="ellipsis">CSS is awesome</legend>CSS is awesome</fieldset> | |
| 69 <fieldset style="display:block" class="ellipsis"><legend class="ellipsis">CSS is awesome</legend><span style="position:relative;left:1em;">CSS is awesome</span></fieldset> | |
| 70 <select class="ellipsis"><option>CSS is awesome<option>CSS is awesome<option>CSS is awesome<option>CSS is awesome</select> | |
| 71 <select><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select> | |
| 72 <select size="4"><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select> | |
| 73 <ul style="float:left"><li class="ellipsis b">CSS is awesome</ul> | |
| 74 <br><br></div> | |
| 75 | |
| 76 RTL / LTR | |
| 77 <div class="test rtl"> | |
| 78 <span class="ellipsis b inline-block">CSS is awesome</span> | |
| 79 <button class="ellipsis">CSS is awesome</button> | |
| 80 <input type=button class="ellipsis" value="CSS is awesome"> | |
| 81 <input class="ellipsis" value="CSS is awesome"> | |
| 82 <input class="ellipsis" placeholder="CSS is awesome"> | |
| 83 <fieldset style="display:inline" class="ellipsis"><span style="position:relative;right:1em;">CSS is awesome</span></fieldset> | |
| 84 <fieldset style="display:block" class="ellipsis"><span style="position:relative;right:1em;">CSS is awesome</span></fieldset> | |
| 85 <legend class="ellipsis">CSS is awesome</legend> | |
| 86 <textarea class="ellipsis" style="overflow:scroll;width:14em;" wrap="off"> | |
| 87 CSS is awesome CSS is awesome CSS is awesome | |
| 88 CSS is awesome CSS is awesome CSS is awesome | |
| 89 </textarea> | |
| 90 <fieldset style="display:inline"><legend class="ellipsis">CSS is awesome</legend>CSS is awesome</fieldset> | |
| 91 <fieldset style="display:block" class="ellipsis"><legend class="ellipsis">CSS is awesome</legend><span style="position:relative;right:1em;">CSS is awesome</span></fieldset> | |
| 92 <select class="ellipsis"><option>CSS is awesome<option>CSS is awesome<option>CSS is awesome<option>CSS is awesome</select> | |
| 93 <select><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select> | |
| 94 <select size="4"><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select> | |
| 95 <ul style="float:left"><li class="ellipsis b">CSS is awesome</ul> | |
| 96 <br><br></div> | |
| 97 | |
| 98 LTR / RTL | |
| 99 <div class="test ltr rlo"> | |
| 100 <span class="ellipsis b inline-block">CSS is awesome</span> | |
| 101 <button class="ellipsis">CSS is awesome</button> | |
| 102 <input type=button class="ellipsis" value="CSS is awesome"> | |
| 103 <input class="ellipsis" value="CSS is awesome"> | |
| 104 <input class="ellipsis" placeholder="CSS is awesome"> | |
| 105 <fieldset style="display:inline" class="ellipsis"><span style="position:relative;right:1em;">CSS is awesome</span></fieldset> | |
| 106 <fieldset style="display:block" class="ellipsis"><span style="position:relative;right:1em;">CSS is awesome</span></fieldset> | |
| 107 <legend class="ellipsis">CSS is awesome</legend> | |
| 108 <textarea class="ellipsis" style="overflow:scroll;width:14em;" wrap="off"> | |
| 109 CSS is awesome CSS is awesome CSS is awesome | |
| 110 CSS is awesome CSS is awesome CSS is awesome | |
| 111 </textarea> | |
| 112 <fieldset style="display:inline"><legend class="ellipsis">CSS is awesome</legend>CSS is awesome</fieldset> | |
| 113 <fieldset style="display:block" class="ellipsis"><legend class="ellipsis">CSS is awesome</legend><span style="position:relative;right:1em;">CSS is awesome</span></fieldset> | |
| 114 <select class="ellipsis"><option>CSS is awesome<option>CSS is awesome<option>CSS is awesome<option>CSS is awesome</select> | |
| 115 <select><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select> | |
| 116 <select size="4"><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select> | |
| 117 <ul style="float:left"><li class="ellipsis b">CSS is awesome</ul> | |
| 118 <br><br></div> | |
| 119 | |
| 120 RTL / RTL | |
| 121 <div class="test rtl rlo"> | |
| 122 <span class="ellipsis b inline-block">CSS is awesome</span> | |
| 123 <button class="ellipsis">CSS is awesome</button> | |
| 124 <input type=button class="ellipsis" value="CSS is awesome"> | |
| 125 <input class="ellipsis" value="CSS is awesome"> | |
| 126 <input class="ellipsis" placeholder="CSS is awesome"> | |
| 127 <fieldset style="display:inline" class="ellipsis"><span style="position:relative;right:1em;">CSS is awesome</span></fieldset> | |
| 128 <fieldset style="display:block" class="ellipsis"><span style="position:relative;right:1em;">CSS is awesome</span></fieldset> | |
| 129 <legend class="ellipsis">CSS is awesome</legend> | |
| 130 <textarea class="ellipsis" style="overflow:scroll;width:14em;" wrap="off"> | |
| 131 CSS is awesome CSS is awesome CSS is awesome | |
| 132 CSS is awesome CSS is awesome CSS is awesome | |
| 133 </textarea> | |
| 134 <fieldset style="display:inline"><legend class="ellipsis">CSS is awesome</legend>CSS is awesome</fieldset> | |
| 135 <fieldset style="display:block" class="ellipsis"><legend class="ellipsis">CSS is awesome</legend><span style="position:relative;right:1em;">CSS is awesome</span></fieldset> | |
| 136 <select class="ellipsis"><option>CSS is awesome<option>CSS is awesome<option>CSS is awesome<option>CSS is awesome</select> | |
| 137 <select><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select> | |
| 138 <select size="4"><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select> | |
| 139 <ul style="float:left"><li class="ellipsis b">CSS is awesome</ul> | |
| 140 <br><br></div> | |
| 141 | |
| 142 | |
| 143 | |
| 144 </body></html> |
