| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Test for WebKit bug 27554: getComputedStyle does not contain a value for text-overflow</title> |
| <style> |
| .test { |
| background-color: #ccc; |
| border: 1px solid #333; |
| width: 200px; |
| height: 100px; |
| margin: 10px; |
| overflow: hidden; |
| white-space: nowrap; |
| } |
| |
| #ellipsis { |
| text-overflow: ellipsis; |
| } |
| |
| #clip { |
| text-overflow: clip; |
| } |
| |
| .fail { |
| color: red; |
| } |
| |
| .success { |
| color: green; |
| } |
| </style> |
| <script type="text/javascript"> |
| function checkComputedTextOverflow(element, name, expected) { |
| var resultElement = document.getElementById("results"); |
| var msg = document.createElement('p'); |
| |
| var computedTextOverflow = document.defaultView.getComputedStyle(element, null).textOverflow; |
| if (computedTextOverflow && (computedTextOverflow == expected)) |
| msg.innerHTML = "<span class='success'>SUCCESS</span> Expected text-overflow: " + expected + " for " + name + " and got it."; |
| else if (!computedTextOverflow) |
| msg.innerHTML = "<span class='fail'>FAIL</span> Expected text-overflow: " + expected + " for " + name + " but there was no value for text-overflow in the computed style."; |
| else |
| msg.innerHTML = "<span class='fail'>FAIL</span> Expected text-overflow: " + expected + " for " + name + " but got " + computedTextOverflow + "."; |
| |
| resultElement.appendChild(msg); |
| } |
| |
| function runTests() { |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| checkComputedTextOverflow(document.getElementById("ellipsis"), "div with text-overflow set to ellipsis", "ellipsis"); |
| checkComputedTextOverflow(document.getElementById("clip"), "div with text-overflow set to clip", "clip"); |
| checkComputedTextOverflow(document.getElementById("default"), "div with no text-overflow set", "clip"); |
| } |
| </script> |
| </head> |
| <body onload="runTests();"> |
| <h3>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=27554">WebKit bug 27554</a>: getComputedStyle does not contain a value for text-overflow</h3> |
| <br /> |
| <div id="ellipsis" class="test">This text should overflow the box but should show ellipsis when the text is cut off at the edge of the box because it doesn't fit in the box as is. </div> |
| <br /> |
| <div id="clip" class="test">This text should also overflow the box but should be clipped so that you don't see any ellipsis and the text just seems to end at an awkward place because it doesn't fit in the box. </div> |
| <br /> |
| <div id="default" class="test">This text should also overflow and be clipped because text-overflow should have the default behavior of clipping when no text-overflow is specified. </div> |
| <br /> |
| <div id="results"></div> |
| </body> |
| </html> |
