Changeset 63288 in webkit

Timestamp:

Jul 14, 2010 1:20:42 AM (14 years ago)

Author:

tkent@chromium.org

Message:

<input type=number> UI: inner spin button layout
​https://bugs.webkit.org/show_bug.cgi?id=41924

Reviewed by Darin Fisher.

WebCore:

Add layout/event/style code for the inner spin button, which is
going to be used for Windows implementation.
No new tests because no ports implement the inner spin button yet.

• rendering/RenderTextControlSingleLine.cpp: Introduce m_innerSpinButton.

(WebCore::RenderTextControlSingleLine::~RenderTextControlSingleLine):

Detach m_innerSpinButton.

(WebCore::RenderTextControlSingleLine::layout):

Set position and size of m_innerSpinButton.

(WebCore::RenderTextControlSingleLine::nodeAtPoint):

Handle m_innerSpinButton.

(WebCore::RenderTextControlSingleLine::forwardEvent):

Handle m_innerSpinButton.

(WebCore::RenderTextControlSingleLine::textBlockWidth):

Shorten the text block width by m_innerSpinButton width.

(WebCore::RenderTextControlSingleLine::preferredContentWidth):

Add m_innerSpinButton width.

(WebCore::RenderTextControlSingleLine::createSubtreeIfNeeded):

Handle m_innerSpinButton.

(WebCore::RenderTextControlSingleLine::createInnerSpinButtonStyle):

Make style for m_innerSpinButton with INNER_SPIN_BUTTON pseudo class.

• rendering/RenderTextControlSingleLine.h:

LayoutTests:

Update test expectations because a shadow node is added to
<input type=number>.

• platform/mac/fast/forms/input-appearance-spinbutton-disabled-readonly-expected.html
• platform/mac/fast/forms/input-appearance-spinbutton-expected.txt:
• platform/mac/fast/forms/input-appearance-spinbutton-up-expected.txt:

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/platform/mac/fast/forms/input-appearance-spinbutton-disabled-readonly-expected.txt (modified) (3 diffs)
• LayoutTests/platform/mac/fast/forms/input-appearance-spinbutton-expected.txt (modified) (16 diffs)
• LayoutTests/platform/mac/fast/forms/input-appearance-spinbutton-up-expected.txt (modified) (1 diff)
• WebCore/ChangeLog (modified) (1 diff)
• WebCore/rendering/RenderTextControlSingleLine.cpp (modified) (8 diffs)
• WebCore/rendering/RenderTextControlSingleLine.h (modified) (2 diffs)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2010-07-14  Kent Tamura  <tkent@chromium.org>
+
+        Reviewed by Darin Fisher.
+
+        <input type=number> UI: inner spin button layout
+        https://bugs.webkit.org/show_bug.cgi?id=41924
+
+        Update test expectations because a shadow node is added to
+        <input type=number>.
+
+        * platform/mac/fast/forms/input-appearance-spinbutton-disabled-readonly-expected.html
+        * platform/mac/fast/forms/input-appearance-spinbutton-expected.txt:
+        * platform/mac/fast/forms/input-appearance-spinbutton-up-expected.txt:
+
 2010-07-14  Kent Tamura  <tkent@chromium.org>
 

trunk/LayoutTests/platform/mac/fast/forms/input-appearance-spinbutton-disabled-readonly-expected.txt

