Bug 157846. Main patch: Propagate text <input> padding down to its scrolled child and add 1px left/right padding to stylesheets as needed. Fix tests. r=roc

Original patch by Charly Molter. Help from Robert O'Callahan and Jim Mathies.

--HG--
extra : rebase_source : eacfe5696e9831f149157bbd7fe697c0f8020604
This commit is contained in:
Alex Henrie 2014-01-13 08:13:10 -05:00
parent 74b5546df5
commit bd103dbad3
18 changed files with 160 additions and 65 deletions

View File

@ -187,7 +187,7 @@ gTests.push({
is(getTrimmedSelection(gInput).toString(), "straight on like a tunnel for some way and then dipped suddenly down", "selection test");
// left and up with no scrolling - selection should shrink
yield touchdrag.move(130, ystartpos);
yield touchdrag.move(135, ystartpos);
touchdrag.end();
yield SelectionHelperUI.pingSelectionHandler();

View File

@ -3,23 +3,23 @@
#mac html|input, #mac html|textarea {
margin: 4px;
padding: 0;
padding: 0 1px;
}
#win html|input, #win html|textarea {
margin: 2px 4px;
padding: 2px 2px 3px;
-moz-padding-start: 4px;
padding: 2px 3px 3px;
-moz-padding-start: 5px;
}
#win html|input:-moz-system-metric(windows-default-theme) {
padding: 1px 1px 2px;
-moz-padding-start: 3px;
padding: 1px 2px 2px;
-moz-padding-start: 4px;
}
#linux html|input, #linux html|textarea {
margin: 2px 4px;
padding: 2px 4px 3px;
padding: 2px 5px 3px;
}
textbox[multiline="true"], html|textarea {
@ -34,7 +34,11 @@ html|input, html|textarea {
}
html|input.ac {
padding: 0 3px !important;
padding: 0 4px !important;
}
#mac html|input.ac {
padding: 0 3px !important;
}
html|input.empty {
@ -59,7 +63,7 @@ html|input.num {
#linux html|input.num {
-moz-margin-end: 3px;
padding: 3px;
padding: 3px 4px;
}
html|div.plainfield {

View File

@ -190,17 +190,6 @@ nsTextControlFrame::CalcIntrinsicSize(nsRenderingContext* aRenderingContext,
if (PresContext()->CompatibilityMode() == eCompatibility_FullStandards) {
aIntrinsicSize.width += 1;
}
// Also add in the padding of our value div child. Note that it hasn't
// been reflowed yet, so we can't get its used padding, but it shouldn't be
// using percentage padding anyway.
nsMargin childPadding;
nsIFrame* firstChild = GetFirstPrincipalChild();
if (firstChild && firstChild->StylePadding()->GetPadding(childPadding)) {
aIntrinsicSize.width += childPadding.LeftRight();
} else {
NS_ERROR("Percentage padding on value div?");
}
}
// Increment width with cols * letter-spacing.
@ -535,32 +524,24 @@ nsTextControlFrame::ReflowTextControlChild(nsIFrame* aKid,
nsHTMLReflowMetrics& aParentDesiredSize)
{
// compute available size and frame offsets for child
nsSize availSize(aReflowState.ComputedWidth(),
aReflowState.ComputedHeight());
availSize.width = std::max(availSize.width, 0);
availSize.height = std::max(availSize.height, 0);
nsSize availSize(aReflowState.ComputedWidth() +
aReflowState.ComputedPhysicalPadding().LeftRight(),
NS_UNCONSTRAINEDSIZE);
nsHTMLReflowState kidReflowState(aPresContext, aReflowState,
aKid, availSize);
aKid, availSize, -1, -1, nsHTMLReflowState::CALLER_WILL_INIT);
// Override padding with our computed padding in case we got it from theming or percentage
kidReflowState.Init(aPresContext, -1, -1, nullptr, &aReflowState.ComputedPhysicalPadding());
// Set computed width and computed height for the child
nscoord width = availSize.width;
width -= kidReflowState.ComputedPhysicalMargin().LeftRight() +
kidReflowState.ComputedPhysicalBorderPadding().LeftRight();
width = std::max(width, 0);
kidReflowState.SetComputedWidth(width);
kidReflowState.SetComputedWidth(aReflowState.ComputedWidth());
kidReflowState.SetComputedHeight(aReflowState.ComputedHeight());
nscoord height = availSize.height;
height -= kidReflowState.ComputedPhysicalMargin().TopBottom() +
kidReflowState.ComputedPhysicalBorderPadding().TopBottom();
height = std::max(height, 0);
kidReflowState.SetComputedHeight(height);
// compute the offsets
nscoord xOffset = aReflowState.ComputedPhysicalBorderPadding().left
+ kidReflowState.ComputedPhysicalMargin().left;
nscoord yOffset = aReflowState.ComputedPhysicalBorderPadding().top
+ kidReflowState.ComputedPhysicalMargin().top;
// Offset the frame by the size of the parent's border
nscoord xOffset = aReflowState.ComputedPhysicalBorderPadding().left -
aReflowState.ComputedPhysicalPadding().left;
nscoord yOffset = aReflowState.ComputedPhysicalBorderPadding().top -
aReflowState.ComputedPhysicalPadding().top;
// reflow the child
nsHTMLReflowMetrics desiredSize(aReflowState.GetWritingMode());

View File

@ -239,7 +239,7 @@ skip-if(B2G) == 234964-1.html 234964-1-ref.html
== 240029-1.html 240029-1-ref.html
== 240470-1.html 240470-1-ref.html
skip-if(B2G) == 240933-1.html 240933-1-ref.html
skip-if(B2G) fails-if(Android) == 240933-2.html 240933-2-ref.html
skip-if(B2G) == 240933-2.html 240933-2-ref.html
== 243266-1.html 243266-1-ref.html
== 243302-1.html 243302-1-ref.html
skip-if(B2G) == 243519-1.html 243519-1-ref.html

View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<title>Intrinsic Size Test Reference</title>
<style>input, textarea { border-radius:0; background:none; border:none; }</style>
</head>
<body>
<div>
<span style="border:2px solid black; padding-left:200px"><input style="background-color:transparent; border:none; font-family:monospace"/></span>
</div>
</body>
</html>

View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<title>Intrinsic Size Test</title>
<style>input, textarea { border-radius:0; background:none; border:none; }</style>
</head>
<body>
<div>
<span style="border:2px solid black"><input style="background-color:transparent; border:none; font-family:monospace; padding-left:201px"/></span>
</div>
</body>
</html>

View File

@ -5,3 +5,4 @@ HTTP(..) == baseline-1.html baseline-1-ref.html
HTTP(..) == centering-1.xul centering-1-ref.xul
== dynamic-height-1.xul dynamic-height-1-ref.xul
needs-focus == select.html select-ref.html
== intrinsic-size.html intrinsic-size-ref.html

View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Padding and Scrollbar Placement Test Reference</title>
<style>input, textarea { border-radius:0; background:none; border:none; }</style>
<style type="text/css">
#t {
display: block;
position: absolute;
left: 50px;
top: 50px;
padding: 50px;
width: 300px;
height: 100px;
border: 5px solid red;
margin: 10px;
overflow: scroll;
font-family: verdana;
white-space: pre-wrap;
z-index: 0; /* force a stacking context */
}
#cover {
position: absolute;
left: 400px;
top: 50px;
width: 100px;
height: 300px;
background: black;
}
</style>
</head>
<body>
<script>
var ss = [];
for (var i = 0; i < 1000; ++i) {
ss.push(i);
}
document.write("<div id='t'>" + ss.join(" ") + "</div>");
</script>
<div id="cover"></div>
</body>
</html>

