1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/generic/crashtests/text-overflow-form-elements.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,144 @@
1.4 +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
1.5 +<html><head>
1.6 +<meta http-equiv="content-type" content="text/html; charset=UTF-8">
1.7 +<title>text-overflow test case</title>
1.8 +<style type="text/css">
1.9 +
1.10 +.test {
1.11 + font: 1em bold monospace;
1.12 + background:lightgrey;
1.13 + color: black;
1.14 + margin-left:400px;
1.15 +}
1.16 +
1.17 +.rtl {
1.18 + direction:rtl;
1.19 +}
1.20 +.ltr {
1.21 + direction:ltr;
1.22 +}
1.23 +.rlo > * {
1.24 + unicode-bidi: bidi-override; direction: rtl;
1.25 +}
1.26 +.lro > * {
1.27 + unicode-bidi: bidi-override; direction: ltr;
1.28 +}
1.29 +.b { border: 1px dashed blue; }
1.30 +.inline-block {
1.31 + display:inline-block;
1.32 +}
1.33 +.ellipsis {
1.34 + width:4em;
1.35 + width:6.5ch;
1.36 + text-overflow: ellipsis;
1.37 + -o-text-overflow: ellipsis;
1.38 + overflow:hidden;
1.39 +}
1.40 +</style>
1.41 +<script>
1.42 +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";
1.43 +function initIMG() {
1.44 + var img = document.getElementsByTagName('img');
1.45 + for (i = 0; i < img.length; ++i)
1.46 + img[i].setAttribute('src', twoEyes);
1.47 +}
1.48 +function setTextOverflow(str,quoted) {
1.49 + var x = document.styleSheets[0];
1.50 + var q = quoted ? '"' : '';
1.51 + x.insertRule('.ellipsis{text-overflow:' + q + str + q +'}', x.cssRules.length);
1.52 +}
1.53 +</script>
1.54 +</head><body onload="initIMG()">
1.55 +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>
1.56 +
1.57 +LTR / LTR
1.58 +<div class="test ltr">
1.59 +<span class="ellipsis b inline-block">CSS is awesome</span>
1.60 +<button class="ellipsis">CSS is awesome</button>
1.61 +<input type=button class="ellipsis" value="CSS is awesome">
1.62 +<input class="ellipsis" value="CSS is awesome">
1.63 +<input class="ellipsis" placeholder="CSS is awesome">
1.64 +<fieldset style="display:inline" class="ellipsis"><span style="position:relative;left:1em;">CSS is awesome</span></fieldset>
1.65 +<fieldset style="display:block" class="ellipsis"><span style="position:relative;left:1em;">CSS is awesome</span></fieldset>
1.66 +<legend class="ellipsis">CSS is awesome</legend>
1.67 +<textarea class="ellipsis" style="overflow:scroll;width:14em;" wrap="off">
1.68 +CSS is awesome CSS is awesome CSS is awesome
1.69 +CSS is awesome CSS is awesome CSS is awesome
1.70 +</textarea>
1.71 +<fieldset style="display:inline"><legend class="ellipsis">CSS is awesome</legend>CSS is awesome</fieldset>
1.72 +<fieldset style="display:block" class="ellipsis"><legend class="ellipsis">CSS is awesome</legend><span style="position:relative;left:1em;">CSS is awesome</span></fieldset>
1.73 +<select class="ellipsis"><option>CSS is awesome<option>CSS is awesome<option>CSS is awesome<option>CSS is awesome</select>
1.74 +<select><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select>
1.75 +<select size="4"><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select>
1.76 +<ul style="float:left"><li class="ellipsis b">CSS is awesome</ul>
1.77 +<br><br></div>
1.78 +
1.79 +RTL / LTR
1.80 +<div class="test rtl">
1.81 +<span class="ellipsis b inline-block">CSS is awesome</span>
1.82 +<button class="ellipsis">CSS is awesome</button>
1.83 +<input type=button class="ellipsis" value="CSS is awesome">
1.84 +<input class="ellipsis" value="CSS is awesome">
1.85 +<input class="ellipsis" placeholder="CSS is awesome">
1.86 +<fieldset style="display:inline" class="ellipsis"><span style="position:relative;right:1em;">CSS is awesome</span></fieldset>
1.87 +<fieldset style="display:block" class="ellipsis"><span style="position:relative;right:1em;">CSS is awesome</span></fieldset>
1.88 +<legend class="ellipsis">CSS is awesome</legend>
1.89 +<textarea class="ellipsis" style="overflow:scroll;width:14em;" wrap="off">
1.90 +CSS is awesome CSS is awesome CSS is awesome
1.91 +CSS is awesome CSS is awesome CSS is awesome
1.92 +</textarea>
1.93 +<fieldset style="display:inline"><legend class="ellipsis">CSS is awesome</legend>CSS is awesome</fieldset>
1.94 +<fieldset style="display:block" class="ellipsis"><legend class="ellipsis">CSS is awesome</legend><span style="position:relative;right:1em;">CSS is awesome</span></fieldset>
1.95 +<select class="ellipsis"><option>CSS is awesome<option>CSS is awesome<option>CSS is awesome<option>CSS is awesome</select>
1.96 +<select><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select>
1.97 +<select size="4"><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select>
1.98 +<ul style="float:left"><li class="ellipsis b">CSS is awesome</ul>
1.99 +<br><br></div>
1.100 +
1.101 +LTR / RTL
1.102 +<div class="test ltr rlo">
1.103 +<span class="ellipsis b inline-block">CSS is awesome</span>
1.104 +<button class="ellipsis">CSS is awesome</button>
1.105 +<input type=button class="ellipsis" value="CSS is awesome">
1.106 +<input class="ellipsis" value="CSS is awesome">
1.107 +<input class="ellipsis" placeholder="CSS is awesome">
1.108 +<fieldset style="display:inline" class="ellipsis"><span style="position:relative;right:1em;">CSS is awesome</span></fieldset>
1.109 +<fieldset style="display:block" class="ellipsis"><span style="position:relative;right:1em;">CSS is awesome</span></fieldset>
1.110 +<legend class="ellipsis">CSS is awesome</legend>
1.111 +<textarea class="ellipsis" style="overflow:scroll;width:14em;" wrap="off">
1.112 +CSS is awesome CSS is awesome CSS is awesome
1.113 +CSS is awesome CSS is awesome CSS is awesome
1.114 +</textarea>
1.115 +<fieldset style="display:inline"><legend class="ellipsis">CSS is awesome</legend>CSS is awesome</fieldset>
1.116 +<fieldset style="display:block" class="ellipsis"><legend class="ellipsis">CSS is awesome</legend><span style="position:relative;right:1em;">CSS is awesome</span></fieldset>
1.117 +<select class="ellipsis"><option>CSS is awesome<option>CSS is awesome<option>CSS is awesome<option>CSS is awesome</select>
1.118 +<select><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select>
1.119 +<select size="4"><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select>
1.120 +<ul style="float:left"><li class="ellipsis b">CSS is awesome</ul>
1.121 +<br><br></div>
1.122 +
1.123 +RTL / RTL
1.124 +<div class="test rtl rlo">
1.125 +<span class="ellipsis b inline-block">CSS is awesome</span>
1.126 +<button class="ellipsis">CSS is awesome</button>
1.127 +<input type=button class="ellipsis" value="CSS is awesome">
1.128 +<input class="ellipsis" value="CSS is awesome">
1.129 +<input class="ellipsis" placeholder="CSS is awesome">
1.130 +<fieldset style="display:inline" class="ellipsis"><span style="position:relative;right:1em;">CSS is awesome</span></fieldset>
1.131 +<fieldset style="display:block" class="ellipsis"><span style="position:relative;right:1em;">CSS is awesome</span></fieldset>
1.132 +<legend class="ellipsis">CSS is awesome</legend>
1.133 +<textarea class="ellipsis" style="overflow:scroll;width:14em;" wrap="off">
1.134 +CSS is awesome CSS is awesome CSS is awesome
1.135 +CSS is awesome CSS is awesome CSS is awesome
1.136 +</textarea>
1.137 +<fieldset style="display:inline"><legend class="ellipsis">CSS is awesome</legend>CSS is awesome</fieldset>
1.138 +<fieldset style="display:block" class="ellipsis"><legend class="ellipsis">CSS is awesome</legend><span style="position:relative;right:1em;">CSS is awesome</span></fieldset>
1.139 +<select class="ellipsis"><option>CSS is awesome<option>CSS is awesome<option>CSS is awesome<option>CSS is awesome</select>
1.140 +<select><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select>
1.141 +<select size="4"><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select>
1.142 +<ul style="float:left"><li class="ellipsis b">CSS is awesome</ul>
1.143 +<br><br></div>
1.144 +
1.145 +
1.146 +
1.147 +</body></html>
