--- a/tests.css Tue Jun 07 12:31:18 2011 -0600
+++ b/tests.css Tue Jun 07 12:39:57 2011 -0600
@@ -32,6 +32,11 @@
padding-top: 0.2em;
border-top: 1px solid black;
}
+/* Workaround for browsers that don't treat <wbr> as a line-break opportunity
+ * (activated via JS feature-detection) */
+body.wbr-workaround > div > table > tbody > tr > td > div:last-child {
+ word-wrap: break-word;
+}
/* https://bugs.webkit.org/show_bug.cgi?id=56670 */
dfn { font-style: italic }
/* Opera has weird default blockquote style */
--- a/tests.js Tue Jun 07 12:31:18 2011 -0600
+++ b/tests.js Tue Jun 07 12:39:57 2011 -0600
@@ -24,6 +24,24 @@
}
updateAlertRowStyle();
+// Feature-test whether the browser wraps at <wbr> or not, and set word-wrap:
+// break-word where necessary if not. (IE and Opera don't wrap, Gecko and
+// WebKit do.) word-wrap: break-word will break anywhere at all, so it looks
+// significantly uglier.
+(function() {
+ var wordWrapTestDiv = document.createElement("div");
+ wordWrapTestDiv.style.width = "5em";
+ document.body.appendChild(wordWrapTestDiv);
+ wordWrapTestDiv.innerHTML = "abc";
+ var height1 = getComputedStyle(wordWrapTestDiv).height;
+ wordWrapTestDiv.innerHTML = "abc<wbr>abc<wbr>abc<wbr>abc<wbr>abc<wbr>abc";
+ var height2 = getComputedStyle(wordWrapTestDiv).height;
+ document.body.removeChild(wordWrapTestDiv);
+ if (height1 == height2) {
+ document.body.className += " wbr-workaround";
+ }
+})();
+
// Now for the meat of the file.
var tests = {
backcolor: [