2010-07-01 Satish Sampath <satish@chromium.org>
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 1 Jul 2010 11:11:01 +0000 (11:11 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 1 Jul 2010 11:11:01 +0000 (11:11 +0000)
        Reviewed by Kent Tamura.

        Rendering the speech button in input elements.
        https://bugs.webkit.org/show_bug.cgi?id=40984

        input-appearance-speechbutton.html checks the appearances of various sizes of speech buttons.
        input-appearance-searchandspeech.html checks input type='search' field with speech button.
        input-appearance-numberandspeech.html checks input type='number' field with speech button.

        * fast/forms/input-appearance-numberandspeech-expected.txt: Added.
        * fast/forms/input-appearance-numberandspeech.html: Added.
        * fast/forms/input-appearance-searchandspeech-expected.txt: Added.
        * fast/forms/input-appearance-searchandspeech.html: Added.
        * fast/forms/input-appearance-speechbutton-expected.txt: Added.
        * fast/forms/input-appearance-speechbutton.html: Added.
        * platform/chromium/test_expectations.txt: Skipped all these new tests as the speech input feature is disabled by default.
        * platform/gtk/Skipped:
        * platform/mac/fast/forms/input-appearance-numberandspeech-expected.checksum: Added.
        * platform/mac/fast/forms/input-appearance-numberandspeech-expected.png: Added.
        * platform/mac/fast/forms/input-appearance-searchandspeech-expected.checksum: Added.
        * platform/mac/fast/forms/input-appearance-searchandspeech-expected.png: Added.
        * platform/mac/fast/forms/input-appearance-speechbutton-expected.checksum: Added.
        * platform/mac/fast/forms/input-appearance-speechbutton-expected.png: Added.
        * platform/mac/Skipped:
        * platform/qt/Skipped:
        * platform/win/Skipped:
2010-07-01  Satish Sampath  <satish@chromium.org>

        Reviewed by Kent Tamura.

        Rendering the speech button in input elements.
        https://bugs.webkit.org/show_bug.cgi?id=40984

        The button currently has only one state and rendered as an image on all platforms. Subsequent
        patches will add user input handling and more states + rendering code to the button. The
        button's appearance can be customized by individual ports in their RenderTheme implementation
        if required.

        Tests: platform/mac/fast/forms/input-appearance-numberandspeech.html
               platform/mac/fast/forms/input-appearance-searchandspeech.html
               platform/mac/fast/forms/input-appearance-speechbutton.html

        * GNUmakefile.am:
        * Resources/inputSpeech.png: Added.
        * Resources/inputSpeech.tiff: Added. Used by the Mac implementation.
        * WebCore.gypi:
        * WebCore.pro:
        * WebCore.qrc:
        * WebCore.xcodeproj/project.pbxproj:
        * platform/graphics/qt/ImageQt.cpp:
        (loadResourcePixmap): Load the speech button images for Qt port.
        * rendering/RenderInputSpeech.cpp: Added.
        (WebCore::RenderInputSpeech::adjustInputFieldSpeechButtonStyle): Sets the button's dimensions.
        (WebCore::RenderInputSpeech::paintInputFieldSpeechButton):
        * rendering/RenderInputSpeech.h: Added.
        * rendering/RenderTextControlSingleLine.cpp:
        (WebCore::RenderTextControlSingleLine::layout):
        (WebCore::RenderTextControlSingleLine::forwardEvent):
        (WebCore::RenderTextControlSingleLine::createSubtreeIfNeeded): Create the speech button.
        (WebCore::RenderTextControlSingleLine::createInnerBlockStyle):
        * rendering/RenderTheme.cpp:
        (WebCore::RenderTheme::adjustStyle):
        (WebCore::RenderTheme::paint):
        (WebCore::RenderTheme::adjustInputFieldSpeechButtonStyle):
        (WebCore::RenderTheme::paintInputFieldSpeechButton):
        * rendering/RenderTheme.h:
        * rendering/RenderThemeMac.mm:
        (WebCore::RenderThemeMac::paintSearchFieldCancelButton): Get cancel button to render to the left of
        speech button when enabled.
2010-07-01  Satish Sampath  <satish@chromium.org>

        Reviewed by Kent Tamura.

        Rendering the speech button in input elements.
        https://bugs.webkit.org/show_bug.cgi?id=40984

        * Api/qwebsettings.cpp:
        (graphics):
        * Api/qwebsettings.h:

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

36 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/forms/input-appearance-numberandspeech-expected.txt [new file with mode: 0644]
LayoutTests/fast/forms/input-appearance-numberandspeech.html [new file with mode: 0644]
LayoutTests/fast/forms/input-appearance-searchandspeech-expected.txt [new file with mode: 0644]
LayoutTests/fast/forms/input-appearance-searchandspeech.html [new file with mode: 0644]
LayoutTests/fast/forms/input-appearance-speechbutton-expected.txt [new file with mode: 0644]
LayoutTests/fast/forms/input-appearance-speechbutton.html [new file with mode: 0644]
LayoutTests/platform/chromium/test_expectations.txt
LayoutTests/platform/gtk/Skipped
LayoutTests/platform/mac/Skipped
LayoutTests/platform/mac/fast/forms/input-appearance-numberandspeech-expected.checksum [new file with mode: 0644]
LayoutTests/platform/mac/fast/forms/input-appearance-numberandspeech-expected.png [new file with mode: 0644]
LayoutTests/platform/mac/fast/forms/input-appearance-searchandspeech-expected.checksum [new file with mode: 0644]
LayoutTests/platform/mac/fast/forms/input-appearance-searchandspeech-expected.png [new file with mode: 0644]
LayoutTests/platform/mac/fast/forms/input-appearance-speechbutton-expected.checksum [new file with mode: 0644]
LayoutTests/platform/mac/fast/forms/input-appearance-speechbutton-expected.png [new file with mode: 0644]
LayoutTests/platform/qt/Skipped
LayoutTests/platform/win/Skipped
WebCore/ChangeLog
WebCore/GNUmakefile.am
WebCore/Resources/inputSpeech.png [new file with mode: 0644]
WebCore/Resources/inputSpeech.tiff [new file with mode: 0644]
WebCore/WebCore.gypi
WebCore/WebCore.pro
WebCore/WebCore.qrc
WebCore/WebCore.xcodeproj/project.pbxproj
WebCore/platform/graphics/qt/ImageQt.cpp
WebCore/rendering/RenderInputSpeech.cpp [new file with mode: 0644]
WebCore/rendering/RenderInputSpeech.h [new file with mode: 0644]
WebCore/rendering/RenderTextControlSingleLine.cpp
WebCore/rendering/RenderTheme.cpp
WebCore/rendering/RenderTheme.h
WebCore/rendering/RenderThemeMac.mm
WebKit/qt/Api/qwebsettings.cpp
WebKit/qt/Api/qwebsettings.h
WebKit/qt/ChangeLog

index ff447b3..fd66aa7 100644 (file)
@@ -1,3 +1,32 @@
+2010-07-01  Satish Sampath  <satish@chromium.org>
+
+        Reviewed by Kent Tamura.
+
+        Rendering the speech button in input elements.
+        https://bugs.webkit.org/show_bug.cgi?id=40984
+
+        input-appearance-speechbutton.html checks the appearances of various sizes of speech buttons.
+        input-appearance-searchandspeech.html checks input type='search' field with speech button.
+        input-appearance-numberandspeech.html checks input type='number' field with speech button.
+
+        * fast/forms/input-appearance-numberandspeech-expected.txt: Added.
+        * fast/forms/input-appearance-numberandspeech.html: Added.
+        * fast/forms/input-appearance-searchandspeech-expected.txt: Added.
+        * fast/forms/input-appearance-searchandspeech.html: Added.
+        * fast/forms/input-appearance-speechbutton-expected.txt: Added.
+        * fast/forms/input-appearance-speechbutton.html: Added.
+        * platform/chromium/test_expectations.txt: Skipped all these new tests as the speech input feature is disabled by default.
+        * platform/gtk/Skipped:
+        * platform/mac/fast/forms/input-appearance-numberandspeech-expected.checksum: Added.
+        * platform/mac/fast/forms/input-appearance-numberandspeech-expected.png: Added.
+        * platform/mac/fast/forms/input-appearance-searchandspeech-expected.checksum: Added.
+        * platform/mac/fast/forms/input-appearance-searchandspeech-expected.png: Added.
+        * platform/mac/fast/forms/input-appearance-speechbutton-expected.checksum: Added.
+        * platform/mac/fast/forms/input-appearance-speechbutton-expected.png: Added.
+        * platform/mac/Skipped:
+        * platform/qt/Skipped:
+        * platform/win/Skipped:
+
 2010-07-01  Yury Semikhatsky  <yurys@chromium.org>
 
         Reviewed by Adam Barth.
diff --git a/LayoutTests/fast/forms/input-appearance-numberandspeech-expected.txt b/LayoutTests/fast/forms/input-appearance-numberandspeech-expected.txt
new file mode 100644 (file)
index 0000000..04877ef
--- /dev/null
@@ -0,0 +1,303 @@
+layer at (0,0) size 785x605
+  RenderView at (0,0) size 785x600
+layer at (0,0) size 785x605
+  RenderBlock {HTML} at (0,0) size 785x600
+    RenderBody {BODY} at (8,8) size 769x584
+      RenderBlock {P} at (0,0) size 769x18
+        RenderText {#text} at (0,0) size 422x18
+          text run at (0,0) width 422: "Test appearances of input-speech-button in <input type='number'>."
+      RenderBlock {DIV} at (0,34) size 769x0
+      RenderBlock {DIV} at (0,34) size 769x539
+        RenderTable {TABLE} at (0,0) size 439x539
+          RenderTableSection {TBODY} at (0,0) size 439x539
+            RenderTableRow {TR} at (0,2) size 439x535
+              RenderTableCell {TD} at (2,85) size 180x369 [r=0 c=0 rs=1 cs=1]
+                RenderBlock {DIV} at (1,1) size 178x35
+                  RenderTextControl {INPUT} at (0,3) size 100x16 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (84,1) size 13x15
+                  RenderText {#text} at (100,0) size 4x18
+                    text run at (100,0) width 4: " "
+                  RenderBR {BR} at (104,14) size 0x0
+                  RenderTextControl {INPUT} at (0,19) size 100x16 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,2) size 94x12
+                      RenderBlock {DIV} at (66,0) size 10x10
+                    RenderBlock {DIV} at (84,1) size 13x15
+                RenderBlock {DIV} at (1,36) size 178x36
+                  RenderTextControl {INPUT} at (0,2) size 102x17 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (86,1) size 13x15
+                  RenderText {#text} at (102,0) size 4x18
+                    text run at (102,0) width 4: " "
+                  RenderBR {BR} at (106,14) size 0x0
+                  RenderTextControl {INPUT} at (0,19) size 102x17 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,2) size 96x13
+                      RenderBlock {DIV} at (67,0) size 11x11
+                    RenderBlock {DIV} at (86,1) size 13x15
+                RenderBlock {DIV} at (1,72) size 178x37
+                  RenderTextControl {INPUT} at (0,1) size 104x18 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (88,2) size 13x15
+                  RenderText {#text} at (104,0) size 4x18
+                    text run at (104,0) width 4: " "
+                  RenderBR {BR} at (108,14) size 0x0
+                  RenderTextControl {INPUT} at (0,19) size 104x18 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,2) size 98x14
+                      RenderBlock {DIV} at (68,0) size 12x12
+                    RenderBlock {DIV} at (88,2) size 13x15
+                RenderBlock {DIV} at (1,109) size 178x47
+                  RenderTextControl {INPUT} at (2,2) size 125x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (109,2) size 13x15
+                  RenderText {#text} at (129,2) size 4x18
+                    text run at (129,2) width 4: " "
+                  RenderBR {BR} at (133,16) size 0x0
+                  RenderTextControl {INPUT} at (2,25) size 125x20 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,2) size 119x16
+                      RenderBlock {DIV} at (87,0) size 14x14
+                    RenderBlock {DIV} at (109,3) size 13x15
+                RenderBlock {DIV} at (1,156) size 178x50
+                  RenderTextControl {INPUT} at (2,2) size 127x21 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (111,3) size 13x15
+                  RenderText {#text} at (131,3) size 4x18
+                    text run at (131,3) width 4: " "
+                  RenderBR {BR} at (135,17) size 0x0
+                  RenderTextControl {INPUT} at (2,27) size 127x21 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 121x18
+                      RenderBlock {DIV} at (88,0) size 15x15
+                    RenderBlock {DIV} at (111,3) size 13x15
+                RenderBlock {DIV} at (1,206) size 178x52
+                  RenderTextControl {INPUT} at (2,2) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (130,0) size 15x22
+                  RenderText {#text} at (152,4) size 4x18
+                    text run at (152,4) width 4: " "
+                  RenderBR {BR} at (156,18) size 0x0
+                  RenderTextControl {INPUT} at (2,28) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 142x19
+                      RenderBlock {DIV} at (106,0) size 16x16
+                    RenderBlock {DIV} at (130,0) size 15x22
+                RenderBlock {DIV} at (1,258) size 178x54
+                  RenderTextControl {INPUT} at (2,2) size 150x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (132,1) size 15x22
+                  RenderText {#text} at (154,5) size 4x18
+                    text run at (154,5) width 4: " "
+                  RenderBR {BR} at (158,19) size 0x0
+                  RenderTextControl {INPUT} at (2,29) size 150x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 144x20
+                      RenderBlock {DIV} at (107,0) size 17x17
+                    RenderBlock {DIV} at (132,1) size 15x22
+                RenderBlock {DIV} at (1,312) size 178x56
+                  RenderTextControl {INPUT} at (2,2) size 170x24 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (152,1) size 15x22
+                  RenderText {#text} at (174,6) size 4x18
+                    text run at (174,6) width 4: " "
+                  RenderBR {BR} at (178,20) size 0x0
+                  RenderTextControl {INPUT} at (2,30) size 170x24 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 164x21
+                      RenderBlock {DIV} at (126,0) size 18x18
+                    RenderBlock {DIV} at (152,1) size 15x22
+              RenderTableCell {TD} at (184,2) size 253x535 [r=0 c=1 rs=1 cs=1]
+                RenderBlock {DIV} at (1,1) size 251x58
+                  RenderTextControl {INPUT} at (2,2) size 172x24 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (154,1) size 15x22
+                  RenderText {#text} at (176,6) size 4x18
+                    text run at (176,6) width 4: " "
+                  RenderBR {BR} at (180,20) size 0x0
+                  RenderTextControl {INPUT} at (2,30) size 172x26 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 166x23
+                      RenderBlock {DIV} at (126,0) size 20x20
+                    RenderBlock {DIV} at (154,2) size 15x22
+                RenderBlock {DIV} at (1,59) size 251x61
+                  RenderTextControl {INPUT} at (2,2) size 174x26 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (156,2) size 15x22
+                  RenderText {#text} at (178,7) size 4x18
+                    text run at (178,7) width 4: " "
+                  RenderBR {BR} at (182,21) size 0x0
+                  RenderTextControl {INPUT} at (2,32) size 174x27 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 168x25
+                      RenderBlock {DIV} at (127,0) size 21x21
+                    RenderBlock {DIV} at (156,3) size 15x22
+                RenderBlock {DIV} at (1,120) size 251x63
+                  RenderTextControl {INPUT} at (2,2) size 195x27 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (173,0) size 19x27
+                  RenderText {#text} at (199,8) size 4x18
+                    text run at (199,8) width 4: " "
+                  RenderBR {BR} at (203,22) size 0x0
+                  RenderTextControl {INPUT} at (2,33) size 195x28 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 189x26
+                      RenderBlock {DIV} at (143,0) size 22x22
+                    RenderBlock {DIV} at (173,1) size 19x27
+                RenderBlock {DIV} at (1,183) size 251x65
+                  RenderTextControl {INPUT} at (2,2) size 197x28 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (175,1) size 19x27
+                  RenderText {#text} at (201,9) size 4x18
+                    text run at (201,9) width 4: " "
+                  RenderBR {BR} at (205,23) size 0x0
+                  RenderTextControl {INPUT} at (2,34) size 197x29 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 191x27
+                      RenderBlock {DIV} at (144,0) size 23x23
+                    RenderBlock {DIV} at (175,1) size 19x27
+                RenderBlock {DIV} at (1,248) size 251x68
+                  RenderTextControl {INPUT} at (2,2) size 218x29 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (196,1) size 19x27
+                  RenderText {#text} at (222,10) size 4x18
+                    text run at (222,10) width 4: " "
+                  RenderBR {BR} at (226,24) size 0x0
+                  RenderTextControl {INPUT} at (2,35) size 218x31 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 212x29
+                      RenderBlock {DIV} at (163,0) size 25x25
+                    RenderBlock {DIV} at (196,2) size 19x27
+                RenderBlock {DIV} at (1,316) size 251x70
+                  RenderTextControl {INPUT} at (2,2) size 220x30 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (198,2) size 19x27
+                  RenderText {#text} at (224,11) size 4x18
+                    text run at (224,11) width 4: " "
+                  RenderBR {BR} at (228,25) size 0x0
+                  RenderTextControl {INPUT} at (2,36) size 220x32 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 214x30
+                      RenderBlock {DIV} at (164,0) size 26x26
+                    RenderBlock {DIV} at (198,3) size 19x27
+                RenderBlock {DIV} at (1,386) size 251x73
+                  RenderTextControl {INPUT} at (2,2) size 241x32 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (219,3) size 19x27
+                  RenderText {#text} at (245,12) size 4x18
+                    text run at (245,12) width 4: " "
+                  RenderBR {BR} at (249,26) size 0x0
+                  RenderTextControl {INPUT} at (2,38) size 241x33 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,0) size 235x32
+                      RenderBlock {DIV} at (184,0) size 27x27
+                    RenderBlock {DIV} at (219,3) size 19x27
+                RenderBlock {DIV} at (1,459) size 251x75
+                  RenderTextControl {INPUT} at (2,2) size 243x33 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (221,3) size 19x27
+                  RenderText {#text} at (247,13) size 4x18
+                    text run at (247,13) width 4: " "
+                  RenderBR {BR} at (251,27) size 0x0
+                  RenderTextControl {INPUT} at (2,39) size 243x34 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,0) size 237x33
+                      RenderBlock {DIV} at (185,0) size 28x28
+                    RenderBlock {DIV} at (221,4) size 19x27
+layer at (14,134) size 76x10 scrollWidth 154
+  RenderBlock {DIV} at (3,3) size 76x10
+    RenderText {#text} at (1,0) size 152x10
+      text run at (1,0) width 152: "012345678901234567890123456789"
+layer at (14,151) size 66x10 scrollWidth 154
+  RenderBlock {DIV} at (0,2) size 66x10
+    RenderText {#text} at (1,0) size 152x10
+      text run at (1,0) width 152: "012345678901234567890123456789"
+layer at (14,168) size 78x11 scrollWidth 173
+  RenderBlock {DIV} at (3,3) size 78x11
+    RenderText {#text} at (1,0) size 171x11
+      text run at (1,0) width 171: "012345678901234567890123456789"
+layer at (14,186) size 67x11 scrollWidth 173
+  RenderBlock {DIV} at (0,2) size 67x11
+    RenderText {#text} at (1,0) size 171x11
+      text run at (1,0) width 171: "012345678901234567890123456789"
+layer at (14,203) size 80x12 scrollWidth 192
+  RenderBlock {DIV} at (3,3) size 80x12
+    RenderText {#text} at (1,0) size 190x12
+      text run at (1,0) width 190: "012345678901234567890123456789"
+layer at (14,222) size 68x12 scrollWidth 192
+  RenderBlock {DIV} at (0,2) size 68x12
+    RenderText {#text} at (1,0) size 190x12
+      text run at (1,0) width 190: "012345678901234567890123456789"
+layer at (16,241) size 101x13 scrollWidth 211
+  RenderBlock {DIV} at (3,3) size 101x13
+    RenderText {#text} at (1,0) size 209x13
+      text run at (1,0) width 209: "012345678901234567890123456789"
+layer at (16,266) size 87x13 scrollWidth 211
+  RenderBlock {DIV} at (0,3) size 87x13
+    RenderText {#text} at (1,0) size 209x13
+      text run at (1,0) width 209: "012345678901234567890123456789"
+layer at (16,288) size 103x15 scrollWidth 230
+  RenderBlock {DIV} at (3,3) size 103x15
+    RenderText {#text} at (1,0) size 228x15
+      text run at (1,0) width 228: "012345678901234567890123456789"
+layer at (16,314) size 88x15 scrollWidth 230
+  RenderBlock {DIV} at (0,3) size 88x15
+    RenderText {#text} at (1,0) size 228x15
+      text run at (1,0) width 228: "012345678901234567890123456789"
+layer at (16,338) size 122x16 scrollWidth 249
+  RenderBlock {DIV} at (3,3) size 122x16
+    RenderText {#text} at (1,0) size 247x16
+      text run at (1,0) width 247: "012345678901234567890123456789"
+layer at (16,365) size 106x16 scrollWidth 249
+  RenderBlock {DIV} at (0,3) size 106x16
+    RenderText {#text} at (1,0) size 247x16
+      text run at (1,0) width 247: "012345678901234567890123456789"
+layer at (16,390) size 124x17 scrollWidth 268
+  RenderBlock {DIV} at (3,3) size 124x17
+    RenderText {#text} at (1,0) size 266x17
+      text run at (1,0) width 266: "012345678901234567890123456789"
+layer at (16,418) size 107x17 scrollWidth 268
+  RenderBlock {DIV} at (0,3) size 107x17
+    RenderText {#text} at (1,0) size 266x17
+      text run at (1,0) width 266: "012345678901234567890123456789"
+layer at (16,444) size 144x18 scrollWidth 287
+  RenderBlock {DIV} at (3,3) size 144x18
+    RenderText {#text} at (1,0) size 285x18
+      text run at (1,0) width 285: "012345678901234567890123456789"
+layer at (16,473) size 126x18 scrollWidth 287
+  RenderBlock {DIV} at (0,3) size 126x18
+    RenderText {#text} at (1,0) size 285x18
+      text run at (1,0) width 285: "012345678901234567890123456789"
+layer at (198,50) size 146x18 scrollWidth 306
+  RenderBlock {DIV} at (3,3) size 146x18
+    RenderText {#text} at (1,0) size 304x18
+      text run at (1,0) width 304: "012345678901234567890123456789"
+layer at (198,81) size 126x18 scrollWidth 306
+  RenderBlock {DIV} at (0,5) size 126x18
+    RenderText {#text} at (1,0) size 304x18
+      text run at (1,0) width 304: "012345678901234567890123456789"
+layer at (198,108) size 148x20 scrollWidth 325
+  RenderBlock {DIV} at (3,3) size 148x20
+    RenderText {#text} at (1,0) size 323x20
+      text run at (1,0) width 323: "012345678901234567890123456789"
+layer at (198,141) size 127x20 scrollWidth 325
+  RenderBlock {DIV} at (0,5) size 127x20
+    RenderText {#text} at (1,0) size 323x20
+      text run at (1,0) width 323: "012345678901234567890123456789"
+layer at (198,169) size 165x21 scrollWidth 344
+  RenderBlock {DIV} at (3,3) size 165x21
+    RenderText {#text} at (1,0) size 342x21
+      text run at (1,0) width 342: "012345678901234567890123456789"
+layer at (198,203) size 143x21 scrollWidth 344
+  RenderBlock {DIV} at (0,5) size 143x21
+    RenderText {#text} at (1,0) size 342x21
+      text run at (1,0) width 342: "012345678901234567890123456789"
+layer at (198,232) size 167x22 scrollWidth 363
+  RenderBlock {DIV} at (3,3) size 167x22
+    RenderText {#text} at (1,0) size 361x22
+      text run at (1,0) width 361: "012345678901234567890123456789"
+layer at (198,267) size 144x22 scrollWidth 363
+  RenderBlock {DIV} at (0,5) size 144x22
+    RenderText {#text} at (1,0) size 361x22
+      text run at (1,0) width 361: "012345678901234567890123456789"
+layer at (198,297) size 188x23 scrollWidth 382
+  RenderBlock {DIV} at (3,3) size 188x23
+    RenderText {#text} at (1,0) size 380x23
+      text run at (1,0) width 380: "012345678901234567890123456789"
+layer at (198,334) size 163x23 scrollWidth 382
+  RenderBlock {DIV} at (0,6) size 163x23
+    RenderText {#text} at (1,0) size 380x23
+      text run at (1,0) width 380: "012345678901234567890123456789"
+layer at (198,365) size 190x24 scrollWidth 401
+  RenderBlock {DIV} at (3,3) size 190x24
+    RenderText {#text} at (1,0) size 399x24
+      text run at (1,0) width 399: "012345678901234567890123456789"
+layer at (198,403) size 164x24 scrollWidth 401
+  RenderBlock {DIV} at (0,6) size 164x24
+    RenderText {#text} at (1,0) size 399x24
+      text run at (1,0) width 399: "012345678901234567890123456789"
+layer at (198,435) size 211x26 scrollWidth 420
+  RenderBlock {DIV} at (3,3) size 211x26
+    RenderText {#text} at (1,0) size 418x26
+      text run at (1,0) width 418: "012345678901234567890123456789"
+layer at (198,474) size 184x26 scrollWidth 420
+  RenderBlock {DIV} at (0,6) size 184x26
+    RenderText {#text} at (1,0) size 418x26
+      text run at (1,0) width 418: "012345678901234567890123456789"
+layer at (198,508) size 213x27 scrollWidth 439
+  RenderBlock {DIV} at (3,3) size 213x27
+    RenderText {#text} at (1,0) size 437x27
+      text run at (1,0) width 437: "012345678901234567890123456789"
+layer at (198,548) size 185x27 scrollWidth 439
+  RenderBlock {DIV} at (0,6) size 185x27
+    RenderText {#text} at (1,0) size 437x27
+      text run at (1,0) width 437: "012345678901234567890123456789"
diff --git a/LayoutTests/fast/forms/input-appearance-numberandspeech.html b/LayoutTests/fast/forms/input-appearance-numberandspeech.html
new file mode 100644 (file)
index 0000000..b7b95d4
--- /dev/null
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
+<html>
+<head>
+<link rel="stylesheet" href="../../../../fast/js/resources/js-test-style.css">
+<style>
+</style>
+</head>
+<body>
+<p>Test appearances of input-speech-button in &lt;input type='number'&gt;.</p>
+<div id="console"></div>
+
+<script>
+var parent = document.createElement('div');
+document.body.appendChild(parent);
+parent.innerHTML = '<table><tr><td id=p1><td id=p2></tr></table>';
+for (var size = 8; size < 24; size++) {
+    var div = document.createElement('div');
+    document.getElementById(size < (24 + 8) / 2 ? 'p1' : 'p2').appendChild(div);
+    div.innerHTML = '<input type="number" style="font-size:' + size + 'px" value="012345678901234567890123456789"> <br>'
+        + '<input type="number" style="font-size:' + size + 'px" value="012345678901234567890123456789" speech>';
+}
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/input-appearance-searchandspeech-expected.txt b/LayoutTests/fast/forms/input-appearance-searchandspeech-expected.txt
new file mode 100644 (file)
index 0000000..c21e72e
--- /dev/null
@@ -0,0 +1,512 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x600
+  RenderBlock {HTML} at (0,0) size 800x600
+    RenderBody {BODY} at (8,8) size 784x584
+      RenderBlock {P} at (0,0) size 784x18
+        RenderText {#text} at (0,0) size 414x18
+          text run at (0,0) width 414: "Test appearances of input-speech-button in <input type='search'>."
+      RenderBlock {DIV} at (0,34) size 784x0
+      RenderBlock {DIV} at (0,34) size 784x456
+        RenderTable {TABLE} at (0,0) size 459x456
+          RenderTableSection {TBODY} at (0,0) size 459x456
+            RenderTableRow {TR} at (0,2) size 459x452
+              RenderTableCell {TD} at (2,42) size 135x371 [r=0 c=0 rs=1 cs=1]
+                RenderBlock {DIV} at (1,1) size 133x54
+                  RenderTextControl {INPUT} at (0,1) size 102x17 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,2) size 96x13
+                      RenderBlock {DIV} at (0,2) size 8x9
+                      RenderBlock {DIV} at (72,2) size 13x9
+                      RenderBlock {DIV} at (85,0) size 11x11
+                  RenderText {#text} at (102,0) size 4x18
+                    text run at (102,0) width 4: " "
+                  RenderBR {BR} at (106,14) size 0x0
+                  RenderTextControl {INPUT} at (0,20) size 102x17 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,3) size 96x11
+                      RenderBlock {DIV} at (0,0) size 8x9
+                      RenderBlock {DIV} at (83,0) size 13x9
+                  RenderText {#text} at (102,18) size 4x18
+                    text run at (102,18) width 4: " "
+                  RenderBR {BR} at (106,32) size 0x0
+                  RenderTextControl {INPUT} at (0,37) size 102x17 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,2) size 96x13
+                      RenderBlock {DIV} at (0,2) size 8x9
+                      RenderBlock {DIV} at (72,2) size 13x9
+                      RenderBlock {DIV} at (85,0) size 11x11
+                RenderBlock {DIV} at (1,55) size 133x54
+                  RenderTextControl {INPUT} at (0,1) size 102x17 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,2) size 96x13
+                      RenderBlock {DIV} at (0,2) size 8x9
+                      RenderBlock {DIV} at (72,2) size 13x9
+                      RenderBlock {DIV} at (85,0) size 11x11
+                  RenderText {#text} at (102,0) size 4x18
+                    text run at (102,0) width 4: " "
+                  RenderBR {BR} at (106,14) size 0x0
+                  RenderTextControl {INPUT} at (0,20) size 102x17 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,3) size 96x11
+                      RenderBlock {DIV} at (0,0) size 8x9
+                      RenderBlock {DIV} at (83,0) size 13x9
+                  RenderText {#text} at (102,18) size 4x18
+                    text run at (102,18) width 4: " "
+                  RenderBR {BR} at (106,32) size 0x0
+                  RenderTextControl {INPUT} at (0,37) size 102x17 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,2) size 96x13
+                      RenderBlock {DIV} at (0,2) size 8x9
+                      RenderBlock {DIV} at (72,2) size 13x9
+                      RenderBlock {DIV} at (85,0) size 11x11
+                RenderBlock {DIV} at (1,109) size 133x54
+                  RenderTextControl {INPUT} at (0,1) size 102x17 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,2) size 96x13
+                      RenderBlock {DIV} at (0,2) size 8x9
+                      RenderBlock {DIV} at (72,2) size 13x9
+                      RenderBlock {DIV} at (85,0) size 11x11
+                  RenderText {#text} at (102,0) size 4x18
+                    text run at (102,0) width 4: " "
+                  RenderBR {BR} at (106,14) size 0x0
+                  RenderTextControl {INPUT} at (0,20) size 102x17 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,3) size 96x11
+                      RenderBlock {DIV} at (0,0) size 8x9
+                      RenderBlock {DIV} at (83,0) size 13x9
+                  RenderText {#text} at (102,18) size 4x18
+                    text run at (102,18) width 4: " "
+                  RenderBR {BR} at (106,32) size 0x0
+                  RenderTextControl {INPUT} at (0,37) size 102x17 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,2) size 96x13
+                      RenderBlock {DIV} at (0,2) size 8x9
+                      RenderBlock {DIV} at (72,2) size 13x9
+                      RenderBlock {DIV} at (85,0) size 11x11
+                RenderBlock {DIV} at (1,163) size 133x69
+                  RenderTextControl {INPUT} at (2,2) size 125x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 119x16
+                      RenderBlock {DIV} at (0,3) size 8x11
+                      RenderBlock {DIV} at (92,3) size 13x11
+                      RenderBlock {DIV} at (105,0) size 14x14
+                  RenderText {#text} at (129,3) size 4x18
+                    text run at (129,3) width 4: " "
+                  RenderBR {BR} at (133,17) size 0x0
+                  RenderTextControl {INPUT} at (2,25) size 125x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,3) size 119x13
+                      RenderBlock {DIV} at (0,0) size 8x11
+                      RenderBlock {DIV} at (106,0) size 13x11
+                  RenderText {#text} at (129,25) size 4x18
+                    text run at (129,25) width 4: " "
+                  RenderBR {BR} at (133,39) size 0x0
+                  RenderTextControl {INPUT} at (2,48) size 125x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 119x16
+                      RenderBlock {DIV} at (0,3) size 8x11
+                      RenderBlock {DIV} at (92,3) size 13x11
+                      RenderBlock {DIV} at (105,0) size 14x14
+                RenderBlock {DIV} at (1,232) size 133x69
+                  RenderTextControl {INPUT} at (2,2) size 125x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 119x16
+                      RenderBlock {DIV} at (0,3) size 8x11
+                      RenderBlock {DIV} at (92,3) size 13x11
+                      RenderBlock {DIV} at (105,0) size 14x14
+                  RenderText {#text} at (129,3) size 4x18
+                    text run at (129,3) width 4: " "
+                  RenderBR {BR} at (133,17) size 0x0
+                  RenderTextControl {INPUT} at (2,25) size 125x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,3) size 119x13
+                      RenderBlock {DIV} at (0,0) size 8x11
+                      RenderBlock {DIV} at (106,0) size 13x11
+                  RenderText {#text} at (129,25) size 4x18
+                    text run at (129,25) width 4: " "
+                  RenderBR {BR} at (133,39) size 0x0
+                  RenderTextControl {INPUT} at (2,48) size 125x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 119x16
+                      RenderBlock {DIV} at (0,3) size 8x11
+                      RenderBlock {DIV} at (92,3) size 13x11
+                      RenderBlock {DIV} at (105,0) size 14x14
+                RenderBlock {DIV} at (1,301) size 133x69
+                  RenderTextControl {INPUT} at (2,2) size 125x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 119x16
+                      RenderBlock {DIV} at (0,3) size 8x11
+                      RenderBlock {DIV} at (92,3) size 13x11
+                      RenderBlock {DIV} at (105,0) size 14x14
+                  RenderText {#text} at (129,3) size 4x18
+                    text run at (129,3) width 4: " "
+                  RenderBR {BR} at (133,17) size 0x0
+                  RenderTextControl {INPUT} at (2,25) size 125x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,3) size 119x13
+                      RenderBlock {DIV} at (0,0) size 8x11
+                      RenderBlock {DIV} at (106,0) size 13x11
+                  RenderText {#text} at (129,25) size 4x18
+                    text run at (129,25) width 4: " "
+                  RenderBR {BR} at (133,39) size 0x0
+                  RenderTextControl {INPUT} at (2,48) size 125x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 119x16
+                      RenderBlock {DIV} at (0,3) size 8x11
+                      RenderBlock {DIV} at (92,3) size 13x11
+                      RenderBlock {DIV} at (105,0) size 14x14
+              RenderTableCell {TD} at (139,2) size 158x452 [r=0 c=1 rs=1 cs=1]
+                RenderBlock {DIV} at (1,1) size 156x69
+                  RenderTextControl {INPUT} at (2,2) size 125x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 119x16
+                      RenderBlock {DIV} at (0,3) size 8x11
+                      RenderBlock {DIV} at (92,3) size 13x11
+                      RenderBlock {DIV} at (105,0) size 14x14
+                  RenderText {#text} at (129,3) size 4x18
+                    text run at (129,3) width 4: " "
+                  RenderBR {BR} at (133,17) size 0x0
+                  RenderTextControl {INPUT} at (2,25) size 125x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,3) size 119x13
+                      RenderBlock {DIV} at (0,0) size 8x11
+                      RenderBlock {DIV} at (106,0) size 13x11
+                  RenderText {#text} at (129,25) size 4x18
+                    text run at (129,25) width 4: " "
+                  RenderBR {BR} at (133,39) size 0x0
+                  RenderTextControl {INPUT} at (2,48) size 125x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 119x16
+                      RenderBlock {DIV} at (0,3) size 8x11
+                      RenderBlock {DIV} at (92,3) size 13x11
+                      RenderBlock {DIV} at (105,0) size 14x14
+                RenderBlock {DIV} at (1,70) size 156x69
+                  RenderTextControl {INPUT} at (2,2) size 125x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 119x16
+                      RenderBlock {DIV} at (0,3) size 8x11
+                      RenderBlock {DIV} at (92,3) size 13x11
+                      RenderBlock {DIV} at (105,0) size 14x14
+                  RenderText {#text} at (129,3) size 4x18
+                    text run at (129,3) width 4: " "
+                  RenderBR {BR} at (133,17) size 0x0
+                  RenderTextControl {INPUT} at (2,25) size 125x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,3) size 119x13
+                      RenderBlock {DIV} at (0,0) size 8x11
+                      RenderBlock {DIV} at (106,0) size 13x11
+                  RenderText {#text} at (129,25) size 4x18
+                    text run at (129,25) width 4: " "
+                  RenderBR {BR} at (133,39) size 0x0
+                  RenderTextControl {INPUT} at (2,48) size 125x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 119x16
+                      RenderBlock {DIV} at (0,3) size 8x11
+                      RenderBlock {DIV} at (92,3) size 13x11
+                      RenderBlock {DIV} at (105,0) size 14x14
+                RenderBlock {DIV} at (1,139) size 156x78
+                  RenderTextControl {INPUT} at (2,2) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 142x19
+                      RenderBlock {DIV} at (0,3) size 10x13
+                      RenderBlock {DIV} at (110,3) size 16x13
+                      RenderBlock {DIV} at (126,0) size 16x16
+                  RenderText {#text} at (152,5) size 4x18
+                    text run at (152,5) width 4: " "
+                  RenderBR {BR} at (156,19) size 0x0
+                  RenderTextControl {INPUT} at (2,28) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,3) size 142x16
+                      RenderBlock {DIV} at (0,0) size 10x13
+                      RenderBlock {DIV} at (126,0) size 16x13
+                  RenderText {#text} at (152,30) size 4x18
+                    text run at (152,30) width 4: " "
+                  RenderBR {BR} at (156,44) size 0x0
+                  RenderTextControl {INPUT} at (2,54) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 142x19
+                      RenderBlock {DIV} at (0,3) size 10x13
+                      RenderBlock {DIV} at (110,3) size 16x13
+                      RenderBlock {DIV} at (126,0) size 16x16
+                RenderBlock {DIV} at (1,217) size 156x78
+                  RenderTextControl {INPUT} at (2,2) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 142x19
+                      RenderBlock {DIV} at (0,3) size 10x13
+                      RenderBlock {DIV} at (110,3) size 16x13
+                      RenderBlock {DIV} at (126,0) size 16x16
+                  RenderText {#text} at (152,5) size 4x18
+                    text run at (152,5) width 4: " "
+                  RenderBR {BR} at (156,19) size 0x0
+                  RenderTextControl {INPUT} at (2,28) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,3) size 142x16
+                      RenderBlock {DIV} at (0,0) size 10x13
+                      RenderBlock {DIV} at (126,0) size 16x13
+                  RenderText {#text} at (152,30) size 4x18
+                    text run at (152,30) width 4: " "
+                  RenderBR {BR} at (156,44) size 0x0
+                  RenderTextControl {INPUT} at (2,54) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 142x19
+                      RenderBlock {DIV} at (0,3) size 10x13
+                      RenderBlock {DIV} at (110,3) size 16x13
+                      RenderBlock {DIV} at (126,0) size 16x16
+                RenderBlock {DIV} at (1,295) size 156x78
+                  RenderTextControl {INPUT} at (2,2) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 142x19
+                      RenderBlock {DIV} at (0,3) size 10x13
+                      RenderBlock {DIV} at (110,3) size 16x13
+                      RenderBlock {DIV} at (126,0) size 16x16
+                  RenderText {#text} at (152,5) size 4x18
+                    text run at (152,5) width 4: " "
+                  RenderBR {BR} at (156,19) size 0x0
+                  RenderTextControl {INPUT} at (2,28) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,3) size 142x16
+                      RenderBlock {DIV} at (0,0) size 10x13
+                      RenderBlock {DIV} at (126,0) size 16x13
+                  RenderText {#text} at (152,30) size 4x18
+                    text run at (152,30) width 4: " "
+                  RenderBR {BR} at (156,44) size 0x0
+                  RenderTextControl {INPUT} at (2,54) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 142x19
+                      RenderBlock {DIV} at (0,3) size 10x13
+                      RenderBlock {DIV} at (110,3) size 16x13
+                      RenderBlock {DIV} at (126,0) size 16x16
+                RenderBlock {DIV} at (1,373) size 156x78
+                  RenderTextControl {INPUT} at (2,2) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 142x19
+                      RenderBlock {DIV} at (0,3) size 10x13
+                      RenderBlock {DIV} at (110,3) size 16x13
+                      RenderBlock {DIV} at (126,0) size 16x16
+                  RenderText {#text} at (152,5) size 4x18
+                    text run at (152,5) width 4: " "
+                  RenderBR {BR} at (156,19) size 0x0
+                  RenderTextControl {INPUT} at (2,28) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,3) size 142x16
+                      RenderBlock {DIV} at (0,0) size 10x13
+                      RenderBlock {DIV} at (126,0) size 16x13
+                  RenderText {#text} at (152,30) size 4x18
+                    text run at (152,30) width 4: " "
+                  RenderBR {BR} at (156,44) size 0x0
+                  RenderTextControl {INPUT} at (2,54) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 142x19
+                      RenderBlock {DIV} at (0,3) size 10x13
+                      RenderBlock {DIV} at (110,3) size 16x13
+                      RenderBlock {DIV} at (126,0) size 16x16
+              RenderTableCell {TD} at (299,71) size 158x314 [r=0 c=2 rs=1 cs=1]
+                RenderBlock {DIV} at (1,1) size 156x78
+                  RenderTextControl {INPUT} at (2,2) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 142x19
+                      RenderBlock {DIV} at (0,3) size 10x13
+                      RenderBlock {DIV} at (110,3) size 16x13
+                      RenderBlock {DIV} at (126,0) size 16x16
+                  RenderText {#text} at (152,5) size 4x18
+                    text run at (152,5) width 4: " "
+                  RenderBR {BR} at (156,19) size 0x0
+                  RenderTextControl {INPUT} at (2,28) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,3) size 142x16
+                      RenderBlock {DIV} at (0,0) size 10x13
+                      RenderBlock {DIV} at (126,0) size 16x13
+                  RenderText {#text} at (152,30) size 4x18
+                    text run at (152,30) width 4: " "
+                  RenderBR {BR} at (156,44) size 0x0
+                  RenderTextControl {INPUT} at (2,54) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 142x19
+                      RenderBlock {DIV} at (0,3) size 10x13
+                      RenderBlock {DIV} at (110,3) size 16x13
+                      RenderBlock {DIV} at (126,0) size 16x16
+                RenderBlock {DIV} at (1,79) size 156x78
+                  RenderTextControl {INPUT} at (2,2) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 142x19
+                      RenderBlock {DIV} at (0,3) size 10x13
+                      RenderBlock {DIV} at (110,3) size 16x13
+                      RenderBlock {DIV} at (126,0) size 16x16
+                  RenderText {#text} at (152,5) size 4x18
+                    text run at (152,5) width 4: " "
+                  RenderBR {BR} at (156,19) size 0x0
+                  RenderTextControl {INPUT} at (2,28) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,3) size 142x16
+                      RenderBlock {DIV} at (0,0) size 10x13
+                      RenderBlock {DIV} at (126,0) size 16x13
+                  RenderText {#text} at (152,30) size 4x18
+                    text run at (152,30) width 4: " "
+                  RenderBR {BR} at (156,44) size 0x0
+                  RenderTextControl {INPUT} at (2,54) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 142x19
+                      RenderBlock {DIV} at (0,3) size 10x13
+                      RenderBlock {DIV} at (110,3) size 16x13
+                      RenderBlock {DIV} at (126,0) size 16x16
+                RenderBlock {DIV} at (1,157) size 156x78
+                  RenderTextControl {INPUT} at (2,2) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 142x19
+                      RenderBlock {DIV} at (0,3) size 10x13
+                      RenderBlock {DIV} at (110,3) size 16x13
+                      RenderBlock {DIV} at (126,0) size 16x16
+                  RenderText {#text} at (152,5) size 4x18
+                    text run at (152,5) width 4: " "
+                  RenderBR {BR} at (156,19) size 0x0
+                  RenderTextControl {INPUT} at (2,28) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,3) size 142x16
+                      RenderBlock {DIV} at (0,0) size 10x13
+                      RenderBlock {DIV} at (126,0) size 16x13
+                  RenderText {#text} at (152,30) size 4x18
+                    text run at (152,30) width 4: " "
+                  RenderBR {BR} at (156,44) size 0x0
+                  RenderTextControl {INPUT} at (2,54) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 142x19
+                      RenderBlock {DIV} at (0,3) size 10x13
+                      RenderBlock {DIV} at (110,3) size 16x13
+                      RenderBlock {DIV} at (126,0) size 16x16
+                RenderBlock {DIV} at (1,235) size 156x78
+                  RenderTextControl {INPUT} at (2,2) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 142x19
+                      RenderBlock {DIV} at (0,3) size 10x13
+                      RenderBlock {DIV} at (110,3) size 16x13
+                      RenderBlock {DIV} at (126,0) size 16x16
+                  RenderText {#text} at (152,5) size 4x18
+                    text run at (152,5) width 4: " "
+                  RenderBR {BR} at (156,19) size 0x0
+                  RenderTextControl {INPUT} at (2,28) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,3) size 142x16
+                      RenderBlock {DIV} at (0,0) size 10x13
+                      RenderBlock {DIV} at (126,0) size 16x13
+                  RenderText {#text} at (152,30) size 4x18
+                    text run at (152,30) width 4: " "
+                  RenderBR {BR} at (156,44) size 0x0
+                  RenderTextControl {INPUT} at (2,54) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 142x19
+                      RenderBlock {DIV} at (0,3) size 10x13
+                      RenderBlock {DIV} at (110,3) size 16x13
+                      RenderBlock {DIV} at (126,0) size 16x16
+layer at (22,90) size 64x11
+  RenderBlock {DIV} at (8,2) size 64x11
+layer at (22,108) size 75x11 scrollWidth 173
+  RenderBlock {DIV} at (8,0) size 75x11
+    RenderText {#text} at (1,0) size 171x11
+      text run at (1,0) width 171: "012345678901234567890123456789"
+layer at (22,126) size 64x11 scrollWidth 173
+  RenderBlock {DIV} at (8,2) size 64x11
+    RenderText {#text} at (1,0) size 171x11
+      text run at (1,0) width 171: "012345678901234567890123456789"
+layer at (22,144) size 64x11
+  RenderBlock {DIV} at (8,2) size 64x11
+layer at (22,162) size 75x11 scrollWidth 173
+  RenderBlock {DIV} at (8,0) size 75x11
+    RenderText {#text} at (1,0) size 171x11
+      text run at (1,0) width 171: "012345678901234567890123456789"
+layer at (22,180) size 64x11 scrollWidth 173
+  RenderBlock {DIV} at (8,2) size 64x11
+    RenderText {#text} at (1,0) size 171x11
+      text run at (1,0) width 171: "012345678901234567890123456789"
+layer at (22,198) size 64x11
+  RenderBlock {DIV} at (8,2) size 64x11
+layer at (22,216) size 75x11 scrollWidth 173
+  RenderBlock {DIV} at (8,0) size 75x11
+    RenderText {#text} at (1,0) size 171x11
+      text run at (1,0) width 171: "012345678901234567890123456789"
+layer at (22,234) size 64x11 scrollWidth 173
+  RenderBlock {DIV} at (8,2) size 64x11
+    RenderText {#text} at (1,0) size 171x11
+      text run at (1,0) width 171: "012345678901234567890123456789"
+layer at (24,253) size 84x13
+  RenderBlock {DIV} at (8,3) size 84x13
+layer at (24,275) size 98x13 scrollWidth 211
+  RenderBlock {DIV} at (8,0) size 98x13
+    RenderText {#text} at (1,0) size 209x13
+      text run at (1,0) width 209: "012345678901234567890123456789"
+layer at (24,299) size 84x13 scrollWidth 211
+  RenderBlock {DIV} at (8,3) size 84x13
+    RenderText {#text} at (1,0) size 209x13
+      text run at (1,0) width 209: "012345678901234567890123456789"
+layer at (24,322) size 84x13
+  RenderBlock {DIV} at (8,3) size 84x13
+layer at (24,344) size 98x13 scrollWidth 211
+  RenderBlock {DIV} at (8,0) size 98x13
+    RenderText {#text} at (1,0) size 209x13
+      text run at (1,0) width 209: "012345678901234567890123456789"
+layer at (24,368) size 84x13 scrollWidth 211
+  RenderBlock {DIV} at (8,3) size 84x13
+    RenderText {#text} at (1,0) size 209x13
+      text run at (1,0) width 209: "012345678901234567890123456789"
+layer at (24,391) size 84x13
+  RenderBlock {DIV} at (8,3) size 84x13
+layer at (24,413) size 98x13 scrollWidth 211
+  RenderBlock {DIV} at (8,0) size 98x13
+    RenderText {#text} at (1,0) size 209x13
+      text run at (1,0) width 209: "012345678901234567890123456789"
+layer at (24,437) size 84x13 scrollWidth 211
+  RenderBlock {DIV} at (8,3) size 84x13
+    RenderText {#text} at (1,0) size 209x13
+      text run at (1,0) width 209: "012345678901234567890123456789"
+layer at (161,51) size 84x13
+  RenderBlock {DIV} at (8,3) size 84x13
+layer at (161,73) size 98x13 scrollWidth 211
+  RenderBlock {DIV} at (8,0) size 98x13
+    RenderText {#text} at (1,0) size 209x13
+      text run at (1,0) width 209: "012345678901234567890123456789"
+layer at (161,97) size 84x13 scrollWidth 211
+  RenderBlock {DIV} at (8,3) size 84x13
+    RenderText {#text} at (1,0) size 209x13
+      text run at (1,0) width 209: "012345678901234567890123456789"
+layer at (161,120) size 84x13
+  RenderBlock {DIV} at (8,3) size 84x13
+layer at (161,142) size 98x13 scrollWidth 211
+  RenderBlock {DIV} at (8,0) size 98x13
+    RenderText {#text} at (1,0) size 209x13
+      text run at (1,0) width 209: "012345678901234567890123456789"
+layer at (161,166) size 84x13 scrollWidth 211
+  RenderBlock {DIV} at (8,3) size 84x13
+    RenderText {#text} at (1,0) size 209x13
+      text run at (1,0) width 209: "012345678901234567890123456789"
+layer at (163,189) size 100x16
+  RenderBlock {DIV} at (10,3) size 100x16
+layer at (163,214) size 116x16 scrollWidth 249
+  RenderBlock {DIV} at (10,0) size 116x16
+    RenderText {#text} at (1,0) size 247x16
+      text run at (1,0) width 247: "012345678901234567890123456789"
+layer at (163,241) size 100x16 scrollWidth 249
+  RenderBlock {DIV} at (10,3) size 100x16
+    RenderText {#text} at (1,0) size 247x16
+      text run at (1,0) width 247: "012345678901234567890123456789"
+layer at (163,267) size 100x16
+  RenderBlock {DIV} at (10,3) size 100x16
+layer at (163,292) size 116x16 scrollWidth 249
+  RenderBlock {DIV} at (10,0) size 116x16
+    RenderText {#text} at (1,0) size 247x16
+      text run at (1,0) width 247: "012345678901234567890123456789"
+layer at (163,319) size 100x16 scrollWidth 249
+  RenderBlock {DIV} at (10,3) size 100x16
+    RenderText {#text} at (1,0) size 247x16
+      text run at (1,0) width 247: "012345678901234567890123456789"
+layer at (163,345) size 100x16
+  RenderBlock {DIV} at (10,3) size 100x16
+layer at (163,370) size 116x16 scrollWidth 249
+  RenderBlock {DIV} at (10,0) size 116x16
+    RenderText {#text} at (1,0) size 247x16
+      text run at (1,0) width 247: "012345678901234567890123456789"
+layer at (163,397) size 100x16 scrollWidth 249
+  RenderBlock {DIV} at (10,3) size 100x16
+    RenderText {#text} at (1,0) size 247x16
+      text run at (1,0) width 247: "012345678901234567890123456789"
+layer at (163,423) size 100x16
+  RenderBlock {DIV} at (10,3) size 100x16
+layer at (163,448) size 116x16 scrollWidth 249
+  RenderBlock {DIV} at (10,0) size 116x16
+    RenderText {#text} at (1,0) size 247x16
+      text run at (1,0) width 247: "012345678901234567890123456789"
+layer at (163,475) size 100x16 scrollWidth 249
+  RenderBlock {DIV} at (10,3) size 100x16
+    RenderText {#text} at (1,0) size 247x16
+      text run at (1,0) width 247: "012345678901234567890123456789"
+layer at (323,120) size 100x16
+  RenderBlock {DIV} at (10,3) size 100x16
+layer at (323,145) size 116x16 scrollWidth 249
+  RenderBlock {DIV} at (10,0) size 116x16
+    RenderText {#text} at (1,0) size 247x16
+      text run at (1,0) width 247: "012345678901234567890123456789"
+layer at (323,172) size 100x16 scrollWidth 249
+  RenderBlock {DIV} at (10,3) size 100x16
+    RenderText {#text} at (1,0) size 247x16
+      text run at (1,0) width 247: "012345678901234567890123456789"
+layer at (323,198) size 100x16
+  RenderBlock {DIV} at (10,3) size 100x16
+layer at (323,223) size 116x16 scrollWidth 249
+  RenderBlock {DIV} at (10,0) size 116x16
+    RenderText {#text} at (1,0) size 247x16
+      text run at (1,0) width 247: "012345678901234567890123456789"
+layer at (323,250) size 100x16 scrollWidth 249
+  RenderBlock {DIV} at (10,3) size 100x16
+    RenderText {#text} at (1,0) size 247x16
+      text run at (1,0) width 247: "012345678901234567890123456789"
+layer at (323,276) size 100x16
+  RenderBlock {DIV} at (10,3) size 100x16
+layer at (323,301) size 116x16 scrollWidth 249
+  RenderBlock {DIV} at (10,0) size 116x16
+    RenderText {#text} at (1,0) size 247x16
+      text run at (1,0) width 247: "012345678901234567890123456789"
+layer at (323,328) size 100x16 scrollWidth 249
+  RenderBlock {DIV} at (10,3) size 100x16
+    RenderText {#text} at (1,0) size 247x16
+      text run at (1,0) width 247: "012345678901234567890123456789"
+layer at (323,354) size 100x16
+  RenderBlock {DIV} at (10,3) size 100x16
+layer at (323,379) size 116x16 scrollWidth 249
+  RenderBlock {DIV} at (10,0) size 116x16
+    RenderText {#text} at (1,0) size 247x16
+      text run at (1,0) width 247: "012345678901234567890123456789"
+layer at (323,406) size 100x16 scrollWidth 249
+  RenderBlock {DIV} at (10,3) size 100x16
+    RenderText {#text} at (1,0) size 247x16
+      text run at (1,0) width 247: "012345678901234567890123456789"
diff --git a/LayoutTests/fast/forms/input-appearance-searchandspeech.html b/LayoutTests/fast/forms/input-appearance-searchandspeech.html
new file mode 100644 (file)
index 0000000..befe9a1
--- /dev/null
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
+<html>
+<head>
+<link rel="stylesheet" href="../../../../fast/js/resources/js-test-style.css">
+<style>
+</style>
+</head>
+<body>
+<p>Test appearances of input-speech-button in &lt;input type='search'&gt;.</p>
+<div id="console"></div>
+
+<script>
+var parent = document.createElement('div');
+document.body.appendChild(parent);
+parent.innerHTML = '<table><tr><td id=p1><td id=p2><td id=p3></tr></table>';
+for (var size = 8; size < 24; size++) {
+    var div = document.createElement('div');
+    document.getElementById('p' + (Math.floor((size - 8) / 6) + 1)).appendChild(div);
+    div.innerHTML = '<input type="search" style="font-size:' + size + 'px" speech> <br>'
+        + '<input type="search" style="font-size:' + size + 'px" value="012345678901234567890123456789"> <br>'
+        + '<input type="search" style="font-size:' + size + 'px" value="012345678901234567890123456789" speech>';
+}
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/input-appearance-speechbutton-expected.txt b/LayoutTests/fast/forms/input-appearance-speechbutton-expected.txt
new file mode 100644 (file)
index 0000000..5356e3a
--- /dev/null
@@ -0,0 +1,271 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x600
+  RenderBlock {HTML} at (0,0) size 800x600
+    RenderBody {BODY} at (8,8) size 784x584
+      RenderBlock {P} at (0,0) size 784x18
+        RenderText {#text} at (0,0) size 258x18
+          text run at (0,0) width 258: "Test appearances of input-speech-button."
+      RenderBlock {DIV} at (0,34) size 784x0
+      RenderBlock {DIV} at (0,34) size 784x539
+        RenderTable {TABLE} at (0,0) size 439x539
+          RenderTableSection {TBODY} at (0,0) size 439x539
+            RenderTableRow {TR} at (0,2) size 439x535
+              RenderTableCell {TD} at (2,85) size 180x369 [r=0 c=0 rs=1 cs=1]
+                RenderBlock {DIV} at (1,1) size 178x35
+                  RenderTextControl {INPUT} at (0,3) size 100x16 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                  RenderText {#text} at (100,0) size 4x18
+                    text run at (100,0) width 4: " "
+                  RenderBR {BR} at (104,14) size 0x0
+                  RenderTextControl {INPUT} at (0,19) size 100x16 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,2) size 94x12
+                      RenderBlock {DIV} at (84,0) size 10x10
+                RenderBlock {DIV} at (1,36) size 178x36
+                  RenderTextControl {INPUT} at (0,2) size 102x17 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                  RenderText {#text} at (102,0) size 4x18
+                    text run at (102,0) width 4: " "
+                  RenderBR {BR} at (106,14) size 0x0
+                  RenderTextControl {INPUT} at (0,19) size 102x17 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,2) size 96x13
+                      RenderBlock {DIV} at (85,0) size 11x11
+                RenderBlock {DIV} at (1,72) size 178x37
+                  RenderTextControl {INPUT} at (0,1) size 104x18 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                  RenderText {#text} at (104,0) size 4x18
+                    text run at (104,0) width 4: " "
+                  RenderBR {BR} at (108,14) size 0x0
+                  RenderTextControl {INPUT} at (0,19) size 104x18 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,2) size 98x14
+                      RenderBlock {DIV} at (86,0) size 12x12
+                RenderBlock {DIV} at (1,109) size 178x47
+                  RenderTextControl {INPUT} at (2,2) size 125x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                  RenderText {#text} at (129,2) size 4x18
+                    text run at (129,2) width 4: " "
+                  RenderBR {BR} at (133,16) size 0x0
+                  RenderTextControl {INPUT} at (2,25) size 125x20 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,2) size 119x16
+                      RenderBlock {DIV} at (105,0) size 14x14
+                RenderBlock {DIV} at (1,156) size 178x50
+                  RenderTextControl {INPUT} at (2,2) size 127x21 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                  RenderText {#text} at (131,3) size 4x18
+                    text run at (131,3) width 4: " "
+                  RenderBR {BR} at (135,17) size 0x0
+                  RenderTextControl {INPUT} at (2,27) size 127x21 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 121x18
+                      RenderBlock {DIV} at (106,0) size 15x15
+                RenderBlock {DIV} at (1,206) size 178x52
+                  RenderTextControl {INPUT} at (2,2) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                  RenderText {#text} at (152,4) size 4x18
+                    text run at (152,4) width 4: " "
+                  RenderBR {BR} at (156,18) size 0x0
+                  RenderTextControl {INPUT} at (2,28) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 142x19
+                      RenderBlock {DIV} at (126,0) size 16x16
+                RenderBlock {DIV} at (1,258) size 178x54
+                  RenderTextControl {INPUT} at (2,2) size 150x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                  RenderText {#text} at (154,5) size 4x18
+                    text run at (154,5) width 4: " "
+                  RenderBR {BR} at (158,19) size 0x0
+                  RenderTextControl {INPUT} at (2,29) size 150x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 144x20
+                      RenderBlock {DIV} at (127,0) size 17x17
+                RenderBlock {DIV} at (1,312) size 178x56
+                  RenderTextControl {INPUT} at (2,2) size 170x24 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                  RenderText {#text} at (174,6) size 4x18
+                    text run at (174,6) width 4: " "
+                  RenderBR {BR} at (178,20) size 0x0
+                  RenderTextControl {INPUT} at (2,30) size 170x24 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 164x21
+                      RenderBlock {DIV} at (146,0) size 18x18
+              RenderTableCell {TD} at (184,2) size 253x535 [r=0 c=1 rs=1 cs=1]
+                RenderBlock {DIV} at (1,1) size 251x58
+                  RenderTextControl {INPUT} at (2,2) size 172x24 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                  RenderText {#text} at (176,6) size 4x18
+                    text run at (176,6) width 4: " "
+                  RenderBR {BR} at (180,20) size 0x0
+                  RenderTextControl {INPUT} at (2,30) size 172x26 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 166x23
+                      RenderBlock {DIV} at (146,0) size 20x20
+                RenderBlock {DIV} at (1,59) size 251x61
+                  RenderTextControl {INPUT} at (2,2) size 174x26 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                  RenderText {#text} at (178,7) size 4x18
+                    text run at (178,7) width 4: " "
+                  RenderBR {BR} at (182,21) size 0x0
+                  RenderTextControl {INPUT} at (2,32) size 174x27 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 168x25
+                      RenderBlock {DIV} at (147,0) size 21x21
+                RenderBlock {DIV} at (1,120) size 251x63
+                  RenderTextControl {INPUT} at (2,2) size 195x27 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                  RenderText {#text} at (199,8) size 4x18
+                    text run at (199,8) width 4: " "
+                  RenderBR {BR} at (203,22) size 0x0
+                  RenderTextControl {INPUT} at (2,33) size 195x28 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 189x26
+                      RenderBlock {DIV} at (167,0) size 22x22
+                RenderBlock {DIV} at (1,183) size 251x65
+                  RenderTextControl {INPUT} at (2,2) size 197x28 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                  RenderText {#text} at (201,9) size 4x18
+                    text run at (201,9) width 4: " "
+                  RenderBR {BR} at (205,23) size 0x0
+                  RenderTextControl {INPUT} at (2,34) size 197x29 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 191x27
+                      RenderBlock {DIV} at (168,0) size 23x23
+                RenderBlock {DIV} at (1,248) size 251x68
+                  RenderTextControl {INPUT} at (2,2) size 218x29 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                  RenderText {#text} at (222,10) size 4x18
+                    text run at (222,10) width 4: " "
+                  RenderBR {BR} at (226,24) size 0x0
+                  RenderTextControl {INPUT} at (2,35) size 218x31 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 212x29
+                      RenderBlock {DIV} at (187,0) size 25x25
+                RenderBlock {DIV} at (1,316) size 251x70
+                  RenderTextControl {INPUT} at (2,2) size 220x30 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                  RenderText {#text} at (224,11) size 4x18
+                    text run at (224,11) width 4: " "
+                  RenderBR {BR} at (228,25) size 0x0
+                  RenderTextControl {INPUT} at (2,36) size 220x32 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,1) size 214x30
+                      RenderBlock {DIV} at (188,0) size 26x26
+                RenderBlock {DIV} at (1,386) size 251x73
+                  RenderTextControl {INPUT} at (2,2) size 241x32 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                  RenderText {#text} at (245,12) size 4x18
+                    text run at (245,12) width 4: " "
+                  RenderBR {BR} at (249,26) size 0x0
+                  RenderTextControl {INPUT} at (2,38) size 241x33 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,0) size 235x32
+                      RenderBlock {DIV} at (208,0) size 27x27
+                RenderBlock {DIV} at (1,459) size 251x75
+                  RenderTextControl {INPUT} at (2,2) size 243x33 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                  RenderText {#text} at (247,13) size 4x18
+                    text run at (247,13) width 4: " "
+                  RenderBR {BR} at (251,27) size 0x0
+                  RenderTextControl {INPUT} at (2,39) size 243x34 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (3,0) size 237x33
+                      RenderBlock {DIV} at (209,0) size 28x28
+layer at (14,134) size 94x10 scrollWidth 177
+  RenderBlock {DIV} at (3,3) size 94x10
+    RenderText {#text} at (1,0) size 175x10
+      text run at (1,0) width 175: "A quick brown fox jumps over the lazy dog"
+layer at (14,151) size 84x10 scrollWidth 177
+  RenderBlock {DIV} at (0,2) size 84x10
+    RenderText {#text} at (1,0) size 175x10
+      text run at (1,0) width 175: "A quick brown fox jumps over the lazy dog"
+layer at (14,168) size 96x11 scrollWidth 195
+  RenderBlock {DIV} at (3,3) size 96x11
+    RenderText {#text} at (1,0) size 193x11
+      text run at (1,0) width 193: "A quick brown fox jumps over the lazy dog"
+layer at (14,186) size 85x11 scrollWidth 195
+  RenderBlock {DIV} at (0,2) size 85x11
+    RenderText {#text} at (1,0) size 193x11
+      text run at (1,0) width 193: "A quick brown fox jumps over the lazy dog"
+layer at (14,203) size 98x12 scrollWidth 213
+  RenderBlock {DIV} at (3,3) size 98x12
+    RenderText {#text} at (1,0) size 211x12
+      text run at (1,0) width 211: "A quick brown fox jumps over the lazy dog"
+layer at (14,222) size 86x12 scrollWidth 213
+  RenderBlock {DIV} at (0,2) size 86x12
+    RenderText {#text} at (1,0) size 211x12
+      text run at (1,0) width 211: "A quick brown fox jumps over the lazy dog"
+layer at (16,241) size 119x13 scrollWidth 233
+  RenderBlock {DIV} at (3,3) size 119x13
+    RenderText {#text} at (1,0) size 231x13
+      text run at (1,0) width 231: "A quick brown fox jumps over the lazy dog"
+layer at (16,266) size 105x13 scrollWidth 233
+  RenderBlock {DIV} at (0,3) size 105x13
+    RenderText {#text} at (1,0) size 231x13
+      text run at (1,0) width 231: "A quick brown fox jumps over the lazy dog"
+layer at (16,288) size 121x15 scrollWidth 260
+  RenderBlock {DIV} at (3,3) size 121x15
+    RenderText {#text} at (1,0) size 258x15
+      text run at (1,0) width 258: "A quick brown fox jumps over the lazy dog"
+layer at (16,314) size 106x15 scrollWidth 260
+  RenderBlock {DIV} at (0,3) size 106x15
+    RenderText {#text} at (1,0) size 258x15
+      text run at (1,0) width 258: "A quick brown fox jumps over the lazy dog"
+layer at (16,338) size 142x16 scrollWidth 278
+  RenderBlock {DIV} at (3,3) size 142x16
+    RenderText {#text} at (1,0) size 276x16
+      text run at (1,0) width 276: "A quick brown fox jumps over the lazy dog"
+layer at (16,365) size 126x16 scrollWidth 278
+  RenderBlock {DIV} at (0,3) size 126x16
+    RenderText {#text} at (1,0) size 276x16
+      text run at (1,0) width 276: "A quick brown fox jumps over the lazy dog"
+layer at (16,390) size 144x17 scrollWidth 296
+  RenderBlock {DIV} at (3,3) size 144x17
+    RenderText {#text} at (1,0) size 294x17
+      text run at (1,0) width 294: "A quick brown fox jumps over the lazy dog"
+layer at (16,418) size 127x17 scrollWidth 296
+  RenderBlock {DIV} at (0,3) size 127x17
+    RenderText {#text} at (1,0) size 294x17
+      text run at (1,0) width 294: "A quick brown fox jumps over the lazy dog"
+layer at (16,444) size 164x18 scrollWidth 323
+  RenderBlock {DIV} at (3,3) size 164x18
+    RenderText {#text} at (1,0) size 321x18
+      text run at (1,0) width 321: "A quick brown fox jumps over the lazy dog"
+layer at (16,473) size 146x18 scrollWidth 323
+  RenderBlock {DIV} at (0,3) size 146x18
+    RenderText {#text} at (1,0) size 321x18
+      text run at (1,0) width 321: "A quick brown fox jumps over the lazy dog"
+layer at (198,50) size 166x18 scrollWidth 340
+  RenderBlock {DIV} at (3,3) size 166x18
+    RenderText {#text} at (1,0) size 338x18
+      text run at (1,0) width 338: "A quick brown fox jumps over the lazy dog"
+layer at (198,81) size 146x18 scrollWidth 340
+  RenderBlock {DIV} at (0,5) size 146x18
+    RenderText {#text} at (1,0) size 338x18
+      text run at (1,0) width 338: "A quick brown fox jumps over the lazy dog"
+layer at (198,108) size 168x20 scrollWidth 358
+  RenderBlock {DIV} at (3,3) size 168x20
+    RenderText {#text} at (1,0) size 356x20
+      text run at (1,0) width 356: "A quick brown fox jumps over the lazy dog"
+layer at (198,141) size 147x20 scrollWidth 358
+  RenderBlock {DIV} at (0,5) size 147x20
+    RenderText {#text} at (1,0) size 356x20
+      text run at (1,0) width 356: "A quick brown fox jumps over the lazy dog"
+layer at (198,169) size 189x21 scrollWidth 384
+  RenderBlock {DIV} at (3,3) size 189x21
+    RenderText {#text} at (1,0) size 382x21
+      text run at (1,0) width 382: "A quick brown fox jumps over the lazy dog"
+layer at (198,203) size 167x21 scrollWidth 384
+  RenderBlock {DIV} at (0,5) size 167x21
+    RenderText {#text} at (1,0) size 382x21
+      text run at (1,0) width 382: "A quick brown fox jumps over the lazy dog"
+layer at (198,232) size 191x22 scrollWidth 404
+  RenderBlock {DIV} at (3,3) size 191x22
+    RenderText {#text} at (1,0) size 402x22
+      text run at (1,0) width 402: "A quick brown fox jumps over the lazy dog"
+layer at (198,267) size 168x22 scrollWidth 404
+  RenderBlock {DIV} at (0,5) size 168x22
+    RenderText {#text} at (1,0) size 402x22
+      text run at (1,0) width 402: "A quick brown fox jumps over the lazy dog"
+layer at (198,297) size 212x23 scrollWidth 421
+  RenderBlock {DIV} at (3,3) size 212x23
+    RenderText {#text} at (1,0) size 419x23
+      text run at (1,0) width 419: "A quick brown fox jumps over the lazy dog"
+layer at (198,334) size 187x23 scrollWidth 421
+  RenderBlock {DIV} at (0,6) size 187x23
+    RenderText {#text} at (1,0) size 419x23
+      text run at (1,0) width 419: "A quick brown fox jumps over the lazy dog"
+layer at (198,365) size 214x24 scrollWidth 449
+  RenderBlock {DIV} at (3,3) size 214x24
+    RenderText {#text} at (1,0) size 447x24
+      text run at (1,0) width 447: "A quick brown fox jumps over the lazy dog"
+layer at (198,403) size 188x24 scrollWidth 449
+  RenderBlock {DIV} at (0,6) size 188x24
+    RenderText {#text} at (1,0) size 447x24
+      text run at (1,0) width 447: "A quick brown fox jumps over the lazy dog"
+layer at (198,435) size 235x26 scrollWidth 468
+  RenderBlock {DIV} at (3,3) size 235x26
+    RenderText {#text} at (1,0) size 466x26
+      text run at (1,0) width 466: "A quick brown fox jumps over the lazy dog"
+layer at (198,474) size 208x26 scrollWidth 468
+  RenderBlock {DIV} at (0,6) size 208x26
+    RenderText {#text} at (1,0) size 466x26
+      text run at (1,0) width 466: "A quick brown fox jumps over the lazy dog"
+layer at (198,508) size 237x27 scrollWidth 485
+  RenderBlock {DIV} at (3,3) size 237x27
+    RenderText {#text} at (1,0) size 483x27
+      text run at (1,0) width 483: "A quick brown fox jumps over the lazy dog"
+layer at (198,548) size 209x27 scrollWidth 485
+  RenderBlock {DIV} at (0,6) size 209x27
+    RenderText {#text} at (1,0) size 483x27
+      text run at (1,0) width 483: "A quick brown fox jumps over the lazy dog"
diff --git a/LayoutTests/fast/forms/input-appearance-speechbutton.html b/LayoutTests/fast/forms/input-appearance-speechbutton.html
new file mode 100644 (file)
index 0000000..4eb8f28
--- /dev/null
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
+<html>
+<head>
+<link rel="stylesheet" href="../../../../fast/js/resources/js-test-style.css">
+<style>
+</style>
+</head>
+<body>
+<p>Test appearances of input-speech-button.</p>
+<div id="console"></div>
+
+<script>
+var parent = document.createElement('div');
+document.body.appendChild(parent);
+parent.innerHTML = '<table><tr><td id=p1><td id=p2></tr></table>';
+for (var size = 8; size < 24; size++) {
+    var div = document.createElement('div');
+    document.getElementById(size < (24 + 8) / 2 ? 'p1' : 'p2').appendChild(div);
+    div.innerHTML = '<input style="font-size:' + size + 'px" value="A quick brown fox jumps over the lazy dog"> <br>'
+        + '<input style="font-size:' + size + 'px" value="A quick brown fox jumps over the lazy dog" speech>';
+}
+</script>
+</body>
+</html>
index cfb1c9b..0773b5e 100644 (file)
@@ -2913,3 +2913,8 @@ BUGWK41311 WIN LINUX : fast/borders/borderRadiusDouble06.html = IMAGE
 BUGWK41311 WIN LINUX : fast/borders/borderRadiusDouble07.html = IMAGE
 BUGWK41311 WIN LINUX : fast/borders/borderRadiusDouble08.html = IMAGE
 BUGWK41311 WIN LINUX : fast/borders/borderRadiusDouble09.html = IMAGE
+
+# Speech input is not yet enabled.
+BUG44844: fast/forms/input-appearance-numberandspeech.html = IMAGE+TEXT
+BUG44844: fast/forms/input-appearance-searchandspeech.html = IMAGE+TEXT
+BUG44844: fast/forms/input-appearance-speechbutton.html = IMAGE+TEXT
index 71e44b3..f5b1ee5 100644 (file)
@@ -5823,3 +5823,8 @@ fast/js/sputnik/Conformance/10_Execution_Contexts/10.2_Entering_An_Execution_Con
 # pastes a space instead of a tab
 # https://bugs.webkit.org/show_bug.cgi?id=38437
 editing/pasteboard/5761530-1.html
+
+# Speech input is not yet enabled.
+fast/forms/input-appearance-numberandspeech.html
+fast/forms/input-appearance-searchandspeech.html
+fast/forms/input-appearance-speechbutton.html
index 185b0f1..58fd461 100644 (file)
@@ -302,3 +302,9 @@ http/tests/multipart/policy-ignore-crash.php
 # pastes a space instead of a tab
 # https://bugs.webkit.org/show_bug.cgi?id=38437
 editing/pasteboard/5761530-1.html
+
+# Speech input is not yet enabled.
+fast/forms/input-appearance-numberandspeech.html
+fast/forms/input-appearance-searchandspeech.html
+fast/forms/input-appearance-speechbutton.html
+
diff --git a/LayoutTests/platform/mac/fast/forms/input-appearance-numberandspeech-expected.checksum b/LayoutTests/platform/mac/fast/forms/input-appearance-numberandspeech-expected.checksum
new file mode 100644 (file)
index 0000000..9b69a27
--- /dev/null
@@ -0,0 +1 @@
+8b51398a672cdbc2c2f84be20645eb9e
\ No newline at end of file
diff --git a/LayoutTests/platform/mac/fast/forms/input-appearance-numberandspeech-expected.png b/LayoutTests/platform/mac/fast/forms/input-appearance-numberandspeech-expected.png
new file mode 100644 (file)
index 0000000..ccdeaa4
Binary files /dev/null and b/LayoutTests/platform/mac/fast/forms/input-appearance-numberandspeech-expected.png differ
diff --git a/LayoutTests/platform/mac/fast/forms/input-appearance-searchandspeech-expected.checksum b/LayoutTests/platform/mac/fast/forms/input-appearance-searchandspeech-expected.checksum
new file mode 100644 (file)
index 0000000..7062cc4
--- /dev/null
@@ -0,0 +1 @@
+0b7d80cff4fd10d335df6bf97ae7e0e7
\ No newline at end of file
diff --git a/LayoutTests/platform/mac/fast/forms/input-appearance-searchandspeech-expected.png b/LayoutTests/platform/mac/fast/forms/input-appearance-searchandspeech-expected.png
new file mode 100644 (file)
index 0000000..5779789
Binary files /dev/null and b/LayoutTests/platform/mac/fast/forms/input-appearance-searchandspeech-expected.png differ
diff --git a/LayoutTests/platform/mac/fast/forms/input-appearance-speechbutton-expected.checksum b/LayoutTests/platform/mac/fast/forms/input-appearance-speechbutton-expected.checksum
new file mode 100644 (file)
index 0000000..2f0ed8c
--- /dev/null
@@ -0,0 +1 @@
+994f79479f0e0c270d0ec326cf5c8a35
\ No newline at end of file
diff --git a/LayoutTests/platform/mac/fast/forms/input-appearance-speechbutton-expected.png b/LayoutTests/platform/mac/fast/forms/input-appearance-speechbutton-expected.png
new file mode 100644 (file)
index 0000000..70795c9
Binary files /dev/null and b/LayoutTests/platform/mac/fast/forms/input-appearance-speechbutton-expected.png differ
index c329dee..8f7ce6e 100644 (file)
@@ -5430,3 +5430,8 @@ inspector/debugger-proto-property.html
 # [Qt] fast/text/bidi-explicit-embedding-past-end.html fails
 # https://bugs.webkit.org/show_bug.cgi?id=41241
 fast/text/bidi-explicit-embedding-past-end.html
+
+# Speech input is not yet enabled.
+fast/forms/input-appearance-numberandspeech.html
+fast/forms/input-appearance-searchandspeech.html
+fast/forms/input-appearance-speechbutton.html
index 85ec2eb..5dcfa73 100644 (file)
@@ -936,4 +936,8 @@ fast/js/sputnik/Conformance/10_Execution_Contexts/10.2_Entering_An_Execution_Con
 # LayoutTestController::isPageBoxVisible, pageAreaRectInPixels, and preferredPageSizeInPixels are not implemented yet for WIN.
 printing/page-format-data.html
 
+# Speech input is not yet enabled.
+fast/forms/input-appearance-numberandspeech.html
+fast/forms/input-appearance-searchandspeech.html
+fast/forms/input-appearance-speechbutton.html
 
index 00b003e..cbf3c4c 100644 (file)
@@ -1,3 +1,47 @@
+2010-07-01  Satish Sampath  <satish@chromium.org>
+
+        Reviewed by Kent Tamura.
+
+        Rendering the speech button in input elements.
+        https://bugs.webkit.org/show_bug.cgi?id=40984
+
+        The button currently has only one state and rendered as an image on all platforms. Subsequent
+        patches will add user input handling and more states + rendering code to the button. The
+        button's appearance can be customized by individual ports in their RenderTheme implementation
+        if required.
+
+        Tests: platform/mac/fast/forms/input-appearance-numberandspeech.html
+               platform/mac/fast/forms/input-appearance-searchandspeech.html
+               platform/mac/fast/forms/input-appearance-speechbutton.html
+
+        * GNUmakefile.am:
+        * Resources/inputSpeech.png: Added.
+        * Resources/inputSpeech.tiff: Added. Used by the Mac implementation.
+        * WebCore.gypi:
+        * WebCore.pro:
+        * WebCore.qrc:
+        * WebCore.xcodeproj/project.pbxproj:
+        * platform/graphics/qt/ImageQt.cpp:
+        (loadResourcePixmap): Load the speech button images for Qt port.
+        * rendering/RenderInputSpeech.cpp: Added.
+        (WebCore::RenderInputSpeech::adjustInputFieldSpeechButtonStyle): Sets the button's dimensions.
+        (WebCore::RenderInputSpeech::paintInputFieldSpeechButton):
+        * rendering/RenderInputSpeech.h: Added.
+        * rendering/RenderTextControlSingleLine.cpp:
+        (WebCore::RenderTextControlSingleLine::layout):
+        (WebCore::RenderTextControlSingleLine::forwardEvent):
+        (WebCore::RenderTextControlSingleLine::createSubtreeIfNeeded): Create the speech button.
+        (WebCore::RenderTextControlSingleLine::createInnerBlockStyle):
+        * rendering/RenderTheme.cpp:
+        (WebCore::RenderTheme::adjustStyle):
+        (WebCore::RenderTheme::paint):
+        (WebCore::RenderTheme::adjustInputFieldSpeechButtonStyle):
+        (WebCore::RenderTheme::paintInputFieldSpeechButton):
+        * rendering/RenderTheme.h:
+        * rendering/RenderThemeMac.mm:
+        (WebCore::RenderThemeMac::paintSearchFieldCancelButton): Get cancel button to render to the left of
+        speech button when enabled.
+
 2010-07-01  Mario Sanchez Prada  <msanchez@igalia.com>
 
         Reviewed by Xan Lopez.
index 6980491..24d1b88 100644 (file)
@@ -4289,7 +4289,8 @@ dist_webresources_DATA = \
        $(WebCore)/Resources/urlIcon.png \
        $(WebCore)/Resources/missingImage.png \
        $(WebCore)/Resources/panIcon.png \
-       $(WebCore)/Resources/deleteButton.png
+       $(WebCore)/Resources/deleteButton.png \
+       $(WebCore)/Resources/inputSpeech.png
 
 # Clean rules for WebCore
 
diff --git a/WebCore/Resources/inputSpeech.png b/WebCore/Resources/inputSpeech.png
new file mode 100644 (file)
index 0000000..8a5c469
Binary files /dev/null and b/WebCore/Resources/inputSpeech.png differ
diff --git a/WebCore/Resources/inputSpeech.tiff b/WebCore/Resources/inputSpeech.tiff
new file mode 100644 (file)
index 0000000..11ba129
Binary files /dev/null and b/WebCore/Resources/inputSpeech.tiff differ
index 2f8bd12..f72217b 100644 (file)
             'rendering/RenderIndicator.h',
             'rendering/RenderInline.cpp',
             'rendering/RenderInline.h',
+            'rendering/RenderInputSpeech.cpp',
+            'rendering/RenderInputSpeech.h',
             'rendering/RenderLayer.cpp',
             'rendering/RenderLayer.h',
             'rendering/RenderLayerBacking.cpp',
index 167d740..2421d76 100644 (file)
@@ -1771,6 +1771,7 @@ HEADERS += \
     rendering/RenderImage.h \
     rendering/RenderIndicator.h \
     rendering/RenderInline.h \
+    rendering/RenderInputSpeech.h \
     rendering/RenderLayer.h \
     rendering/RenderLineBoxList.h \
     rendering/RenderListBox.h \
@@ -2515,6 +2516,11 @@ contains(DEFINES, ENABLE_SHARED_WORKERS=1) {
         workers/SharedWorkerThread.cpp
 }
 
+contains(DEFINES, ENABLE_INPUT_SPEECH=1) {
+    SOURCES += \
+        rendering/RenderInputSpeech.cpp
+}
+
 contains(DEFINES, ENABLE_VIDEO=1) {
     SOURCES += \
         html/HTMLAudioElement.cpp \
index 6da93c6..1208e9e 100644 (file)
@@ -13,5 +13,6 @@
     <file alias="progressCursor.png">Resources/progressCursor.png</file>
     <file alias="aliasCursor.png">Resources/aliasCursor.png</file>
     <file alias="deleteButton.png">Resources/deleteButton.png</file>
+    <file alias="inputSpeech.png">Resources/inputSpeech.png</file>
 </qresource>
 </RCC>
index a8bb672..dbbb699 100644 (file)
                6EE8A77210F803F3005A4A24 /* JSWebGLContextAttributes.cpp in Sources */ = {isa = PBXBuildFile; fileRef = 6EE8A77010F803F3005A4A24 /* JSWebGLContextAttributes.cpp */; };
                6EE8A77310F803F3005A4A24 /* JSWebGLContextAttributes.h in Headers */ = {isa = PBXBuildFile; fileRef = 6EE8A77110F803F3005A4A24 /* JSWebGLContextAttributes.h */; };
                72626E020EF022FE00A07E20 /* FontFastPath.cpp in Sources */ = {isa = PBXBuildFile; fileRef = 72626E010EF022FE00A07E20 /* FontFastPath.cpp */; };
+               750D029311D0E7F300BD1B27 /* RenderInputSpeech.cpp in Sources */ = {isa = PBXBuildFile; fileRef = 750D029111D0E7F300BD1B27 /* RenderInputSpeech.cpp */; };
+               750D029411D0E7F300BD1B27 /* RenderInputSpeech.h in Headers */ = {isa = PBXBuildFile; fileRef = 750D029211D0E7F300BD1B27 /* RenderInputSpeech.h */; };
+               750D02C111D0EE7D00BD1B27 /* inputSpeech.tiff in Resources */ = {isa = PBXBuildFile; fileRef = 750D02C011D0EE7D00BD1B27 /* inputSpeech.tiff */; };
                754133A8102E00E800075D00 /* InspectorTimelineAgent.h in Headers */ = {isa = PBXBuildFile; fileRef = 754133A7102E00E800075D00 /* InspectorTimelineAgent.h */; };
                754133AA102E00F400075D00 /* InspectorTimelineAgent.cpp in Sources */ = {isa = PBXBuildFile; fileRef = 754133A9102E00F400075D00 /* InspectorTimelineAgent.cpp */; };
                7553CFE8108F473F00EA281E /* TimelineRecordFactory.h in Headers */ = {isa = PBXBuildFile; fileRef = 7553CFE6108F473F00EA281E /* TimelineRecordFactory.h */; };
                6EE8A77010F803F3005A4A24 /* JSWebGLContextAttributes.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = JSWebGLContextAttributes.cpp; sourceTree = "<group>"; };
                6EE8A77110F803F3005A4A24 /* JSWebGLContextAttributes.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = JSWebGLContextAttributes.h; sourceTree = "<group>"; };
                72626E010EF022FE00A07E20 /* FontFastPath.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = FontFastPath.cpp; sourceTree = "<group>"; };
+               750D029111D0E7F300BD1B27 /* RenderInputSpeech.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = RenderInputSpeech.cpp; sourceTree = "<group>"; };
+               750D029211D0E7F300BD1B27 /* RenderInputSpeech.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RenderInputSpeech.h; sourceTree = "<group>"; };
+               750D02C011D0EE7D00BD1B27 /* inputSpeech.tiff */ = {isa = PBXFileReference; lastKnownFileType = image.tiff; path = inputSpeech.tiff; sourceTree = "<group>"; };
                754133A7102E00E800075D00 /* InspectorTimelineAgent.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = InspectorTimelineAgent.h; sourceTree = "<group>"; };
                754133A9102E00F400075D00 /* InspectorTimelineAgent.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = InspectorTimelineAgent.cpp; sourceTree = "<group>"; };
                7553CFE6108F473F00EA281E /* TimelineRecordFactory.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = TimelineRecordFactory.h; sourceTree = "<group>"; };
                                85136C890AED665800F90A3D /* eastResizeCursor.png */,
                                85136C8A0AED665800F90A3D /* eastWestResizeCursor.png */,
                                85136C8B0AED665800F90A3D /* helpCursor.png */,
+                               750D02C011D0EE7D00BD1B27 /* inputSpeech.tiff */,
                                85136C8C0AED665800F90A3D /* linkCursor.png */,
                                AB4261D70A2F6C9700BDD17D /* missingImage.tiff */,
                                85136C8D0AED665800F90A3D /* moveCursor.png */,
                                A7AA66D511C5ED6A001D8C8C /* RenderIndicator.h */,
                                BCEA4838097D93020094C9E4 /* RenderInline.cpp */,
                                BCEA4839097D93020094C9E4 /* RenderInline.h */,
+                               750D029111D0E7F300BD1B27 /* RenderInputSpeech.cpp */,
+                               750D029211D0E7F300BD1B27 /* RenderInputSpeech.h */,
                                BCEA483A097D93020094C9E4 /* RenderLayer.cpp */,
                                BCEA483B097D93020094C9E4 /* RenderLayer.h */,
                                0F580CFC0F12DE9B0051D689 /* RenderLayerBacking.cpp */,
                                BCB4F8900DB28DD60039139B /* RenderImageGeneratedContent.h in Headers */,
                                A7AA66D711C5ED6A001D8C8C /* RenderIndicator.h in Headers */,
                                BCEA4878097D93020094C9E4 /* RenderInline.h in Headers */,
+                               750D029411D0E7F300BD1B27 /* RenderInputSpeech.h in Headers */,
                                BCEA487A097D93020094C9E4 /* RenderLayer.h in Headers */,
                                0F580CFF0F12DE9B0051D689 /* RenderLayerBacking.h in Headers */,
                                0F580CFD0F12DE9B0051D689 /* RenderLayerCompositor.h in Headers */,
                                85136CA80AED665900F90A3D /* westResizeCursor.png in Resources */,
                                1AB1AE7A0C051FDE00139F4F /* zoomInCursor.png in Resources */,
                                1AB1AE7B0C051FDE00139F4F /* zoomOutCursor.png in Resources */,
+                               750D02C111D0EE7D00BD1B27 /* inputSpeech.tiff in Resources */,
                        );
                        runOnlyForDeploymentPostprocessing = 0;
                };
                                BCB4F8930DB28E530039139B /* RenderImageGeneratedContent.cpp in Sources */,
                                A7AA66D611C5ED6A001D8C8C /* RenderIndicator.cpp in Sources */,
                                BCEA4877097D93020094C9E4 /* RenderInline.cpp in Sources */,
+                               750D029311D0E7F300BD1B27 /* RenderInputSpeech.cpp in Sources */,
                                BCEA4879097D93020094C9E4 /* RenderLayer.cpp in Sources */,
                                0F580D000F12DE9B0051D689 /* RenderLayerBacking.cpp in Sources */,
                                0F580CFE0F12DE9B0051D689 /* RenderLayerCompositor.cpp in Sources */,
index af94f55..f1d0e4f 100644 (file)
@@ -64,6 +64,8 @@ static QPixmap loadResourcePixmap(const char *name)
         pixmap = QWebSettings::webGraphic(QWebSettings::TextAreaSizeGripCornerGraphic);
     else if (qstrcmp(name, "deleteButton") == 0)
         pixmap = QWebSettings::webGraphic(QWebSettings::DeleteButtonGraphic);
+    else if (!qstrcmp(name, "inputSpeech"))
+        pixmap = QWebSettings::webGraphic(QWebSettings::InputSpeechButtonGraphic);
 
     return pixmap;
 }
diff --git a/WebCore/rendering/RenderInputSpeech.cpp b/WebCore/rendering/RenderInputSpeech.cpp
new file mode 100644 (file)
index 0000000..14479d4
--- /dev/null
@@ -0,0 +1,89 @@
+/*
+ * Copyright (C) 2010 Google Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+#include "config.h"
+#include "RenderInputSpeech.h"
+
+#if ENABLE(INPUT_SPEECH)
+
+#include "GraphicsContext.h"
+#include "HTMLNames.h"
+#include "RenderBox.h"
+
+namespace WebCore {
+
+static const float defaultControlFontPixelSize = 13;
+static const float defaultSpeechButtonSize = 16;
+static const float minSpeechButtonSize = 8;
+static const float maxSpeechButtonSize = 40;
+
+void RenderInputSpeech::adjustInputFieldSpeechButtonStyle(CSSStyleSelector*, RenderStyle* style, Element*)
+{
+    // Scale the button size based on the font size.
+    float fontScale = style->fontSize() / defaultControlFontPixelSize;
+    int speechButtonSize = lroundf(std::min(std::max(minSpeechButtonSize, defaultSpeechButtonSize * fontScale), maxSpeechButtonSize));
+    style->setWidth(Length(speechButtonSize, Fixed));
+    style->setHeight(Length(speechButtonSize, Fixed));
+}
+
+bool RenderInputSpeech::paintInputFieldSpeechButton(RenderObject* object, const RenderObject::PaintInfo& paintInfo, const IntRect& rect)
+{
+    // Get the renderer of <input> element.
+    Node* input = object->node()->shadowAncestorNode();
+    if (!input->renderer()->isBox())
+        return false;
+    RenderBox* inputRenderBox = toRenderBox(input->renderer());
+    IntRect inputContentBox = inputRenderBox->contentBoxRect();
+
+    // Make sure the scaled button stays square and will fit in its parent's box.
+    int buttonSize = std::min(inputContentBox.width(), std::min(inputContentBox.height(), rect.height()));
+    // Calculate button's coordinates relative to the input element.
+    // Center the button vertically.  Round up though, so if it has to be one pixel off-center, it will
+    // be one pixel closer to the bottom of the field.  This tends to look better with the text.
+    IntRect buttonRect(object->offsetFromAncestorContainer(inputRenderBox).width(),
+                       inputContentBox.y() + (inputContentBox.height() - buttonSize + 1) / 2,
+                       buttonSize, buttonSize);
+
+    // Compute an offset between the part renderer and the input renderer.
+    IntSize offsetFromInputRenderer = -(object->offsetFromAncestorContainer(inputRenderBox));
+    // Move the rect into partRenderer's coords.
+    buttonRect.move(offsetFromInputRenderer);
+    // Account for the local drawing offset.
+    buttonRect.move(rect.x(), rect.y());
+
+    DEFINE_STATIC_LOCAL(RefPtr<Image>, imageStateNormal, (Image::loadPlatformResource("inputSpeech")));
+    paintInfo.context->drawImage(imageStateNormal.get(), object->style()->colorSpace(), buttonRect);
+
+    return false;
+}
+
+} // namespace WebCore
+
+#endif // ENABLE(INPUT_SPEECH)
diff --git a/WebCore/rendering/RenderInputSpeech.h b/WebCore/rendering/RenderInputSpeech.h
new file mode 100644 (file)
index 0000000..51d749d
--- /dev/null
@@ -0,0 +1,49 @@
+/*
+ * Copyright (C) 2010 Google Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+#ifndef RenderInputSpeech_h
+#define RenderInputSpeech_h
+
+#include "RenderObject.h"
+
+#if ENABLE(INPUT_SPEECH)
+
+namespace WebCore {
+
+class RenderInputSpeech {
+public:
+    static void adjustInputFieldSpeechButtonStyle(CSSStyleSelector*, RenderStyle*, Element*);
+    static bool paintInputFieldSpeechButton(RenderObject*, const RenderObject::PaintInfo&, const IntRect&);
+};
+
+} // namespace WebCore
+
+#endif
+#endif // RenderInputSpeech_h
index da3283c..e58f8d1 100644 (file)
@@ -265,7 +265,8 @@ void RenderTextControlSingleLine::layout()
         // remaining one pixel. It's good for Mac NSStepper because it has
         // shadow at the bottom.
         int y = (diff / 2) + (diff % 2);
-        spinBox->setLocation(spinBox->x() + paddingRight() + borderRight(), y);
+        int x = width() - borderRight() - paddingRight() - spinBox->width();
+        spinBox->setLocation(x, y);
     }
 }
 
@@ -357,20 +358,18 @@ void RenderTextControlSingleLine::forwardEvent(Event* event)
 
     FloatPoint localPoint = innerTextRenderer->absoluteToLocal(static_cast<MouseEvent*>(event)->absoluteLocation(), false, true);
     int textRight = innerTextRenderer->borderBoxRect().right();
+
 #if ENABLE(INPUT_SPEECH)
-    int cancelRight = textRight;
-    if (m_cancelButton && m_cancelButton->renderBox()) {
-        RenderBox* cancelRenderer = m_cancelButton->renderBox();
-        cancelRight += cancelRenderer->width() + cancelRenderer->marginLeft() + cancelRenderer->marginRight();
+    if (RenderBox* speechBox = m_speechButton ? m_speechButton->renderBox() : 0) {
+        if (localPoint.x() >= speechBox->x() && localPoint.x() < speechBox->x() + speechBox->width()) {
+            m_speechButton->defaultEventHandler(event);
+            return;
+        }
     }
 #endif
 
     if (m_resultsButton && localPoint.x() < innerTextRenderer->borderBoxRect().x())
         m_resultsButton->defaultEventHandler(event);
-#if ENABLE(INPUT_SPEECH)
-    else if (m_speechButton && localPoint.x() > cancelRight)
-        m_speechButton->defaultEventHandler(event);
-#endif
     else if (m_cancelButton && localPoint.x() > textRight)
         m_cancelButton->defaultEventHandler(event);
     else if (m_outerSpinButton && localPoint.x() > textRight)
@@ -607,6 +606,10 @@ void RenderTextControlSingleLine::createSubtreeIfNeeded()
         m_innerBlock = TextControlInnerElement::create(node());
         m_innerBlock->attachInnerElement(node(), createInnerBlockStyle(style()), renderArena());
     }
+    if (inputElement()->hasSpinButton() && !m_outerSpinButton) {
+        m_outerSpinButton = SpinButtonElement::create(node());
+        m_outerSpinButton->attachInnerElement(node(), createOuterSpinButtonStyle(), renderArena());
+    }
 
     if (inputElement()->isSearchField()) {
         if (!m_resultsButton) {
@@ -711,7 +714,7 @@ PassRefPtr<RenderStyle> RenderTextControlSingleLine::createInnerBlockStyle(const
     RefPtr<RenderStyle> innerBlockStyle = RenderStyle::create();
     innerBlockStyle->inheritFrom(startStyle);
 
-    innerBlockStyle->setDisplay(BLOCK);
+    innerBlockStyle->setDisplay(inputElement()->hasSpinButton() ? INLINE_BLOCK : BLOCK);
     innerBlockStyle->setDirection(LTR);
 
     // We don't want the shadow dom to be editable, so we set this block to read-only in case the input itself is editable.
index c5e910c..59dad9a 100644 (file)
 #include "RenderMeter.h"
 #endif
 
+#if ENABLE(INPUT_SPEECH)
+#include "RenderInputSpeech.h"
+#endif
+
 // The methods in this file are shared by all themes on every platform.
 
 namespace WebCore {
@@ -230,7 +234,7 @@ void RenderTheme::adjustStyle(CSSStyleSelector* selector, RenderStyle* style, El
 #endif
 #if ENABLE(INPUT_SPEECH)
         case InputSpeechButtonPart:
-            // FIXME: Adjust the speech button's style and sizes.
+            return adjustInputFieldSpeechButtonStyle(selector, style, e);
 #endif
         default:
             break;
@@ -364,7 +368,7 @@ bool RenderTheme::paint(RenderObject* o, const PaintInfo& paintInfo, const IntRe
             return paintSearchFieldResultsButton(o, paintInfo, r);
 #if ENABLE(INPUT_SPEECH)
         case InputSpeechButtonPart:
-            // FIXME: Add painting code to draw the speech button.
+            return paintInputFieldSpeechButton(o, paintInfo, r);
 #endif
         default:
             break;
@@ -922,6 +926,18 @@ void RenderTheme::adjustMenuListStyle(CSSStyleSelector*, RenderStyle*, Element*)
 {
 }
 
+#if ENABLE(INPUT_SPEECH)
+void RenderTheme::adjustInputFieldSpeechButtonStyle(CSSStyleSelector* selector, RenderStyle* style, Element* element) const
+{
+    RenderInputSpeech::adjustInputFieldSpeechButtonStyle(selector, style, element);
+}
+
+bool RenderTheme::paintInputFieldSpeechButton(RenderObject* object, const RenderObject::PaintInfo& paintInfo, const IntRect& rect)
+{
+    return RenderInputSpeech::paintInputFieldSpeechButton(object, paintInfo, rect);
+}
+#endif
+
 #if ENABLE(METER_TAG)
 void RenderTheme::adjustMeterStyle(CSSStyleSelector*, RenderStyle* style, Element*) const
 {
index 432ffc7..7250723 100644 (file)
@@ -255,6 +255,11 @@ protected:
     virtual bool paintProgressBar(RenderObject*, const PaintInfo&, const IntRect&) { return true; }
 #endif
 
+#if ENABLE(INPUT_SPEECH)
+    virtual void adjustInputFieldSpeechButtonStyle(CSSStyleSelector*, RenderStyle*, Element*) const;
+    virtual bool paintInputFieldSpeechButton(RenderObject*, const RenderObject::PaintInfo&, const IntRect&);
+#endif
+
     virtual void adjustSliderTrackStyle(CSSStyleSelector*, RenderStyle*, Element*) const;
     virtual bool paintSliderTrack(RenderObject*, const PaintInfo&, const IntRect&) { return true; }
 
index 5f80041..993bc72 100644 (file)
@@ -1492,6 +1492,16 @@ bool RenderThemeMac::paintSearchFieldCancelButton(RenderObject* o, const PaintIn
     float zoomLevel = o->style()->effectiveZoom();
 
     FloatRect localBounds = [search cancelButtonRectForBounds:NSRect(input->renderBox()->borderBoxRect())];
+
+#if ENABLE(INPUT_SPEECH)
+    // Take care of cases where the cancel button was not aligned with the right border of the input element (for e.g.
+    // when speech input is enabled for the input element.
+    IntRect absBoundingBox = input->renderer()->absoluteBoundingBoxRect();
+    int absRight = absBoundingBox.x() + absBoundingBox.width() - input->renderBox()->paddingRight() - input->renderBox()->borderRight();
+    int spaceToRightOfCancelButton = absRight - (r.x() + r.width());
+    localBounds.setX(localBounds.x() - spaceToRightOfCancelButton);
+#endif
+
     localBounds = convertToPaintingRect(input->renderer(), o, localBounds, r);
 
     FloatRect unzoomedRect(localBounds);
index b2766a7..ff7c101 100644 (file)
@@ -90,6 +90,7 @@ static WebGraphicHash* graphics()
         hash->insert(QWebSettings::DefaultFrameIconGraphic, QPixmap(QLatin1String(":webkit/resources/urlIcon.png")));
         hash->insert(QWebSettings::TextAreaSizeGripCornerGraphic, QPixmap(QLatin1String(":webkit/resources/textAreaResizeCorner.png")));
         hash->insert(QWebSettings::DeleteButtonGraphic, QPixmap(QLatin1String(":webkit/resources/deleteButton.png")));
+        hash->insert(QWebSettings::InputSpeechButtonGraphic, QPixmap(QLatin1String(":webkit/resources/inputSpeech.png")));
     }
 
     return hash;
index 38a2b3f..8967e7c 100644 (file)
@@ -82,7 +82,8 @@ public:
         MissingPluginGraphic,
         DefaultFrameIconGraphic,
         TextAreaSizeGripCornerGraphic,
-        DeleteButtonGraphic
+        DeleteButtonGraphic,
+        InputSpeechButtonGraphic
     };
     enum FontSize {
         MinimumFontSize,
index 859a915..0113939 100644 (file)
@@ -1,3 +1,14 @@
+2010-07-01  Satish Sampath  <satish@chromium.org>
+
+        Reviewed by Kent Tamura.
+
+        Rendering the speech button in input elements.
+        https://bugs.webkit.org/show_bug.cgi?id=40984
+
+        * Api/qwebsettings.cpp:
+        (graphics):
+        * Api/qwebsettings.h:
+
 2010-06-30  Jocelyn Turcotte  <jocelyn.turcotte@nokia.com>
 
         Reviewed by Kenneth Rohde Christiansen.