2009-06-08 Shinichiro Hamaji <hamaji@chromium.org>

        Reviewed by Eric Seidel.

        Setting white-space and word-wrap via CSS in textarea doesn't override the wrap attribute
        https://bugs.webkit.org/show_bug.cgi?id=26254

WebCore:

        Make it so that setting white-space and word-wrap via CSS
        overrides the wrap attribute.

        This involves having the shadow div in the textarea inherit
        the CSS from its parent instead of hard-coding it in
        RenderTextControlMultiline.

        * css/html4.css:
        * html/HTMLTextAreaElement.cpp:
        (WebCore::HTMLTextAreaElement::parseMappedAttribute):
        * rendering/RenderTextControlMultiLine.cpp:
        (WebCore::RenderTextControlMultiLine::createInnerTextStyle):

LayoutTests:

        Make it so that setting white-space and word-wrap via CSS
        overrides the wrap attribute.

        This involves having the shadow div in the textarea inherit
        the CSS from its parent instead of hard-coding it in
        RenderTextControlMultiline.

        * fast/forms/basic-textareas.html:
        * platform/mac/fast/forms/basic-textareas-expected.checksum:
        * platform/mac/fast/forms/basic-textareas-expected.png:
        * platform/mac/fast/forms/basic-textareas-expected.txt:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@45962 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index d656d2bba69716286d4ef8b40376c0a7fdae03ab..1ecd72203c2fb5efb411f301c07ebe372e0b70b2 100644 (file)
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,22 @@
+2009-06-08  Shinichiro Hamaji  <hamaji@chromium.org>
+
+        Reviewed by Eric Seidel.
+
+        Setting white-space and word-wrap via CSS in textarea doesn't override the wrap attribute
+        https://bugs.webkit.org/show_bug.cgi?id=26254
+
+        Make it so that setting white-space and word-wrap via CSS
+        overrides the wrap attribute.
+
+        This involves having the shadow div in the textarea inherit
+        the CSS from its parent instead of hard-coding it in
+        RenderTextControlMultiline.
+
+        * fast/forms/basic-textareas.html:
+        * platform/mac/fast/forms/basic-textareas-expected.checksum:
+        * platform/mac/fast/forms/basic-textareas-expected.png:
+        * platform/mac/fast/forms/basic-textareas-expected.txt:
+
 2009-07-15  Jian Li  <jianli@chromium.org>
 
         Reviewed by David Levin.