@@ -10 +10 @@
         RenderInline {LABEL} at (0,0) size 306x18
           RenderTextControl {INPUT} at (2,2) size 218x29 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+            RenderBlock {DIV} at (192,2) size 0x25
             RenderBlock {DIV} at (196,1) size 19x27
           RenderText {#text} at (222,10) size 84x18
@@ -16 +17 @@
         RenderInline {LABEL} at (0,0) size 314x18
           RenderTextControl {INPUT} at (2,2) size 218x29 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+            RenderBlock {DIV} at (192,2) size 0x25
             RenderBlock {DIV} at (196,1) size 19x27
           RenderText {#text} at (222,10) size 92x18
@@ -22 +24 @@
         RenderInline {LABEL} at (0,0) size 324x18
           RenderTextControl {INPUT} at (2,2) size 218x29 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+            RenderBlock {DIV} at (192,2) size 0x25
             RenderBlock {DIV} at (196,1) size 19x27
           RenderText {#text} at (222,10) size 102x18

trunk/LayoutTests/platform/mac/fast/forms/input-appearance-spinbutton-expected.txt

@@ -19 +19 @@
                   RenderBR {BR} at (104,14) size 0x0
                   RenderTextControl {INPUT} at (0,19) size 100x16 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (80,2) size 0x12
                     RenderBlock {DIV} at (84,1) size 13x15
                 RenderBlock {DIV} at (1,36) size 178x36
@@ -26 +27 @@
                   RenderBR {BR} at (106,14) size 0x0
                   RenderTextControl {INPUT} at (0,19) size 102x17 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (82,2) size 0x13
                     RenderBlock {DIV} at (86,1) size 13x15
                 RenderBlock {DIV} at (1,72) size 178x37
@@ -33 +35 @@
                   RenderBR {BR} at (108,14) size 0x0
                   RenderTextControl {INPUT} at (0,19) size 104x18 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (84,2) size 0x14
                     RenderBlock {DIV} at (88,2) size 13x15
                 RenderBlock {DIV} at (1,109) size 178x46
@@ -40 +43 @@
                   RenderBR {BR} at (133,16) size 0x0
                   RenderTextControl {INPUT} at (2,25) size 125x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (105,2) size 0x15
                     RenderBlock {DIV} at (109,2) size 13x15
                 RenderBlock {DIV} at (1,155) size 178x50
@@ -47 +51 @@
                   RenderBR {BR} at (135,17) size 0x0
                   RenderTextControl {INPUT} at (2,27) size 127x21 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (107,2) size 0x17
                     RenderBlock {DIV} at (111,3) size 13x15
                 RenderBlock {DIV} at (1,205) size 178x52
@@ -54 +59 @@
                   RenderBR {BR} at (156,18) size 0x0
                   RenderTextControl {INPUT} at (2,28) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (126,2) size 0x18
                     RenderBlock {DIV} at (130,0) size 15x22
                 RenderBlock {DIV} at (1,257) size 178x54
@@ -61 +67 @@
                   RenderBR {BR} at (158,19) size 0x0
                   RenderTextControl {INPUT} at (2,29) size 150x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (128,2) size 0x19
                     RenderBlock {DIV} at (132,1) size 15x22
                 RenderBlock {DIV} at (1,311) size 178x56
@@ -68 +75 @@
                   RenderBR {BR} at (178,20) size 0x0
                   RenderTextControl {INPUT} at (2,30) size 170x24 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (148,2) size 0x20
                     RenderBlock {DIV} at (152,1) size 15x22
               RenderTableCell {TD} at (184,2) size 253x524 [r=0 c=1 rs=1 cs=1]
@@ -76 +84 @@
                   RenderBR {BR} at (180,20) size 0x0
                   RenderTextControl {INPUT} at (2,30) size 172x24 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (150,2) size 0x20
                     RenderBlock {DIV} at (154,1) size 15x22
                 RenderBlock {DIV} at (1,57) size 251x60
@@ -83 +92 @@
                   RenderBR {BR} at (182,21) size 0x0
                   RenderTextControl {INPUT} at (2,32) size 174x26 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (152,2) size 0x22
                     RenderBlock {DIV} at (156,2) size 15x22
                 RenderBlock {DIV} at (1,117) size 251x62
@@ -90 +100 @@
                   RenderBR {BR} at (203,22) size 0x0
                   RenderTextControl {INPUT} at (2,33) size 195x27 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (169,2) size 0x23
                     RenderBlock {DIV} at (173,0) size 19x27
                 RenderBlock {DIV} at (1,179) size 251x64
@@ -97 +108 @@
                   RenderBR {BR} at (205,23) size 0x0
                   RenderTextControl {INPUT} at (2,34) size 197x28 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (171,2) size 0x24
                     RenderBlock {DIV} at (175,1) size 19x27
                 RenderBlock {DIV} at (1,243) size 251x66
@@ -104 +116 @@
                   RenderBR {BR} at (226,24) size 0x0
                   RenderTextControl {INPUT} at (2,35) size 218x29 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (192,2) size 0x25
                     RenderBlock {DIV} at (196,1) size 19x27
                 RenderBlock {DIV} at (1,309) size 251x68
@@ -111 +124 @@
                   RenderBR {BR} at (228,25) size 0x0
                   RenderTextControl {INPUT} at (2,36) size 220x30 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (194,2) size 0x26
                     RenderBlock {DIV} at (198,2) size 19x27
                 RenderBlock {DIV} at (1,377) size 251x72
@@ -118 +132 @@
                   RenderBR {BR} at (249,26) size 0x0
                   RenderTextControl {INPUT} at (2,38) size 241x32 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (215,2) size 0x28
                     RenderBlock {DIV} at (219,3) size 19x27
                 RenderBlock {DIV} at (1,449) size 251x74
@@ -125 +140 @@
                   RenderBR {BR} at (251,27) size 0x0
                   RenderTextControl {INPUT} at (2,39) size 243x33 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+                    RenderBlock {DIV} at (217,2) size 0x29
                     RenderBlock {DIV} at (221,3) size 19x27
 layer at (14,129) size 94x10

trunk/LayoutTests/platform/mac/fast/forms/input-appearance-spinbutton-up-expected.txt

@@ -10 +10 @@
       RenderBlock (anonymous) at (0,34) size 784x31
         RenderTextControl {INPUT} at (2,2) size 195x27 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+          RenderBlock {DIV} at (169,2) size 0x23
           RenderBlock {DIV} at (173,0) size 19x27
         RenderText {#text} at (0,0) size 0x0

trunk/WebCore/ChangeLog

@@ +1 @@
+2010-07-14  Kent Tamura  <tkent@chromium.org>
+
+        Reviewed by Darin Fisher.
+
+        <input type=number> UI: inner spin button layout
+        https://bugs.webkit.org/show_bug.cgi?id=41924
+
+        Add layout/event/style code for the inner spin button, which is
+        going to be used for Windows implementation.
+        No new tests because no ports implement the inner spin button yet.
+
+        * rendering/RenderTextControlSingleLine.cpp:
+          Introduce m_innerSpinButton.
+        (WebCore::RenderTextControlSingleLine::~RenderTextControlSingleLine):
+          Detach m_innerSpinButton.
+        (WebCore::RenderTextControlSingleLine::layout):
+          Set position and size of m_innerSpinButton.
+        (WebCore::RenderTextControlSingleLine::nodeAtPoint):
+          Handle m_innerSpinButton.
+        (WebCore::RenderTextControlSingleLine::forwardEvent):
+          Handle m_innerSpinButton.
+        (WebCore::RenderTextControlSingleLine::textBlockWidth):
+          Shorten the text block width by m_innerSpinButton width.
+        (WebCore::RenderTextControlSingleLine::preferredContentWidth):
+          Add m_innerSpinButton width.
+        (WebCore::RenderTextControlSingleLine::createSubtreeIfNeeded):
+          Handle m_innerSpinButton.
+        (WebCore::RenderTextControlSingleLine::createInnerSpinButtonStyle):
+          Make style for m_innerSpinButton with INNER_SPIN_BUTTON pseudo class.
+        * rendering/RenderTextControlSingleLine.h:
+
 2010-07-14  Kent Tamura  <tkent@chromium.org>
 

trunk/WebCore/rendering/RenderTextControlSingleLine.cpp

@@ -70 +70 @@
         m_innerBlock->detach();
 
+    if (m_innerSpinButton)
+        m_innerSpinButton->detach();
     if (m_outerSpinButton)
         m_outerSpinButton->detach();
@@ -257 +259 @@
     if (currentHeight < height())
         childBlock->setY((height() - currentHeight) / 2);
+
+    // Ignores the paddings for the inner spin button.
+    if (RenderBox* spinBox = m_innerSpinButton ? m_innerSpinButton->renderBox() : 0) {
+        spinBox->setLocation(spinBox->x() + paddingRight(), borderTop());
+        spinBox->setHeight(height() - borderTop() - borderBottom());
+    }
 
     // Center the spin button vertically, and move it to the right by
@@ -289 +297 @@
 
     // If we found a spin button, we're done.
+    if (m_innerSpinButton && result.innerNode() == m_innerSpinButton)
+        return true;
     if (m_outerSpinButton && result.innerNode() == m_outerSpinButton)
         return true;
@@ -373 +383 @@
     else if (m_cancelButton && localPoint.x() > textRight)
         m_cancelButton->defaultEventHandler(event);
+    else if (m_innerSpinButton && localPoint.x() > textRight && localPoint.x() < textRight + m_innerSpinButton->renderBox()->width())
+        m_innerSpinButton->defaultEventHandler(event);
     else if (m_outerSpinButton && localPoint.x() > textRight)
         m_outerSpinButton->defaultEventHandler(event);
@@ -464 +476 @@
         cancelRenderer->calcWidth();
         width -= cancelRenderer->width() + cancelRenderer->marginLeft() + cancelRenderer->marginRight();
+    }
+
+    if (RenderBox* spinRenderer = m_innerSpinButton ? m_innerSpinButton->renderBox() : 0) {
+        spinRenderer->calcWidth();
+        width -= spinRenderer->width() + spinRenderer->marginLeft() + spinRenderer->marginRight();
     }
 
@@ -531 +548 @@
                   cancelRenderer->paddingLeft() + cancelRenderer->paddingRight();
 
+    if (RenderBox* spinRenderer = m_innerSpinButton ? m_innerSpinButton->renderBox() : 0)
+        result += spinRenderer->minPrefWidth();
+
 #if ENABLE(INPUT_SPEECH)
     if (RenderBox* speechRenderer = m_speechButton ? m_speechButton->renderBox() : 0) {
@@ -595 +615 @@
     if (!createSubtree) {
         RenderTextControl::createSubtreeIfNeeded(m_innerBlock.get());
-        if (inputElement()->hasSpinButton() && !m_outerSpinButton) {
+        bool hasSpinButton = inputElement()->hasSpinButton();
+        if (hasSpinButton && !m_innerSpinButton) {
+            m_innerSpinButton = SpinButtonElement::create(node());
+            m_innerSpinButton->attachInnerElement(node(), createInnerSpinButtonStyle(), renderArena());
+        }
+        if (hasSpinButton && !m_outerSpinButton) {
             m_outerSpinButton = SpinButtonElement::create(node());
             m_outerSpinButton->attachInnerElement(node(), createOuterSpinButtonStyle(), renderArena());
@@ -762 +787 @@
     cancelBlockStyle->setVisibility(visibilityForCancelButton());
     return cancelBlockStyle.release();
+}
+
+PassRefPtr<RenderStyle> RenderTextControlSingleLine::createInnerSpinButtonStyle() const
+{
+    ASSERT(node()->isHTMLElement());
+    RefPtr<RenderStyle> buttonStyle = getCachedPseudoStyle(INNER_SPIN_BUTTON);
+    if (!buttonStyle)
+        buttonStyle = RenderStyle::create();
+    buttonStyle->inheritFrom(style());
+    return buttonStyle.release();
 }
 

trunk/WebCore/rendering/RenderTextControlSingleLine.h

@@ -99 +99 @@
     PassRefPtr<RenderStyle> createResultsButtonStyle(const RenderStyle* startStyle) const;
     PassRefPtr<RenderStyle> createCancelButtonStyle(const RenderStyle* startStyle) const;
+    PassRefPtr<RenderStyle> createInnerSpinButtonStyle() const;
     PassRefPtr<RenderStyle> createOuterSpinButtonStyle() const;
 #if ENABLE(INPUT_SPEECH)
@@ -147 +148 @@
     RefPtr<SearchFieldResultsButtonElement> m_resultsButton;
     RefPtr<SearchFieldCancelButtonElement> m_cancelButton;
+    RefPtr<TextControlInnerElement> m_innerSpinButton;
     RefPtr<TextControlInnerElement> m_outerSpinButton;
 #if ENABLE(INPUT_SPEECH)