layout/generic/crashtests/text-overflow-iframe.html@6474c204b198 (annotated)
layout/generic/crashtests/text-overflow-iframe.html
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
| 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 12</title> |
| michael@0 | 5 | <style type="text/css"> |
| michael@0 | 6 | |
| michael@0 | 7 | .test { |
| michael@0 | 8 | border: thin dashed black; |
| michael@0 | 9 | overflow: hidden; |
| michael@0 | 10 | white-space: nowrap; |
| michael@0 | 11 | -o-text-overflow: ellipsis; |
| michael@0 | 12 | text-overflow: ellipsis; |
| michael@0 | 13 | font: 1em bold monospace; |
| michael@0 | 14 | background:lime; |
| michael@0 | 15 | color: black; |
| michael@0 | 16 | margin-left:400px; |
| michael@0 | 17 | height: 12em; |
| michael@0 | 18 | text-shadow: #6374AB 5px -12px 2px; |
| michael@0 | 19 | } |
| michael@0 | 20 | |
| michael@0 | 21 | body { |
| michael@0 | 22 | width:800px; |
| michael@0 | 23 | } |
| michael@0 | 24 | |
| michael@0 | 25 | img { width: 50px; height: 50px; outline:5px dotted yellow; } |
| michael@0 | 26 | span { |
| michael@0 | 27 | font-size:16px; |
| michael@0 | 28 | background:pink; |
| michael@0 | 29 | border: 5px dashed blue; |
| michael@0 | 30 | padding: 0 25px; |
| michael@0 | 31 | text-decoration: underline overline line-through; |
| michael@0 | 32 | color:brown; |
| michael@0 | 33 | text-shadow: none; |
| michael@0 | 34 | } |
| michael@0 | 35 | i { |
| michael@0 | 36 | display:inline-block; |
| michael@0 | 37 | height: 50px; |
| michael@0 | 38 | width: 5em; |
| michael@0 | 39 | background: blue; |
| michael@0 | 40 | outline:5px dotted yellow; |
| michael@0 | 41 | text-shadow: none; |
| michael@0 | 42 | } |
| michael@0 | 43 | u { |
| michael@0 | 44 | padding-left:140px; |
| michael@0 | 45 | } |
| michael@0 | 46 | v { |
| michael@0 | 47 | padding-right:140px; |
| michael@0 | 48 | } |
| michael@0 | 49 | .rtl { |
| michael@0 | 50 | direction:rtl; |
| michael@0 | 51 | } |
| michael@0 | 52 | .rlo span { |
| michael@0 | 53 | unicode-bidi: bidi-override; direction: rtl; |
| michael@0 | 54 | } |
| michael@0 | 55 | .lro span { |
| michael@0 | 56 | unicode-bidi: bidi-override; direction: ltr; |
| michael@0 | 57 | } |
| michael@0 | 58 | .h {display:none} |
| michael@0 | 59 | iframe { |
| michael@0 | 60 | width: 100px; |
| michael@0 | 61 | height: 50px; |
| michael@0 | 62 | } |
| michael@0 | 63 | </style> |
| michael@0 | 64 | <script> |
| michael@0 | 65 | var c = "data:text/html,<style>body {white-space: nowrap;overflow:hidden;-o-text-overflow: ellipsis;text-overflow: ellipsis;}</style><body bgcolor='magenta'>CSS is awesome" |
| michael@0 | 66 | function initIFRAME() { |
| michael@0 | 67 | var f = document.getElementsByTagName('iframe'); |
| michael@0 | 68 | for (i = 0; i < f.length; ++i) { |
| michael@0 | 69 | f[i].setAttribute('src', c); |
| michael@0 | 70 | } |
| michael@0 | 71 | setTimeout(function(){document.body.style.width='500px'},0); |
| michael@0 | 72 | } |
| michael@0 | 73 | function setTextOverflow(str,quoted) { |
| michael@0 | 74 | var x = document.styleSheets[0]; |
| michael@0 | 75 | var q = quoted ? '"' : ''; |
| michael@0 | 76 | x.insertRule('.test{text-overflow:' + q + str + q +'}', x.cssRules.length); |
| michael@0 | 77 | } |
| michael@0 | 78 | </script> |
| michael@0 | 79 | </head><body onload="initIFRAME()"> |
| michael@0 | 80 | 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 | 81 | |
| michael@0 | 82 | LTR / LTR |
| michael@0 | 83 | <div class="test"> |
| michael@0 | 84 | <span><iframe></iframe>CSS is awesome CSS<i>overflowing-inline-block</i><u> is awesome</u></span><br> |
| michael@0 | 85 | <span>CSS is awe<iframe></iframe>some CSS is awesome <i></i></span><br> |
| michael@0 | 86 | <span>C SS is awesome<button>BUTTON</button> CSS is <iframe></iframe>awesom e </span><br> |
| michael@0 | 87 | <span>C­SS is awesome CSS is awesom­e <button>BUTTON</button></span><br> |
| michael@0 | 88 | <br><br></div> |
| michael@0 | 89 | |
| michael@0 | 90 | RTL / LTR |
| michael@0 | 91 | <div class="test rtl"> |
| michael@0 | 92 | <span><iframe></iframe><v>CSS is awesome CSS</v><i>overflowing-inline-block</i> is awesome </span><br> |
| michael@0 | 93 | <span>CSS is awe<iframe></iframe>some CSS is awesome <i></i></span><br> |
| michael@0 | 94 | <span>C SS is awesome<button>BUTTON</button> CSS is <iframe></iframe>awesom e </span><br> |
| michael@0 | 95 | <span>C­SS is awesome CSS is awesom­e <button>BUTTON</button></span><br> |
| michael@0 | 96 | <br><br></div> |
| michael@0 | 97 | |
| michael@0 | 98 | |
| michael@0 | 99 | LTR / RTL |
| michael@0 | 100 | <div class="test rlo"> |
| michael@0 | 101 | <span><iframe></iframe>CSS is awesome CSS<i>overflowing-inline-block</i> is awesome </span><br> |
| michael@0 | 102 | <span>CSS is awe<iframe></iframe>some CSS is awesome <i></i></span><br> |
| michael@0 | 103 | <span>C SS is awesome<button>BUTTON</button> CSS is <iframe></iframe>awesom e </span><br> |
| michael@0 | 104 | <span><button>BUTTON</button>C­SS is awesome CSS is awesom­e </span><br> |
| michael@0 | 105 | <br><br></div> |
| michael@0 | 106 | |
| michael@0 | 107 | RTL / RTL |
| michael@0 | 108 | <div class="test rtl rlo"> |
| michael@0 | 109 | <span><iframe></iframe>CSS is awesome CSS<i>overflowing-inline-block</i> is awesome </span><br> |
| michael@0 | 110 | <span>CSS is awe<iframe></iframe>some CSS is awesome <i></i></span><br> |
| michael@0 | 111 | <span>C SS is awesome<button>BUTTON</button> CSS is <iframe></iframe>awesom e </span><br> |
| michael@0 | 112 | <span><button>BUTTON</button>C­SS is awesome CSS is awesom­e </span><br> |
| michael@0 | 113 | <br><br></div> |
| michael@0 | 114 | |
| michael@0 | 115 | </body></html> |