diff --git a/LayoutTests/fast/forms/basic-textareas.html b/LayoutTests/fast/forms/basic-textareas.html
index 20f650eb6c09407e5e9484e0d427a95235c101d6..9fe15619e5a168760f136f7bf43824ee3c87c526 100644 (file)
--- a/LayoutTests/fast/forms/basic-textareas.html
+++ b/LayoutTests/fast/forms/basic-textareas.html
@@ -4,7 +4,7 @@
 var docToAppendTo;
 function addTextarea(properties, opt_innerHTML) {
     var title = docToAppendTo.createTextNode();
-    title.nodeValue = ''; 
+    title.nodeValue = '';
     var wrapper = docToAppendTo.createElement('div');
     wrapper.style.cssText = 'display:inline-block;border:1px solid blue;font-size:12px;';
     var textarea = docToAppendTo.createElement('textarea');
@@ -19,7 +19,7 @@ function addTextarea(properties, opt_innerHTML) {
             textarea[property] = value;
     }
     textarea.innerHTML = opt_innerHTML ||
-        'Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv';
+        "Lorem ipsum  dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv";
 
     var span = document.createElement('span');
     span.style.cssText = 'display:inline-block;width:80px;';
@@ -33,7 +33,7 @@ function addTextarea(properties, opt_innerHTML) {
 function addAllTextareas(iframe, compatMode) {
     iframe.style.cssText = 'width:100%;border:0;'
     docToAppendTo = iframe.contentWindow.document;
-    
+
     docToAppendTo.body.style.cssText = 'margin:0';
 
     if (docToAppendTo.compatMode != compatMode)
@@ -43,7 +43,7 @@ function addAllTextareas(iframe, compatMode) {
     compatModeTitle.innerHTML = 'CompatMode: ' + docToAppendTo.compatMode;
     compatModeTitle.style.cssText = 'margin:5px 0;font-weight:bold;';
     docToAppendTo.body.appendChild(compatModeTitle);
-    
+
     addTextarea({}, 'Lorem ipsum dolor');
     addTextarea({disabled: 'true'});
     addTextarea({style: 'padding:10px'});
@@ -70,7 +70,14 @@ function addAllTextareas(iframe, compatMode) {
     addTextarea({wrap: 'off'});
     addTextarea({wrap: 'hard'});
     addTextarea({wrap: 'soft'});
-    
+    addTextarea({style: 'white-space:normal'});
+    addTextarea({style: 'white-space:pre'});
+    addTextarea({style: 'white-space:prewrap'});
+    addTextarea({style: 'white-space:nowrap'});
+    addTextarea({style: 'white-space:pre-line'});
+    addTextarea({style: 'word-wrap:normal'});
+    addTextarea({wrap: 'off', style: 'white-space:pre-wrap'});
+
     iframe.style.height = docToAppendTo.body.offsetHeight + 5 + 'px';
 }
 

diff --git a/LayoutTests/platform/mac/fast/forms/basic-textareas-expected.checksum b/LayoutTests/platform/mac/fast/forms/basic-textareas-expected.checksum
index 29e1f4ef50566c95493250efa7cb5a2f7246b98f..a805d2c00351e49d992c738ae968827dc655be25 100644 (file)
--- a/LayoutTests/platform/mac/fast/forms/basic-textareas-expected.checksum
+++ b/LayoutTests/platform/mac/fast/forms/basic-textareas-expected.checksum
@@ -1 +1 @@
-f62b057f4ae33fefd48a1a0919668d50
\ No newline at end of file
+eb8197b926083c99a391ca133b883d0d
\ No newline at end of file

diff --git a/LayoutTests/platform/mac/fast/forms/basic-textareas-expected.png b/LayoutTests/platform/mac/fast/forms/basic-textareas-expected.png
index 9d9aa66917add00d57a13a2ab61c323c6608cd65..1961b890b62ab2b0ddc7e60a4a6dd1280fa5a3d6 100644 (file)
Binary files a/LayoutTests/platform/mac/fast/forms/basic-textareas-expected.png and b/LayoutTests/platform/mac/fast/forms/basic-textareas-expected.png differ

diff --git a/LayoutTests/platform/mac/fast/forms/basic-textareas-expected.txt b/LayoutTests/platform/mac/fast/forms/basic-textareas-expected.txt
index 4fc8f83a8ad8a165bfcc20a24d685a7569c76bf7..21bfdb25eb7ab44b9dcaf9c565e6a188f1588381 100644 (file)
--- a/LayoutTests/platform/mac/fast/forms/basic-textareas-expected.txt
+++ b/LayoutTests/platform/mac/fast/forms/basic-textareas-expected.txt
@@ -1,18 +1,18 @@
-layer at (0,0) size 785x940
+layer at (0,0) size 785x1268
   RenderView at (0,0) size 785x600
-layer at (0,0) size 785x940
-  RenderBlock {HTML} at (0,0) size 785x940
-    RenderBody {BODY} at (0,0) size 785x940
-      RenderPartObject {IFRAME} at (0,0) size 785x479
-        layer at (0,0) size 785x479
-          RenderView at (0,0) size 785x479
-        layer at (0,0) size 785x479
-          RenderBlock {HTML} at (0,0) size 785x479
-            RenderBody {BODY} at (0,5) size 785x474
+layer at (0,0) size 785x1268
+  RenderBlock {HTML} at (0,0) size 785x1268
+    RenderBody {BODY} at (0,0) size 785x1268
+      RenderPartObject {IFRAME} at (0,0) size 785x646
+        layer at (0,0) size 785x646
+          RenderView at (0,0) size 785x646
+        layer at (0,0) size 785x646
+          RenderBlock {HTML} at (0,0) size 785x646
+            RenderBody {BODY} at (0,5) size 785x641
               RenderBlock {DIV} at (0,0) size 785x18
                 RenderText {#text} at (0,0) size 196x18
                   text run at (0,0) width 196: "CompatMode: CSS1Compat"
-              RenderBlock (anonymous) at (0,23) size 785x451
+              RenderBlock (anonymous) at (0,23) size 785x618
                 RenderBlock {DIV} at (0,30) size 135x55 [border: (1px solid #0000FF)]
                   RenderBlock {SPAN} at (1,12) size 80x0
                   RenderBR {BR} at (81,1) size 0x14
@@ -169,6 +169,49 @@ layer at (0,0) size 785x940
                     RenderText {#text} at (0,0) size 61x14
                       text run at (0,0) width 61: "wrap: \"soft\","
                   RenderBR {BR} at (81,1) size 0x14
+                RenderBlock {DIV} at (0,451) size 135x69 [border: (1px solid #0000FF)]
+                  RenderBlock {SPAN} at (1,1) size 80x28
+                    RenderText {#text} at (0,0) size 70x28
+                      text run at (0,0) width 63: "style: \"white-"
+                      text run at (0,14) width 70: "space:normal\","
+                  RenderBR {BR} at (81,15) size 0x14
+                RenderBlock {DIV} at (135,451) size 135x69 [border: (1px solid #0000FF)]
+                  RenderBlock {SPAN} at (1,1) size 80x28
+                    RenderText {#text} at (0,0) size 63x28
+                      text run at (0,0) width 63: "style: \"white-"
+                      text run at (0,14) width 52: "space:pre\","
+                  RenderBR {BR} at (81,15) size 0x14
+                RenderBlock {DIV} at (270,451) size 135x69 [border: (1px solid #0000FF)]
+                  RenderBlock {SPAN} at (1,1) size 80x28
+                    RenderText {#text} at (0,0) size 76x28
+                      text run at (0,0) width 63: "style: \"white-"
+                      text run at (0,14) width 76: "space:prewrap\","
+                  RenderBR {BR} at (81,15) size 0x14
+                RenderBlock {DIV} at (405,451) size 135x69 [border: (1px solid #0000FF)]
+                  RenderBlock {SPAN} at (1,1) size 80x28
+                    RenderText {#text} at (0,0) size 73x28
+                      text run at (0,0) width 63: "style: \"white-"
+                      text run at (0,14) width 73: "space:nowrap\","
+                  RenderBR {BR} at (81,15) size 0x14
+                RenderBlock {DIV} at (540,451) size 135x69 [border: (1px solid #0000FF)]
+                  RenderBlock {SPAN} at (1,1) size 80x28
+                    RenderText {#text} at (0,0) size 73x28
+                      text run at (0,0) width 63: "style: \"white-"
+                      text run at (0,14) width 73: "space:pre-line\","
+                  RenderBR {BR} at (81,15) size 0x14
+                RenderBlock {DIV} at (0,534) size 135x84 [border: (1px solid #0000FF)]
+                  RenderBlock {SPAN} at (1,1) size 80x28
+                    RenderText {#text} at (0,0) size 68x28
+                      text run at (0,0) width 62: "style: \"word-"
+                      text run at (0,14) width 68: "wrap:normal\","
+                  RenderBR {BR} at (81,15) size 0x14
+                RenderBlock {DIV} at (135,520) size 135x98 [border: (1px solid #0000FF)]
+                  RenderBlock {SPAN} at (1,1) size 80x42
+                    RenderText {#text} at (0,0) size 80x42
+                      text run at (0,0) width 57: "wrap: \"off\","
+                      text run at (0,14) width 63: "style: \"white-"
+                      text run at (0,28) width 80: "space:pre-wrap\","
+                  RenderBR {BR} at (81,29) size 0x14
         layer at (3,75) size 129x32 clip at (4,76) size 127x30
           RenderTextControl {TEXTAREA} at (3,17) size 129x32 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (3,3) size 123x13
@@ -178,8 +221,8 @@ layer at (0,0) size 785x940
           RenderTextControl {TEXTAREA} at (3,17) size 129x32 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (3,3) size 108x65 [color=#545454]
               RenderText {#text} at (0,0) size 108x65
-                text run at (0,0) width 102: "Lorem ipsum dolor"
-                text run at (102,0) width 3: " "
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
                 text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
                 text run at (0,26) width 80: "PQRSTUVWXYZ"
                 text run at (80,26) width 3: " "
@@ -189,8 +232,8 @@ layer at (0,0) size 785x940
           RenderTextControl {TEXTAREA} at (3,31) size 145x48 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (11,11) size 108x65
               RenderText {#text} at (0,0) size 108x65
-                text run at (0,0) width 102: "Lorem ipsum dolor"
-                text run at (102,0) width 3: " "
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
                 text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
                 text run at (0,26) width 80: "PQRSTUVWXYZ"
                 text run at (80,26) width 3: " "
@@ -200,8 +243,8 @@ layer at (0,0) size 785x940
           RenderTextControl {TEXTAREA} at (3,31) size 125x28 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (1,1) size 108x65
               RenderText {#text} at (0,0) size 108x65
-                text run at (0,0) width 102: "Lorem ipsum dolor"
-                text run at (102,0) width 3: " "
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
                 text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
                 text run at (0,26) width 80: "PQRSTUVWXYZ"
                 text run at (80,26) width 3: " "
@@ -211,8 +254,8 @@ layer at (0,0) size 785x940
           RenderTextControl {TEXTAREA} at (11,39) size 129x32 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (3,3) size 108x65
               RenderText {#text} at (0,0) size 108x65
-                text run at (0,0) width 102: "Lorem ipsum dolor"
-                text run at (102,0) width 3: " "
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
                 text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
                 text run at (0,26) width 80: "PQRSTUVWXYZ"
                 text run at (80,26) width 3: " "
@@ -222,8 +265,8 @@ layer at (0,0) size 785x940
           RenderTextControl {TEXTAREA} at (1,29) size 129x32 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (3,3) size 108x65
               RenderText {#text} at (0,0) size 108x65
-                text run at (0,0) width 102: "Lorem ipsum dolor"
-                text run at (102,0) width 3: " "
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
                 text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
                 text run at (0,26) width 80: "PQRSTUVWXYZ"
                 text run at (80,26) width 3: " "
@@ -236,7 +279,7 @@ layer at (0,0) size 785x940
                 text run at (0,0) width 34: "Lorem"
                 text run at (34,0) width 3: " "
                 text run at (0,13) width 33: "ipsum"
-                text run at (33,13) width 3: " "
+                text run at (33,13) width 6: "  "
                 text run at (0,26) width 29: "dolor"
                 text run at (29,26) width 3: " "
                 text run at (0,39) width 42: "ABCDEF"
@@ -256,7 +299,7 @@ layer at (0,0) size 785x940
                 text run at (0,0) width 34: "Lorem"
                 text run at (34,0) width 3: " "
                 text run at (0,13) width 33: "ipsum"
-                text run at (33,13) width 3: " "
+                text run at (33,13) width 6: "  "
                 text run at (0,26) width 29: "dolor"
                 text run at (29,26) width 3: " "
                 text run at (0,39) width 42: "ABCDEF"
@@ -276,7 +319,7 @@ layer at (0,0) size 785x940
                 text run at (0,0) width 34: "Lorem"
                 text run at (34,0) width 3: " "
                 text run at (0,13) width 33: "ipsum"
-                text run at (33,13) width 3: " "
+                text run at (33,13) width 6: "  "
                 text run at (0,26) width 29: "dolor"
                 text run at (29,26) width 3: " "
                 text run at (0,39) width 42: "ABCDEF"
@@ -293,8 +336,8 @@ layer at (0,0) size 785x940
           RenderTextControl {TEXTAREA} at (3,29) size 129x66 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (3,3) size 108x65
               RenderText {#text} at (0,0) size 108x65
-                text run at (0,0) width 102: "Lorem ipsum dolor"
-                text run at (102,0) width 3: " "
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
                 text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
                 text run at (0,26) width 80: "PQRSTUVWXYZ"
                 text run at (80,26) width 3: " "
@@ -307,7 +350,7 @@ layer at (0,0) size 785x940
                 text run at (0,0) width 34: "Lorem"
                 text run at (34,0) width 3: " "
                 text run at (0,13) width 33: "ipsum"
-                text run at (33,13) width 3: " "
+                text run at (33,13) width 6: "  "
                 text run at (0,26) width 29: "dolor"
                 text run at (29,26) width 3: " "
                 text run at (0,39) width 42: "ABCDEF"
@@ -324,8 +367,8 @@ layer at (0,0) size 785x940
           RenderTextControl {TEXTAREA} at (3,31) size 129x32 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (3,3) size 123x65
               RenderText {#text} at (0,0) size 119x65
-                text run at (0,0) width 102: "Lorem ipsum dolor"
-                text run at (102,0) width 3: " "
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
                 text run at (0,13) width 119: "ABCDEFGHIJKLMNOPQ"
                 text run at (0,26) width 65: "RSTUVWXYZ"
                 text run at (65,26) width 3: " "
@@ -335,8 +378,8 @@ layer at (0,0) size 785x940
           RenderTextControl {TEXTAREA} at (3,31) size 129x47 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (3,3) size 108x65
               RenderText {#text} at (0,0) size 108x65
-                text run at (0,0) width 102: "Lorem ipsum dolor"
-                text run at (102,0) width 3: " "
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
                 text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
                 text run at (0,26) width 80: "PQRSTUVWXYZ"
                 text run at (80,26) width 3: " "
@@ -349,7 +392,7 @@ layer at (0,0) size 785x940
                 text run at (0,0) width 34: "Lorem"
                 text run at (34,0) width 3: " "
                 text run at (0,13) width 33: "ipsum"
-                text run at (33,13) width 3: " "
+                text run at (33,13) width 6: "  "
                 text run at (0,26) width 29: "dolor"
                 text run at (29,26) width 3: " "
                 text run at (0,39) width 58: "ABCDEFGH"
@@ -367,7 +410,7 @@ layer at (0,0) size 785x940
                 text run at (0,0) width 34: "Lorem"
                 text run at (34,0) width 3: " "
                 text run at (0,13) width 33: "ipsum"
-                text run at (33,13) width 3: " "
+                text run at (33,13) width 6: "  "
                 text run at (0,26) width 29: "dolor"
                 text run at (29,26) width 3: " "
                 text run at (0,39) width 42: "ABCDEF"
@@ -387,7 +430,7 @@ layer at (0,0) size 785x940
                 text run at (0,0) width 34: "Lorem"
                 text run at (34,0) width 3: " "
                 text run at (0,13) width 33: "ipsum"
-                text run at (33,13) width 3: " "
+                text run at (33,13) width 6: "  "
                 text run at (0,26) width 29: "dolor"
                 text run at (29,26) width 3: " "
                 text run at (0,39) width 42: "ABCDEF"
@@ -407,7 +450,7 @@ layer at (0,0) size 785x940
                 text run at (0,0) width 34: "Lorem"
                 text run at (34,0) width 3: " "
                 text run at (0,13) width 33: "ipsum"
-                text run at (33,13) width 3: " "
+                text run at (33,13) width 6: "  "
                 text run at (0,26) width 29: "dolor"
                 text run at (29,26) width 3: " "
                 text run at (0,39) width 42: "ABCDEF"
@@ -427,7 +470,7 @@ layer at (0,0) size 785x940
                 text run at (0,0) width 34: "Lorem"
                 text run at (34,0) width 3: " "
                 text run at (0,13) width 33: "ipsum"
-                text run at (33,13) width 3: " "
+                text run at (33,13) width 6: "  "
                 text run at (0,26) width 29: "dolor"
                 text run at (29,26) width 3: " "
                 text run at (0,39) width 42: "ABCDEF"
@@ -451,7 +494,7 @@ layer at (0,0) size 785x940
                 text run at (0,39) width 16: "ips"
                 text run at (0,52) width 7: "u"
                 text run at (0,65) width 11: "m"
-                text run at (11,65) width 3: " "
+                text run at (11,65) width 6: "  "
                 text run at (0,78) width 17: "dol"
                 text run at (0,91) width 12: "or"
                 text run at (12,91) width 3: " "
@@ -483,8 +526,8 @@ layer at (0,0) size 785x940
           RenderTextControl {TEXTAREA} at (3,17) size 129x45 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (3,3) size 108x65
               RenderText {#text} at (0,0) size 108x65
-                text run at (0,0) width 102: "Lorem ipsum dolor"
-                text run at (102,0) width 3: " "
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
                 text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
                 text run at (0,26) width 80: "PQRSTUVWXYZ"
                 text run at (80,26) width 3: " "
@@ -497,7 +540,7 @@ layer at (0,0) size 785x940
                 text run at (0,0) width 34: "Lorem"
                 text run at (34,0) width 3: " "
                 text run at (0,13) width 33: "ipsum"
-                text run at (33,13) width 3: " "
+                text run at (33,13) width 5: "  "
                 text run at (0,26) width 29: "dolor"
                 text run at (29,26) width 3: " "
                 text run at (0,39) width 36: "ABCDE"
@@ -515,8 +558,8 @@ layer at (0,0) size 785x940
           RenderTextControl {TEXTAREA} at (3,17) size 129x97 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (3,3) size 123x65
               RenderText {#text} at (0,0) size 119x65
-                text run at (0,0) width 102: "Lorem ipsum dolor"
-                text run at (102,0) width 3: " "
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
                 text run at (0,13) width 119: "ABCDEFGHIJKLMNOPQ"
                 text run at (0,26) width 65: "RSTUVWXYZ"
                 text run at (65,26) width 3: " "
@@ -531,7 +574,7 @@ layer at (0,0) size 785x940
                 text run at (11,13) width 3: " "
                 text run at (0,26) width 23: "ipsu"
                 text run at (0,39) width 11: "m"
-                text run at (11,39) width 3: " "
+                text run at (11,39) width 6: "  "
                 text run at (0,52) width 24: "dolo"
                 text run at (0,65) width 5: "r"
                 text run at (5,65) width 3: " "
@@ -551,17 +594,17 @@ layer at (0,0) size 785x940
                 text run at (0,234) width 21: "nop"
                 text run at (0,247) width 22: "qrst"
                 text run at (0,260) width 13: "uv"
-        layer at (302,426) size 129x47 clip at (303,427) size 127x30 scrollWidth 423
+        layer at (302,426) size 129x47 clip at (303,427) size 127x30 scrollWidth 426
           RenderTextControl {TEXTAREA} at (3,17) size 129x47 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (3,3) size 123x13
-              RenderText {#text} at (0,0) size 421x13
-                text run at (0,0) width 421: "Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv"
+              RenderText {#text} at (0,0) size 424x13
+                text run at (0,0) width 424: "Lorem ipsum  dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv"
         layer at (437,441) size 129x32 clip at (438,442) size 112x30 scrollHeight 69
           RenderTextControl {TEXTAREA} at (3,17) size 129x32 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (3,3) size 108x65
               RenderText {#text} at (0,0) size 108x65
-                text run at (0,0) width 102: "Lorem ipsum dolor"
-                text run at (102,0) width 3: " "
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
                 text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
                 text run at (0,26) width 80: "PQRSTUVWXYZ"
                 text run at (80,26) width 3: " "
@@ -571,23 +614,85 @@ layer at (0,0) size 785x940
           RenderTextControl {TEXTAREA} at (3,17) size 129x32 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (3,3) size 108x65
               RenderText {#text} at (0,0) size 108x65
-                text run at (0,0) width 102: "Lorem ipsum dolor"
-                text run at (102,0) width 3: " "
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
                 text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
                 text run at (0,26) width 80: "PQRSTUVWXYZ"
                 text run at (80,26) width 3: " "
                 text run at (0,39) width 108: "abcdefghijklmnopqr"
                 text run at (0,52) width 23: "stuv"
-      RenderPartObject {IFRAME} at (0,479) size 785x461
-        layer at (0,0) size 785x461
-          RenderView at (0,0) size 785x461
-        layer at (0,0) size 785x461
-          RenderBlock {HTML} at (0,0) size 785x461
-            RenderBody {BODY} at (0,5) size 785x456
+        layer at (3,510) size 129x32 clip at (4,511) size 112x30 scrollHeight 69
+          RenderTextControl {TEXTAREA} at (3,31) size 129x32 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
+            RenderBlock {DIV} at (3,3) size 108x65
+              RenderText {#text} at (0,0) size 108x65
+                text run at (0,0) width 73: "Lorem ipsum "
+                text run at (73,0) width 29: "dolor"
+                text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
+                text run at (0,26) width 80: "PQRSTUVWXYZ"
+                text run at (0,39) width 108: "abcdefghijklmnopqr"
+                text run at (0,52) width 23: "stuv"
+        layer at (138,510) size 129x32 clip at (139,511) size 112x30 scrollHeight 69
+          RenderTextControl {TEXTAREA} at (3,31) size 129x32 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
+            RenderBlock {DIV} at (3,3) size 108x65
+              RenderText {#text} at (0,0) size 108x65
+                text run at (0,0) width 108: "Lorem ipsum  dolor "
+                text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
+                text run at (0,26) width 102: "PQRSTUVWXYZ abc"
+                text run at (0,39) width 106: "defghijklmnopqrstu"
+                text run at (0,52) width 6: "v"
+        layer at (273,510) size 129x32 clip at (274,511) size 112x30 scrollHeight 69
+          RenderTextControl {TEXTAREA} at (3,31) size 129x32 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
+            RenderBlock {DIV} at (3,3) size 108x65
+              RenderText {#text} at (0,0) size 108x65
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
+                text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
+                text run at (0,26) width 80: "PQRSTUVWXYZ"
+                text run at (80,26) width 3: " "
+                text run at (0,39) width 108: "abcdefghijklmnopqr"
+                text run at (0,52) width 23: "stuv"
+        layer at (408,510) size 129x32 clip at (409,511) size 112x15 scrollWidth 423 scrollHeight 17
+          RenderTextControl {TEXTAREA} at (3,31) size 129x32 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
+            RenderBlock {DIV} at (3,3) size 123x13
+              RenderText {#text} at (0,0) size 421x13
+                text run at (0,0) width 73: "Lorem ipsum "
+                text run at (73,0) width 348: "dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv"
+        layer at (543,510) size 129x32 clip at (544,511) size 112x30 scrollHeight 69
+          RenderTextControl {TEXTAREA} at (3,31) size 129x32 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
+            RenderBlock {DIV} at (3,3) size 108x65
+              RenderText {#text} at (0,0) size 108x65
+                text run at (0,0) width 73: "Lorem ipsum "
+                text run at (73,0) width 29: "dolor"
+                text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
+                text run at (0,26) width 80: "PQRSTUVWXYZ"
+                text run at (0,39) width 108: "abcdefghijklmnopqr"
+                text run at (0,52) width 23: "stuv"
+        layer at (3,593) size 129x47 clip at (4,594) size 112x30 scrollWidth 185 scrollHeight 43
+          RenderTextControl {TEXTAREA} at (3,31) size 129x47 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
+            RenderBlock {DIV} at (3,3) size 123x39
+              RenderText {#text} at (0,0) size 183x39
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
+                text run at (0,13) width 183: "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+                text run at (0,26) width 130: "abcdefghijklmnopqrstuv"
+        layer at (138,593) size 129x47 clip at (139,594) size 112x30 scrollWidth 185 scrollHeight 43
+          RenderTextControl {TEXTAREA} at (3,45) size 129x47 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
+            RenderBlock {DIV} at (3,3) size 123x39
+              RenderText {#text} at (0,0) size 183x39
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
+                text run at (0,13) width 183: "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+                text run at (0,26) width 130: "abcdefghijklmnopqrstuv"
+      RenderPartObject {IFRAME} at (0,646) size 785x622
+        layer at (0,0) size 785x622
+          RenderView at (0,0) size 785x622
+        layer at (0,0) size 785x622
+          RenderBlock {HTML} at (0,0) size 785x622
+            RenderBody {BODY} at (0,5) size 785x617
               RenderBlock {DIV} at (0,0) size 785x18
                 RenderText {#text} at (0,0) size 193x18
                   text run at (0,0) width 193: "CompatMode: BackCompat"
-              RenderBlock (anonymous) at (0,23) size 785x433
+              RenderBlock (anonymous) at (0,23) size 785x594
                 RenderBlock {DIV} at (0,44) size 135x38 [border: (1px solid #0000FF)]
                   RenderBlock {SPAN} at (1,1) size 80x0
                   RenderBR {BR} at (81,1) size 0x0
@@ -744,6 +849,49 @@ layer at (0,0) size 785x940
                     RenderText {#text} at (0,0) size 61x14
                       text run at (0,0) width 61: "wrap: \"soft\","
                   RenderBR {BR} at (81,12) size 0x0
+                RenderBlock {DIV} at (0,433) size 135x66 [border: (1px solid #0000FF)]
+                  RenderBlock {SPAN} at (1,1) size 80x28
+                    RenderText {#text} at (0,0) size 70x28
+                      text run at (0,0) width 63: "style: \"white-"
+                      text run at (0,14) width 70: "space:normal\","
+                  RenderBR {BR} at (81,26) size 0x0
+                RenderBlock {DIV} at (135,433) size 135x66 [border: (1px solid #0000FF)]
+                  RenderBlock {SPAN} at (1,1) size 80x28
+                    RenderText {#text} at (0,0) size 63x28
+                      text run at (0,0) width 63: "style: \"white-"
+                      text run at (0,14) width 52: "space:pre\","
+                  RenderBR {BR} at (81,26) size 0x0
+                RenderBlock {DIV} at (270,433) size 135x66 [border: (1px solid #0000FF)]
+                  RenderBlock {SPAN} at (1,1) size 80x28
+                    RenderText {#text} at (0,0) size 76x28
+                      text run at (0,0) width 63: "style: \"white-"
+                      text run at (0,14) width 76: "space:prewrap\","
+                  RenderBR {BR} at (81,26) size 0x0
+                RenderBlock {DIV} at (405,433) size 135x66 [border: (1px solid #0000FF)]
+                  RenderBlock {SPAN} at (1,1) size 80x28
+                    RenderText {#text} at (0,0) size 73x28
+                      text run at (0,0) width 63: "style: \"white-"
+                      text run at (0,14) width 73: "space:nowrap\","
+                  RenderBR {BR} at (81,26) size 0x0
+                RenderBlock {DIV} at (540,433) size 135x66 [border: (1px solid #0000FF)]
+                  RenderBlock {SPAN} at (1,1) size 80x28
+                    RenderText {#text} at (0,0) size 73x28
+                      text run at (0,0) width 63: "style: \"white-"
+                      text run at (0,14) width 73: "space:pre-line\","
+                  RenderBR {BR} at (81,26) size 0x0
+                RenderBlock {DIV} at (0,513) size 135x81 [border: (1px solid #0000FF)]
+                  RenderBlock {SPAN} at (1,1) size 80x28
+                    RenderText {#text} at (0,0) size 68x28
+                      text run at (0,0) width 62: "style: \"word-"
+                      text run at (0,14) width 68: "wrap:normal\","
+                  RenderBR {BR} at (81,26) size 0x0
+                RenderBlock {DIV} at (135,499) size 135x95 [border: (1px solid #0000FF)]
+                  RenderBlock {SPAN} at (1,1) size 80x42
+                    RenderText {#text} at (0,0) size 80x42
+                      text run at (0,0) width 57: "wrap: \"off\","
+                      text run at (0,14) width 63: "style: \"white-"
+                      text run at (0,28) width 80: "space:pre-wrap\","
+                  RenderBR {BR} at (81,40) size 0x0
         layer at (3,75) size 129x32 clip at (4,76) size 127x30
           RenderTextControl {TEXTAREA} at (3,3) size 129x32 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (3,3) size 123x13
@@ -753,8 +901,8 @@ layer at (0,0) size 785x940
           RenderTextControl {TEXTAREA} at (3,17) size 129x32 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (3,3) size 108x65 [color=#545454]
               RenderText {#text} at (0,0) size 108x65
-                text run at (0,0) width 102: "Lorem ipsum dolor"
-                text run at (102,0) width 3: " "
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
                 text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
                 text run at (0,26) width 80: "PQRSTUVWXYZ"
                 text run at (80,26) width 3: " "
@@ -764,8 +912,8 @@ layer at (0,0) size 785x940
           RenderTextControl {TEXTAREA} at (3,31) size 145x48 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (11,11) size 108x65
               RenderText {#text} at (0,0) size 108x65
-                text run at (0,0) width 102: "Lorem ipsum dolor"
-                text run at (102,0) width 3: " "
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
                 text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
                 text run at (0,26) width 80: "PQRSTUVWXYZ"
                 text run at (80,26) width 3: " "
@@ -775,8 +923,8 @@ layer at (0,0) size 785x940
           RenderTextControl {TEXTAREA} at (3,31) size 125x28 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (1,1) size 108x65
               RenderText {#text} at (0,0) size 108x65
-                text run at (0,0) width 102: "Lorem ipsum dolor"
-                text run at (102,0) width 3: " "
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
                 text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
                 text run at (0,26) width 80: "PQRSTUVWXYZ"
                 text run at (80,26) width 3: " "
@@ -786,8 +934,8 @@ layer at (0,0) size 785x940
           RenderTextControl {TEXTAREA} at (11,39) size 129x32 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (3,3) size 108x65
               RenderText {#text} at (0,0) size 108x65
-                text run at (0,0) width 102: "Lorem ipsum dolor"
-                text run at (102,0) width 3: " "
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
                 text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
                 text run at (0,26) width 80: "PQRSTUVWXYZ"
                 text run at (80,26) width 3: " "
@@ -797,8 +945,8 @@ layer at (0,0) size 785x940
           RenderTextControl {TEXTAREA} at (1,29) size 129x32 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (3,3) size 108x65
               RenderText {#text} at (0,0) size 108x65
-                text run at (0,0) width 102: "Lorem ipsum dolor"
-                text run at (102,0) width 3: " "
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
                 text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
                 text run at (0,26) width 80: "PQRSTUVWXYZ"
                 text run at (80,26) width 3: " "
@@ -811,7 +959,7 @@ layer at (0,0) size 785x940
                 text run at (0,0) width 34: "Lorem"
                 text run at (34,0) width 3: " "
                 text run at (0,13) width 33: "ipsum"
-                text run at (33,13) width 3: " "
+                text run at (33,13) width 6: "  "
                 text run at (0,26) width 29: "dolor"
                 text run at (29,26) width 3: " "
                 text run at (0,39) width 36: "ABCDE"
@@ -898,7 +1046,7 @@ layer at (0,0) size 785x940
                 text run at (0,0) width 34: "Lorem"
                 text run at (34,0) width 3: " "
                 text run at (0,13) width 33: "ipsum"
-                text run at (33,13) width 3: " "
+                text run at (33,13) width 6: "  "
                 text run at (0,26) width 29: "dolor"
                 text run at (29,26) width 3: " "
                 text run at (0,39) width 42: "ABCDEF"
@@ -915,8 +1063,8 @@ layer at (0,0) size 785x940
           RenderTextControl {TEXTAREA} at (3,29) size 129x60 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (3,3) size 108x65
               RenderText {#text} at (0,0) size 108x65
-                text run at (0,0) width 102: "Lorem ipsum dolor"
-                text run at (102,0) width 3: " "
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
                 text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
                 text run at (0,26) width 80: "PQRSTUVWXYZ"
                 text run at (80,26) width 3: " "
@@ -929,7 +1077,7 @@ layer at (0,0) size 785x940
                 text run at (0,0) width 34: "Lorem"
                 text run at (34,0) width 3: " "
                 text run at (0,13) width 33: "ipsum"
-                text run at (33,13) width 3: " "
+                text run at (33,13) width 6: "  "
                 text run at (0,26) width 29: "dolor"
                 text run at (29,26) width 3: " "
                 text run at (0,39) width 36: "ABCDE"
@@ -946,8 +1094,8 @@ layer at (0,0) size 785x940
           RenderTextControl {TEXTAREA} at (3,31) size 129x32 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (3,3) size 123x65
               RenderText {#text} at (0,0) size 119x65
-                text run at (0,0) width 102: "Lorem ipsum dolor"
-                text run at (102,0) width 3: " "
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
                 text run at (0,13) width 119: "ABCDEFGHIJKLMNOPQ"
                 text run at (0,26) width 65: "RSTUVWXYZ"
                 text run at (65,26) width 3: " "
@@ -957,8 +1105,8 @@ layer at (0,0) size 785x940
           RenderTextControl {TEXTAREA} at (3,31) size 129x47 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (3,3) size 108x65
               RenderText {#text} at (0,0) size 108x65
-                text run at (0,0) width 102: "Lorem ipsum dolor"
-                text run at (102,0) width 3: " "
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
                 text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
                 text run at (0,26) width 80: "PQRSTUVWXYZ"
                 text run at (80,26) width 3: " "
@@ -971,7 +1119,7 @@ layer at (0,0) size 785x940
                 text run at (0,0) width 34: "Lorem"
                 text run at (34,0) width 3: " "
                 text run at (0,13) width 33: "ipsum"
-                text run at (33,13) width 3: " "
+                text run at (33,13) width 6: "  "
                 text run at (0,26) width 29: "dolor"
                 text run at (29,26) width 3: " "
                 text run at (0,39) width 50: "ABCDEFG"
@@ -989,7 +1137,7 @@ layer at (0,0) size 785x940
                 text run at (0,0) width 34: "Lorem"
                 text run at (34,0) width 3: " "
                 text run at (0,13) width 33: "ipsum"
-                text run at (33,13) width 3: " "
+                text run at (33,13) width 6: "  "
                 text run at (0,26) width 29: "dolor"
                 text run at (29,26) width 3: " "
                 text run at (0,39) width 36: "ABCDE"
@@ -1009,7 +1157,7 @@ layer at (0,0) size 785x940
                 text run at (0,0) width 34: "Lorem"
                 text run at (34,0) width 3: " "
                 text run at (0,13) width 33: "ipsum"
-                text run at (33,13) width 3: " "
+                text run at (33,13) width 6: "  "
                 text run at (0,26) width 29: "dolor"
                 text run at (29,26) width 3: " "
                 text run at (0,39) width 36: "ABCDE"
@@ -1029,7 +1177,7 @@ layer at (0,0) size 785x940
                 text run at (0,0) width 34: "Lorem"
                 text run at (34,0) width 3: " "
                 text run at (0,13) width 33: "ipsum"
-                text run at (33,13) width 3: " "
+                text run at (33,13) width 6: "  "
                 text run at (0,26) width 29: "dolor"
                 text run at (29,26) width 3: " "
                 text run at (0,39) width 36: "ABCDE"
@@ -1049,7 +1197,7 @@ layer at (0,0) size 785x940
                 text run at (0,0) width 34: "Lorem"
                 text run at (34,0) width 3: " "
                 text run at (0,13) width 33: "ipsum"
-                text run at (33,13) width 3: " "
+                text run at (33,13) width 6: "  "
                 text run at (0,26) width 29: "dolor"
                 text run at (29,26) width 3: " "
                 text run at (0,39) width 36: "ABCDE"
@@ -1073,7 +1221,7 @@ layer at (0,0) size 785x940
                 text run at (0,39) width 16: "ips"
                 text run at (0,52) width 7: "u"
                 text run at (0,65) width 11: "m"
-                text run at (11,65) width 3: " "
+                text run at (11,65) width 6: "  "
                 text run at (0,78) width 17: "dol"
                 text run at (0,91) width 12: "or"
                 text run at (12,91) width 3: " "
@@ -1105,8 +1253,8 @@ layer at (0,0) size 785x940
           RenderTextControl {TEXTAREA} at (3,17) size 129x45 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (3,3) size 108x65
               RenderText {#text} at (0,0) size 108x65
-                text run at (0,0) width 102: "Lorem ipsum dolor"
-                text run at (102,0) width 3: " "
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
                 text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
                 text run at (0,26) width 80: "PQRSTUVWXYZ"
                 text run at (80,26) width 3: " "
@@ -1119,7 +1267,7 @@ layer at (0,0) size 785x940
                 text run at (0,0) width 34: "Lorem"
                 text run at (34,0) width 3: " "
                 text run at (0,13) width 33: "ipsum"
-                text run at (33,13) width 3: " "
+                text run at (33,13) width 5: "  "
                 text run at (0,26) width 29: "dolor"
                 text run at (29,26) width 3: " "
                 text run at (0,39) width 36: "ABCDE"
@@ -1137,8 +1285,8 @@ layer at (0,0) size 785x940
           RenderTextControl {TEXTAREA} at (3,17) size 129x97 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (3,3) size 123x65
               RenderText {#text} at (0,0) size 119x65
-                text run at (0,0) width 102: "Lorem ipsum dolor"
-                text run at (102,0) width 3: " "
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
                 text run at (0,13) width 119: "ABCDEFGHIJKLMNOPQ"
                 text run at (0,26) width 65: "RSTUVWXYZ"
                 text run at (65,26) width 3: " "
@@ -1153,7 +1301,7 @@ layer at (0,0) size 785x940
                 text run at (11,13) width 3: " "
                 text run at (0,26) width 23: "ipsu"
                 text run at (0,39) width 11: "m"
-                text run at (11,39) width 3: " "
+                text run at (11,39) width 6: "  "
                 text run at (0,52) width 24: "dolo"
                 text run at (0,65) width 5: "r"
                 text run at (5,65) width 3: " "
@@ -1173,17 +1321,17 @@ layer at (0,0) size 785x940
                 text run at (0,234) width 21: "nop"
                 text run at (0,247) width 22: "qrst"
                 text run at (0,260) width 13: "uv"
-        layer at (302,411) size 129x47 clip at (303,412) size 127x30 scrollWidth 423
+        layer at (302,411) size 129x47 clip at (303,412) size 127x30 scrollWidth 426
           RenderTextControl {TEXTAREA} at (3,17) size 129x47 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (3,3) size 123x13
-              RenderText {#text} at (0,0) size 421x13
-                text run at (0,0) width 421: "Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv"
+              RenderText {#text} at (0,0) size 424x13
+                text run at (0,0) width 424: "Lorem ipsum  dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv"
         layer at (437,426) size 129x32 clip at (438,427) size 112x30 scrollHeight 69
           RenderTextControl {TEXTAREA} at (3,17) size 129x32 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (3,3) size 108x65
               RenderText {#text} at (0,0) size 108x65
-                text run at (0,0) width 102: "Lorem ipsum dolor"
-                text run at (102,0) width 3: " "
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
                 text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
                 text run at (0,26) width 80: "PQRSTUVWXYZ"
                 text run at (80,26) width 3: " "
@@ -1193,13 +1341,75 @@ layer at (0,0) size 785x940
           RenderTextControl {TEXTAREA} at (3,17) size 129x32 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
             RenderBlock {DIV} at (3,3) size 108x65
               RenderText {#text} at (0,0) size 108x65
-                text run at (0,0) width 102: "Lorem ipsum dolor"
-                text run at (102,0) width 3: " "
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
                 text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
                 text run at (0,26) width 80: "PQRSTUVWXYZ"
                 text run at (80,26) width 3: " "
                 text run at (0,39) width 108: "abcdefghijklmnopqr"
                 text run at (0,52) width 23: "stuv"
+        layer at (3,492) size 129x32 clip at (4,493) size 112x30 scrollHeight 69
+          RenderTextControl {TEXTAREA} at (3,31) size 129x32 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
+            RenderBlock {DIV} at (3,3) size 108x65
+              RenderText {#text} at (0,0) size 108x65
+                text run at (0,0) width 73: "Lorem ipsum "
+                text run at (73,0) width 29: "dolor"
+                text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
+                text run at (0,26) width 80: "PQRSTUVWXYZ"
+                text run at (0,39) width 108: "abcdefghijklmnopqr"
+                text run at (0,52) width 23: "stuv"
+        layer at (138,492) size 129x32 clip at (139,493) size 112x30 scrollHeight 69
+          RenderTextControl {TEXTAREA} at (3,31) size 129x32 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
+            RenderBlock {DIV} at (3,3) size 108x65
+              RenderText {#text} at (0,0) size 108x65
+                text run at (0,0) width 108: "Lorem ipsum  dolor "
+                text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
+                text run at (0,26) width 102: "PQRSTUVWXYZ abc"
+                text run at (0,39) width 106: "defghijklmnopqrstu"
+                text run at (0,52) width 6: "v"
+        layer at (273,492) size 129x32 clip at (274,493) size 112x30 scrollHeight 69
+          RenderTextControl {TEXTAREA} at (3,31) size 129x32 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
+            RenderBlock {DIV} at (3,3) size 108x65
+              RenderText {#text} at (0,0) size 108x65
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
+                text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
+                text run at (0,26) width 80: "PQRSTUVWXYZ"
+                text run at (80,26) width 3: " "
+                text run at (0,39) width 108: "abcdefghijklmnopqr"
+                text run at (0,52) width 23: "stuv"
+        layer at (408,492) size 129x32 clip at (409,493) size 112x15 scrollWidth 423 scrollHeight 17
+          RenderTextControl {TEXTAREA} at (3,31) size 129x32 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
+            RenderBlock {DIV} at (3,3) size 123x13
+              RenderText {#text} at (0,0) size 421x13
+                text run at (0,0) width 73: "Lorem ipsum "
+                text run at (73,0) width 348: "dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv"
+        layer at (543,492) size 129x32 clip at (544,493) size 112x30 scrollHeight 69
+          RenderTextControl {TEXTAREA} at (3,31) size 129x32 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
+            RenderBlock {DIV} at (3,3) size 108x65
+              RenderText {#text} at (0,0) size 108x65
+                text run at (0,0) width 73: "Lorem ipsum "
+                text run at (73,0) width 29: "dolor"
+                text run at (0,13) width 104: "ABCDEFGHIJKLMNO"
+                text run at (0,26) width 80: "PQRSTUVWXYZ"
+                text run at (0,39) width 108: "abcdefghijklmnopqr"
+                text run at (0,52) width 23: "stuv"
+        layer at (3,572) size 129x47 clip at (4,573) size 112x30 scrollWidth 185 scrollHeight 43
+          RenderTextControl {TEXTAREA} at (3,31) size 129x47 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
+            RenderBlock {DIV} at (3,3) size 123x39
+              RenderText {#text} at (0,0) size 183x39
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
+                text run at (0,13) width 183: "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+                text run at (0,26) width 130: "abcdefghijklmnopqrstuv"
+        layer at (138,572) size 129x47 clip at (139,573) size 112x30 scrollWidth 185 scrollHeight 43
+          RenderTextControl {TEXTAREA} at (3,45) size 129x47 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
+            RenderBlock {DIV} at (3,3) size 123x39
+              RenderText {#text} at (0,0) size 183x39
+                text run at (0,0) width 105: "Lorem ipsum  dolor"
+                text run at (105,0) width 3: " "
+                text run at (0,13) width 183: "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+                text run at (0,26) width 130: "abcdefghijklmnopqrstuv"
       RenderText {#text} at (0,0) size 0x0
       RenderText {#text} at (0,0) size 0x0
       RenderText {#text} at (0,0) size 0x0

diff --git a/WebCore/ChangeLog b/WebCore/ChangeLog
index 8931960607c5fa921ef1c56f55297cbc89e3e153..f256cc242bfd7c7e374e8e67f22d3b34883dd0c9 100644 (file)
--- a/WebCore/ChangeLog
+++ b/WebCore/ChangeLog
@@ -1,3 +1,23 @@
+2009-06-08  Shinichiro Hamaji  <hamaji@chromium.org>
+
+        Reviewed by Eric Seidel.
+
+        Setting white-space and word-wrap via CSS in textarea doesn't override the wrap attribute
+        https://bugs.webkit.org/show_bug.cgi?id=26254
+
+        Make it so that setting white-space and word-wrap via CSS
+        overrides the wrap attribute.
+
+        This involves having the shadow div in the textarea inherit
+        the CSS from its parent instead of hard-coding it in
+        RenderTextControlMultiline.
+
+        * css/html4.css:
+        * html/HTMLTextAreaElement.cpp:
+        (WebCore::HTMLTextAreaElement::parseMappedAttribute):
+        * rendering/RenderTextControlMultiLine.cpp:
+        (WebCore::RenderTextControlMultiLine::createInnerTextStyle):
+
 2009-07-15  Dumitru Daniliuc  <dumi@chromium.org>
 
         Reviewed by Dimitri Glazkov.

diff --git a/WebCore/html/HTMLTextAreaElement.cpp b/WebCore/html/HTMLTextAreaElement.cpp
index e19ac0af892b5560a844e1ca820d472e220d94f6..8bda72bb10d390b2694417fcbed6123e9ae40494 100644 (file)
--- a/WebCore/html/HTMLTextAreaElement.cpp
+++ b/WebCore/html/HTMLTextAreaElement.cpp
@@ -27,6 +27,7 @@
 #include "HTMLTextAreaElement.h"
 
 #include "ChromeClient.h"
+#include "CSSValueKeywords.h"
 #include "Document.h"
 #include "Event.h"
 #include "EventNames.h"
@@ -172,6 +173,15 @@ void HTMLTextAreaElement::parseMappedAttribute(MappedAttribute* attr)
             wrap = SoftWrap;
         if (wrap != m_wrap) {
             m_wrap = wrap;
+
+            if (shouldWrapText()) {
+                addCSSProperty(attr, CSSPropertyWhiteSpace, CSSValuePreWrap);
+                addCSSProperty(attr, CSSPropertyWordWrap, CSSValueBreakWord);
+            } else {
+                addCSSProperty(attr, CSSPropertyWhiteSpace, CSSValuePre);
+                addCSSProperty(attr, CSSPropertyWordWrap, CSSValueNormal);
+            }
+
             if (renderer())
                 renderer()->setNeedsLayoutAndPrefWidthsRecalc();
         }

diff --git a/WebCore/rendering/RenderTextControlMultiLine.cpp b/WebCore/rendering/RenderTextControlMultiLine.cpp
index df31c2bdf6a59fc5b6bba075cd625770632b726b..566a81c868a33af7581b4a435249ffb1a7ea527d 100644 (file)
--- a/WebCore/rendering/RenderTextControlMultiLine.cpp
+++ b/WebCore/rendering/RenderTextControlMultiLine.cpp
@@ -106,19 +106,6 @@ PassRefPtr<RenderStyle> RenderTextControlMultiLine::createInnerTextStyle(const R
     textBlockStyle->inheritFrom(startStyle);
 
     adjustInnerTextStyle(startStyle, textBlockStyle.get());
-
-    // FIXME: This code should just map wrap into CSS in the DOM code.
-    // Then here we should set the textBlockStyle appropriately based off this
-    // object's style()->whiteSpace() and style->wordWrap().
-    // Set word wrap property based on wrap attribute.
-    if (static_cast<HTMLTextAreaElement*>(node())->shouldWrapText()) {
-        textBlockStyle->setWhiteSpace(PRE_WRAP);
-        textBlockStyle->setWordWrap(BreakWordWrap);
-    } else {
-        textBlockStyle->setWhiteSpace(PRE);
-        textBlockStyle->setWordWrap(NormalWordWrap);
-    }
-
     textBlockStyle->setDisplay(BLOCK);
 
     return textBlockStyle.release();