View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Padding and Scrollbar Placement Test</title>
<style>input, textarea { border-radius:0; background:none; border:none; }</style>
<style type="text/css">
#t {
display: block;
position: absolute;
left: 50px;
top: 50px;
padding: 50px;
width: 300px;
height: 100px;
border: 5px solid red;
margin: 10px;
overflow: scroll;
font-family: verdana;
resize: none;
color: black;
z-index: 0; /* force a stacking context */
}
#cover {
position: absolute;
left: 400px;
top: 50px;
width: 100px;
height: 300px;
background: black;
}
</style>
</head>
<body>
<script>
var ss = [];
for (var i = 0; i < 1000; ++i) {
ss.push(i);
}
document.write("<textarea id='t'>" + ss.join(" ") + "</textarea>");
</script>
<div id="cover"></div>
</body>
</html>

View File

@ -10,3 +10,4 @@ skip-if(B2G) fails-if(Android) fails-if(gtk2Widget) != rtl.html no-resize.html #
== rtl.html rtl-dynamic-style.html
== rtl.html in-dynamic-rtl-doc.html
== setvalue-framereconstruction-1.html setvalue-framereconstruction-ref.html
== padding-scrollbar-placement.html padding-scrollbar-placement-ref.html

View File

@ -54,7 +54,7 @@ input {
/* The sum of border-top, border-bottom, padding-top, padding-bottom
must be the same here, for buttons, and for <select> (including its
internal padding magic) */
padding: 1px 0 1px 0;
padding: 1px;
border: 2px inset ThreeDFace;
background-color: -moz-Field;
color: -moz-FieldText;
@ -97,6 +97,8 @@ input::-moz-placeholder {
textarea {
margin: 1px 0 1px 0;
border: 2px inset ThreeDFace;
/* The 1px horizontal padding is for parity with Win/IE */
padding: 0px 1px;
background-color: -moz-Field;
color: -moz-FieldText;
font: medium -moz-fixed;
@ -127,12 +129,7 @@ textarea::-moz-placeholder {
white-space: pre;
overflow: auto;
border: 0px !important;
/*
* The 1px horizontal padding is for parity with Win/IE.
* We need to mark it !important to make sure it can't be changed on the
* placeholder.
*/
padding: 0px 1px !important;
padding: inherit !important;
margin: 0px;
text-decoration: inherit;
-moz-text-decoration-color: inherit;

View File

@ -15,8 +15,8 @@ textbox {
cursor: text;
margin: 2px 4px;
border: 1px solid #555555;
padding: 2px 2px 3px;
-moz-padding-start: 4px;
padding: 2px 3px 3px;
-moz-padding-start: 5px;
background-color: white;
color: black;
}

View File

@ -14,7 +14,7 @@
/* .padded is used by autocomplete widgets that don't have an icon. Gross. -dwh */
textbox:not(.padded) {
cursor: default;
padding: 0;
padding: 0 1px;
}
textbox[enablehistory="true"] {

View File

@ -30,7 +30,7 @@ html|*.numberbox-input {
-moz-border-right-colors: ThreeDHighlight ThreeDLightShadow;
-moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow;
-moz-border-left-colors: ThreeDShadow ThreeDDarkShadow;
padding: 3px;
padding: 3px 4px;
}
textbox[hidespinbuttons="true"] > .numberbox-input-box {

View File

@ -20,8 +20,8 @@ textbox {
-moz-border-right-colors: ThreeDHighlight ThreeDLightShadow;
-moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow;
-moz-border-left-colors: ThreeDShadow ThreeDDarkShadow;
padding: 2px 2px 3px;
-moz-padding-start: 4px;
padding: 2px 3px 3px;
-moz-padding-start: 5px;
background-color: -moz-Field;
color: -moz-FieldText;
}
@ -60,7 +60,7 @@ textbox[disabled="true"] {
textbox.plain {
-moz-appearance: none !important;
background-color: transparent;
padding: 0px !important;
padding: 0px 1px !important;
margin: 0px !important;
border: none !important;
}

View File

@ -16,6 +16,7 @@ textbox[type="number"] {
html|*.numberbox-input {
text-align: right;
padding: 0 1px !important;
}
.numberbox-input-box {

View File

@ -16,8 +16,7 @@ textbox {
-moz-border-left-colors: transparent #888888 #000000;
border-top-right-radius: 2px;
border-bottom-left-radius: 2px;
/*padding: 1px 0px 1px 2px ;*/
padding: 0px;
padding: 0px 1px;
background-color: -moz-Field;
color: -moz-FieldText;
}
@ -61,7 +60,7 @@ textbox[disabled="true"] {
textbox.plain {
-moz-appearance: none !important;
background-color: transparent;
padding: 0px !important;
padding: 0px 1px !important;
margin: 0px !important;
border: none !important;
}
@ -70,7 +69,7 @@ textbox.plain {
textbox[type="search"] {
-moz-appearance: searchfield;
padding: 1px;
padding: 1px 2px;
font-size: 12px;
}
@ -85,7 +84,7 @@ textbox[type="search"] {
}
textbox[type="search"].compact {
padding: 0;
padding: 0 1px;
font-size: 11px;
}

View File

@ -20,8 +20,8 @@ textbox {
-moz-border-right-colors: ThreeDHighlight ThreeDLightShadow;
-moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow;
-moz-border-left-colors: ThreeDShadow ThreeDDarkShadow;
padding: 2px 2px 3px;
-moz-padding-start: 4px;
padding: 2px 3px 3px;
-moz-padding-start: 5px;
background-color: -moz-Field;
color: -moz-FieldText;
}
@ -60,7 +60,7 @@ textbox[disabled="true"] {
textbox.plain {
-moz-appearance: none !important;
background-color: transparent;
padding: 0px !important;
padding: 0px 1px !important;
margin: 0px !important;
border: none !important;
}