layout/generic/crashtests/text-overflow-form-elements.html@b8a032363ba2 (annotated)
layout/generic/crashtests/text-overflow-form-elements.html
Thu, 22 Jan 2015 13:21:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 22 Jan 2015 13:21:57 +0100
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
- permissions
- -rw-r--r--
Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6
| michael@0 | 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| michael@0 | 2 | <html><head> |
| michael@0 | 3 | <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| michael@0 | 4 | <title>text-overflow test case</title> |
| michael@0 | 5 | <style type="text/css"> |
| michael@0 | 6 | |
| michael@0 | 7 | .test { |
| michael@0 | 8 | font: 1em bold monospace; |
| michael@0 | 9 | background:lightgrey; |
| michael@0 | 10 | color: black; |
| michael@0 | 11 | margin-left:400px; |
| michael@0 | 12 | } |
| michael@0 | 13 | |
| michael@0 | 14 | .rtl { |
| michael@0 | 15 | direction:rtl; |
| michael@0 | 16 | } |
| michael@0 | 17 | .ltr { |
| michael@0 | 18 | direction:ltr; |
| michael@0 | 19 | } |
| michael@0 | 20 | .rlo > * { |
| michael@0 | 21 | unicode-bidi: bidi-override; direction: rtl; |
| michael@0 | 22 | } |
| michael@0 | 23 | .lro > * { |
| michael@0 | 24 | unicode-bidi: bidi-override; direction: ltr; |
| michael@0 | 25 | } |
| michael@0 | 26 | .b { border: 1px dashed blue; } |
| michael@0 | 27 | .inline-block { |
| michael@0 | 28 | display:inline-block; |
| michael@0 | 29 | } |
| michael@0 | 30 | .ellipsis { |
| michael@0 | 31 | width:4em; |
| michael@0 | 32 | width:6.5ch; |
| michael@0 | 33 | text-overflow: ellipsis; |
| michael@0 | 34 | -o-text-overflow: ellipsis; |
| michael@0 | 35 | overflow:hidden; |
| michael@0 | 36 | } |
| michael@0 | 37 | </style> |
| michael@0 | 38 | <script> |
| michael@0 | 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"; |
| michael@0 | 40 | function initIMG() { |
| michael@0 | 41 | var img = document.getElementsByTagName('img'); |
| michael@0 | 42 | for (i = 0; i < img.length; ++i) |
| michael@0 | 43 | img[i].setAttribute('src', twoEyes); |
| michael@0 | 44 | } |
| michael@0 | 45 | function setTextOverflow(str,quoted) { |
| michael@0 | 46 | var x = document.styleSheets[0]; |
| michael@0 | 47 | var q = quoted ? '"' : ''; |
| michael@0 | 48 | x.insertRule('.ellipsis{text-overflow:' + q + str + q +'}', x.cssRules.length); |
| michael@0 | 49 | } |
| michael@0 | 50 | </script> |
| michael@0 | 51 | </head><body onload="initIMG()"> |
| michael@0 | 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> |
| michael@0 | 53 | |
| michael@0 | 54 | LTR / LTR |
| michael@0 | 55 | <div class="test ltr"> |
| michael@0 | 56 | <span class="ellipsis b inline-block">CSS is awesome</span> |
| michael@0 | 57 | <button class="ellipsis">CSS is awesome</button> |
| michael@0 | 58 | <input type=button class="ellipsis" value="CSS is awesome"> |
| michael@0 | 59 | <input class="ellipsis" value="CSS is awesome"> |
| michael@0 | 60 | <input class="ellipsis" placeholder="CSS is awesome"> |
| michael@0 | 61 | <fieldset style="display:inline" class="ellipsis"><span style="position:relative;left:1em;">CSS is awesome</span></fieldset> |
| michael@0 | 62 | <fieldset style="display:block" class="ellipsis"><span style="position:relative;left:1em;">CSS is awesome</span></fieldset> |
| michael@0 | 63 | <legend class="ellipsis">CSS is awesome</legend> |
| michael@0 | 64 | <textarea class="ellipsis" style="overflow:scroll;width:14em;" wrap="off"> |
| michael@0 | 65 | CSS is awesome CSS is awesome CSS is awesome |
| michael@0 | 66 | CSS is awesome CSS is awesome CSS is awesome |
| michael@0 | 67 | </textarea> |
| michael@0 | 68 | <fieldset style="display:inline"><legend class="ellipsis">CSS is awesome</legend>CSS is awesome</fieldset> |
| michael@0 | 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> |
| michael@0 | 70 | <select class="ellipsis"><option>CSS is awesome<option>CSS is awesome<option>CSS is awesome<option>CSS is awesome</select> |
| michael@0 | 71 | <select><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select> |
| michael@0 | 72 | <select size="4"><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select> |
| michael@0 | 73 | <ul style="float:left"><li class="ellipsis b">CSS is awesome</ul> |
| michael@0 | 74 | <br><br></div> |
| michael@0 | 75 | |
| michael@0 | 76 | RTL / LTR |
| michael@0 | 77 | <div class="test rtl"> |
| michael@0 | 78 | <span class="ellipsis b inline-block">CSS is awesome</span> |
| michael@0 | 79 | <button class="ellipsis">CSS is awesome</button> |
| michael@0 | 80 | <input type=button class="ellipsis" value="CSS is awesome"> |
| michael@0 | 81 | <input class="ellipsis" value="CSS is awesome"> |
| michael@0 | 82 | <input class="ellipsis" placeholder="CSS is awesome"> |
| michael@0 | 83 | <fieldset style="display:inline" class="ellipsis"><span style="position:relative;right:1em;">CSS is awesome</span></fieldset> |
| michael@0 | 84 | <fieldset style="display:block" class="ellipsis"><span style="position:relative;right:1em;">CSS is awesome</span></fieldset> |
| michael@0 | 85 | <legend class="ellipsis">CSS is awesome</legend> |
| michael@0 | 86 | <textarea class="ellipsis" style="overflow:scroll;width:14em;" wrap="off"> |
| michael@0 | 87 | CSS is awesome CSS is awesome CSS is awesome |
| michael@0 | 88 | CSS is awesome CSS is awesome CSS is awesome |
| michael@0 | 89 | </textarea> |
| michael@0 | 90 | <fieldset style="display:inline"><legend class="ellipsis">CSS is awesome</legend>CSS is awesome</fieldset> |
| michael@0 | 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> |
| michael@0 | 92 | <select class="ellipsis"><option>CSS is awesome<option>CSS is awesome<option>CSS is awesome<option>CSS is awesome</select> |
| michael@0 | 93 | <select><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select> |
| michael@0 | 94 | <select size="4"><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select> |
| michael@0 | 95 | <ul style="float:left"><li class="ellipsis b">CSS is awesome</ul> |
| michael@0 | 96 | <br><br></div> |
| michael@0 | 97 | |
| michael@0 | 98 | LTR / RTL |
| michael@0 | 99 | <div class="test ltr rlo"> |
| michael@0 | 100 | <span class="ellipsis b inline-block">CSS is awesome</span> |
| michael@0 | 101 | <button class="ellipsis">CSS is awesome</button> |
| michael@0 | 102 | <input type=button class="ellipsis" value="CSS is awesome"> |
| michael@0 | 103 | <input class="ellipsis" value="CSS is awesome"> |
| michael@0 | 104 | <input class="ellipsis" placeholder="CSS is awesome"> |
| michael@0 | 105 | <fieldset style="display:inline" class="ellipsis"><span style="position:relative;right:1em;">CSS is awesome</span></fieldset> |
| michael@0 | 106 | <fieldset style="display:block" class="ellipsis"><span style="position:relative;right:1em;">CSS is awesome</span></fieldset> |
| michael@0 | 107 | <legend class="ellipsis">CSS is awesome</legend> |
| michael@0 | 108 | <textarea class="ellipsis" style="overflow:scroll;width:14em;" wrap="off"> |
| michael@0 | 109 | CSS is awesome CSS is awesome CSS is awesome |
| michael@0 | 110 | CSS is awesome CSS is awesome CSS is awesome |
| michael@0 | 111 | </textarea> |
| michael@0 | 112 | <fieldset style="display:inline"><legend class="ellipsis">CSS is awesome</legend>CSS is awesome</fieldset> |
| michael@0 | 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> |
| michael@0 | 114 | <select class="ellipsis"><option>CSS is awesome<option>CSS is awesome<option>CSS is awesome<option>CSS is awesome</select> |
| michael@0 | 115 | <select><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select> |
| michael@0 | 116 | <select size="4"><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select> |
| michael@0 | 117 | <ul style="float:left"><li class="ellipsis b">CSS is awesome</ul> |
| michael@0 | 118 | <br><br></div> |
| michael@0 | 119 | |
| michael@0 | 120 | RTL / RTL |
| michael@0 | 121 | <div class="test rtl rlo"> |
| michael@0 | 122 | <span class="ellipsis b inline-block">CSS is awesome</span> |
| michael@0 | 123 | <button class="ellipsis">CSS is awesome</button> |
| michael@0 | 124 | <input type=button class="ellipsis" value="CSS is awesome"> |
| michael@0 | 125 | <input class="ellipsis" value="CSS is awesome"> |
| michael@0 | 126 | <input class="ellipsis" placeholder="CSS is awesome"> |
| michael@0 | 127 | <fieldset style="display:inline" class="ellipsis"><span style="position:relative;right:1em;">CSS is awesome</span></fieldset> |
| michael@0 | 128 | <fieldset style="display:block" class="ellipsis"><span style="position:relative;right:1em;">CSS is awesome</span></fieldset> |
| michael@0 | 129 | <legend class="ellipsis">CSS is awesome</legend> |
| michael@0 | 130 | <textarea class="ellipsis" style="overflow:scroll;width:14em;" wrap="off"> |
| michael@0 | 131 | CSS is awesome CSS is awesome CSS is awesome |
| michael@0 | 132 | CSS is awesome CSS is awesome CSS is awesome |
| michael@0 | 133 | </textarea> |
| michael@0 | 134 | <fieldset style="display:inline"><legend class="ellipsis">CSS is awesome</legend>CSS is awesome</fieldset> |
| michael@0 | 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> |
| michael@0 | 136 | <select class="ellipsis"><option>CSS is awesome<option>CSS is awesome<option>CSS is awesome<option>CSS is awesome</select> |
| michael@0 | 137 | <select><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select> |
| michael@0 | 138 | <select size="4"><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select> |
| michael@0 | 139 | <ul style="float:left"><li class="ellipsis b">CSS is awesome</ul> |
| michael@0 | 140 | <br><br></div> |
| michael@0 | 141 | |
| michael@0 | 142 | |
| michael@0 | 143 | |
| michael@0 | 144 | </body></html> |
