mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
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:
parent
74b5546df5
commit
bd103dbad3
@ -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();
|
||||
|
@ -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 {
|
||||
|
@ -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());
|
||||
|
@ -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
|
||||
|
12
layout/reftests/forms/input/text/intrinsic-size-ref.html
Normal file
12
layout/reftests/forms/input/text/intrinsic-size-ref.html
Normal 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>
|
12
layout/reftests/forms/input/text/intrinsic-size.html
Normal file
12
layout/reftests/forms/input/text/intrinsic-size.html
Normal 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>
|
@ -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
|
||||
|
@ -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>
|
@ -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>
|
@ -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
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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"] {
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -16,6 +16,7 @@ textbox[type="number"] {
|
||||
|
||||
html|*.numberbox-input {
|
||||
text-align: right;
|
||||
padding: 0 1px !important;
|
||||
}
|
||||
|
||||
.numberbox-input-box {
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user