Commit 06dfd042 authored by tkent@chromium.org's avatar tkent@chromium.org

<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:

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@63288 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 01d5d74d
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>
Unreviewed, test expectation update.
......@@ -9,18 +9,21 @@ layer at (0,0) size 800x600
RenderBlock {DIV} at (0,34) size 784x33
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
text run at (222,10) width 84: " Normal state"
RenderBlock {DIV} at (0,67) size 784x33
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
text run at (222,10) width 92: " Disabled state"
RenderBlock {DIV} at (0,100) size 784x33
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
text run at (222,10) width 102: " Read-only state"
......
......@@ -18,6 +18,7 @@ layer at (0,0) size 800x600
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 (80,2) size 0x12
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)]
......@@ -25,6 +26,7 @@ layer at (0,0) size 800x600
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 (82,2) size 0x13
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)]
......@@ -32,6 +34,7 @@ layer at (0,0) size 800x600
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 (84,2) size 0x14
RenderBlock {DIV} at (88,2) size 13x15
RenderBlock {DIV} at (1,109) size 178x46
RenderTextControl {INPUT} at (2,2) size 125x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
......@@ -39,6 +42,7 @@ layer at (0,0) size 800x600
text run at (129,2) width 4: " "
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
RenderTextControl {INPUT} at (2,2) size 127x21 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
......@@ -46,6 +50,7 @@ layer at (0,0) size 800x600
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 (107,2) size 0x17
RenderBlock {DIV} at (111,3) size 13x15
RenderBlock {DIV} at (1,205) size 178x52
RenderTextControl {INPUT} at (2,2) size 148x22 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
......@@ -53,6 +58,7 @@ layer at (0,0) size 800x600
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 (126,2) size 0x18
RenderBlock {DIV} at (130,0) size 15x22
RenderBlock {DIV} at (1,257) size 178x54
RenderTextControl {INPUT} at (2,2) size 150x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
......@@ -60,6 +66,7 @@ layer at (0,0) size 800x600
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 (128,2) size 0x19
RenderBlock {DIV} at (132,1) size 15x22
RenderBlock {DIV} at (1,311) size 178x56
RenderTextControl {INPUT} at (2,2) size 170x24 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
......@@ -67,6 +74,7 @@ layer at (0,0) size 800x600
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 (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]
RenderBlock {DIV} at (1,1) size 251x56
......@@ -75,6 +83,7 @@ layer at (0,0) size 800x600
text run at (176,6) width 4: " "
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
RenderTextControl {INPUT} at (2,2) size 174x26 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
......@@ -82,6 +91,7 @@ layer at (0,0) size 800x600
text run at (178,7) width 4: " "
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
RenderTextControl {INPUT} at (2,2) size 195x27 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
......@@ -89,6 +99,7 @@ layer at (0,0) size 800x600
text run at (199,8) width 4: " "
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
RenderTextControl {INPUT} at (2,2) size 197x28 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
......@@ -96,6 +107,7 @@ layer at (0,0) size 800x600
text run at (201,9) width 4: " "
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
RenderTextControl {INPUT} at (2,2) size 218x29 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
......@@ -103,6 +115,7 @@ layer at (0,0) size 800x600
text run at (222,10) width 4: " "
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
RenderTextControl {INPUT} at (2,2) size 220x30 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
......@@ -110,6 +123,7 @@ layer at (0,0) size 800x600
text run at (224,11) width 4: " "
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
RenderTextControl {INPUT} at (2,2) size 241x32 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
......@@ -117,6 +131,7 @@ layer at (0,0) size 800x600
text run at (245,12) width 4: " "
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
RenderTextControl {INPUT} at (2,2) size 243x33 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
......@@ -124,6 +139,7 @@ layer at (0,0) size 800x600
text run at (247,13) width 4: " "
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
RenderBlock {DIV} at (3,3) size 94x10
......
......@@ -9,6 +9,7 @@ layer at (0,0) size 800x600
RenderBlock {DIV} at (0,34) size 784x0
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
RenderText {#text} at (0,0) size 0x0
......
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>
Reviewed by Darin Fisher.
......@@ -69,6 +69,8 @@ RenderTextControlSingleLine::~RenderTextControlSingleLine()
if (m_innerBlock)
m_innerBlock->detach();
if (m_innerSpinButton)
m_innerSpinButton->detach();
if (m_outerSpinButton)
m_outerSpinButton->detach();
}
......@@ -257,6 +259,12 @@ void RenderTextControlSingleLine::layout()
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
// padding + border of the text fields.
if (RenderBox* spinBox = m_outerSpinButton ? m_outerSpinButton->renderBox() : 0) {
......@@ -288,6 +296,8 @@ bool RenderTextControlSingleLine::nodeAtPoint(const HitTestRequest& request, Hit
hitInnerTextElement(result, xPos, yPos, tx, ty);
// 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;
// If we're not a search field, or we already found the speech, results or cancel buttons, we're done.
......@@ -372,6 +382,8 @@ void RenderTextControlSingleLine::forwardEvent(Event* event)
m_resultsButton->defaultEventHandler(event);
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);
else
......@@ -465,6 +477,11 @@ int RenderTextControlSingleLine::textBlockWidth() const
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();
}
#if ENABLE(INPUT_SPEECH)
if (RenderBox* speechRenderer = m_speechButton ? m_speechButton->renderBox() : 0) {
speechRenderer->calcWidth();
......@@ -530,6 +547,9 @@ int RenderTextControlSingleLine::preferredContentWidth(float charWidth) const
result += cancelRenderer->borderLeft() + cancelRenderer->borderRight() +
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) {
result += speechRenderer->borderLeft() + speechRenderer->borderRight() +
......@@ -594,7 +614,12 @@ void RenderTextControlSingleLine::createSubtreeIfNeeded()
#endif
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());
}
......@@ -763,6 +788,16 @@ PassRefPtr<RenderStyle> RenderTextControlSingleLine::createCancelButtonStyle(con
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();
}
PassRefPtr<RenderStyle> RenderTextControlSingleLine::createOuterSpinButtonStyle() const
{
ASSERT(node()->isHTMLElement());
......
......@@ -98,6 +98,7 @@ private:
PassRefPtr<RenderStyle> createInnerBlockStyle(const RenderStyle* startStyle) const;
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)
PassRefPtr<RenderStyle> createSpeechButtonStyle(const RenderStyle* startStyle) const;
......@@ -146,6 +147,7 @@ private:
RefPtr<TextControlInnerElement> m_innerBlock;
RefPtr<SearchFieldResultsButtonElement> m_resultsButton;
RefPtr<SearchFieldCancelButtonElement> m_cancelButton;
RefPtr<TextControlInnerElement> m_innerSpinButton;
RefPtr<TextControlInnerElement> m_outerSpinButton;
#if ENABLE(INPUT_SPEECH)
RefPtr<InputFieldSpeechButtonElement> m_speechButton;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment