Bug 52500 - Allow styling <input type='file'> like any other form control. r=bz

--HG--
rename : layout/reftests/forms/input-file-width-clip-ref.html => layout/reftests/forms/input/file/input-file-width-clip-ref.html
rename : layout/reftests/forms/input-file-width-clip-1.html => layout/reftests/forms/input/file/input-file-width-clip.html
This commit is contained in:
Mounir Lamouri 2013-05-17 18:40:14 +01:00
parent fc3b6fc07a
commit 7d8984e3e9
13 changed files with 80 additions and 77 deletions

View File

@ -343,42 +343,7 @@ nsFileControlFrame::BuildDisplayList(nsDisplayListBuilder* aBuilder,
const nsRect& aDirtyRect,
const nsDisplayListSet& aLists)
{
// box-shadow
if (StyleBorder()->mBoxShadow) {
aLists.BorderBackground()->AppendNewToTop(new (aBuilder)
nsDisplayBoxShadowOuter(aBuilder, this));
}
// Clip height only
nsRect clipRect(aBuilder->ToReferenceFrame(this), GetSize());
clipRect.width = GetVisualOverflowRect().XMost();
nsDisplayListCollection tempList;
{
DisplayListClipState::AutoSaveRestore clipState(aBuilder);
clipState.ClipContainingBlockDescendants(clipRect, nullptr);
// Our background is inherited to the text input, and we don't really want to
// paint it or out padding and borders (which we never have anyway, per
// styles in forms.css) -- doing it just makes us look ugly in some cases and
// has no effect in others.
nsBlockFrame::BuildDisplayList(aBuilder, aDirtyRect, tempList);
}
tempList.BorderBackground()->DeleteAll();
tempList.MoveTo(aLists);
// Disabled file controls don't pass mouse events to their children, so we
// put an invisible item in the display list above the children
// just to catch events
nsEventStates eventStates = mContent->AsElement()->State();
if (eventStates.HasState(NS_EVENT_STATE_DISABLED) && IsVisibleForPainting(aBuilder)) {
aLists.Content()->AppendNewToTop(
new (aBuilder) nsDisplayEventReceiver(aBuilder, this));
}
DisplaySelectionOverlay(aBuilder, aLists.Content());
BuildDisplayListForInline(aBuilder, aDirtyRect, aLists);
}
#ifdef ACCESSIBILITY

View File

@ -2,18 +2,15 @@
<?xml-stylesheet href="style.css" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<html:style>
window {
background-color: blue;
}
</html:style>
<vbox>
<html:style>
window {
background-color: blue;
}
</html:style>
<html:div class='file'>
<html:button>Browse&#8230;</html:button><label value="No file selected."/>
</html:div>
<html:br/>
<html:div class='file'>
<html:button>Browse&#8230;</html:button><label value="No files selected."/>
</html:div>
</vbox>
</window>

View File

@ -7,7 +7,5 @@
</style>
<body>
<input type='file'>
<br>
<input type='file' multiple>
</body>
</html>

View File

@ -3,15 +3,15 @@
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<vbox>
<html:style>
vbox {
margin-right: 8px;
}
</html:style>
<html:div dir='rtl'>
<html:div class='file' dir='rtl'>
<html:button>Browse&#8230;</html:button><label value="No file selected."/>
</html:div>
</html:div>
<html:div dir='rtl'>
<html:div class='file' dir='rtl'>
<html:button>Browse&#8230;</html:button><label value="No files selected."/>
</html:div>
</html:div>
</vbox>
</window>

View File

@ -4,8 +4,5 @@
<div dir='rtl'>
<input type='file'>
</div>
<div dir='rtl'>
<input type='file' multiple>
</div>
</body>
</html>

View File

@ -0,0 +1,25 @@
<?xml version="1.0"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<hbox>
<html:style>
.file {
background-color: blue;
border: 1px red solid;
width: 400px;
padding: 2px;
margin: 5px;
display: inline-block;
}
.file > label {
/* color only applies to the label */
color: white;
}
</html:style>
<html:div class='file'>
<html:button>Browse&#8230;</html:button><label value="No file selected."/>
</html:div>
</hbox>
</window>

View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<style>
input {
background-color: blue;
border: 1px red solid;
width: 400px;
color: white;
padding: 2px;
margin: 5px;
}
</style>
<body>
<input type='file'>
</body>
</html>

View File

@ -1,4 +1,7 @@
fails-if(B2G) fuzzy-if(OSX==10.6,8,128) == input-file-simple.html input-file-simple-ref.xul # b2g failure is bug 855352
fails-if(B2G) fuzzy-if(OSX==10.6,8,114) == input-file-rtl.html input-file-rtl-ref.xul # b2g failure is bug 855352
fails-if(B2G) fuzzy-if(OSX==10.6,8,128) == input-file-size.html input-file-simple-ref.xul # b2g failure is bug 855352
fails-if(B2G) fuzzy-if(OSX==10.6,8,128) == input-file-background.html input-file-background-ref.xul # b2g failure is bug 855352
# B2G failures: bug 855352.
fails-if(B2G) fuzzy-if(OSX==10.6,8,128) == input-file-simple.html input-file-simple-ref.xul
fails-if(B2G) fuzzy-if(OSX==10.6,8,64) == input-file-rtl.html input-file-rtl-ref.xul
fails-if(B2G) fuzzy-if(OSX==10.6,8,128) == input-file-size.html input-file-simple-ref.xul
fails-if(B2G) fuzzy-if(OSX==10.6,8,64) == input-file-background.html input-file-background-ref.xul
fails-if(B2G) == input-file-style.html input-file-style-ref.xul
!= input-file-width-clip.html input-file-width-clip-ref.html

View File

@ -1,10 +1,10 @@
vbox {
margin: 8px;
vbox, hbox {
margin-top: 8px;
margin-left: 8px;
display: block;
}
.file {
display: inline;
/* Copy of input properties that apply of forms.css below this */
color: -moz-FieldText;
font: -moz-field;
@ -19,22 +19,23 @@ vbox {
text-shadow: none;
/* Copy of the type=file part of forms.css below this */
-moz-appearance: none;
display: inline; /* this one isn't really a copy... */
white-space: nowrap;
cursor: default;
overflow:hidden;
-moz-appearance: none;
-moz-binding: none;
cursor: default;
border: none;
background-color: none;
padding: 0 !important;
background-color: transparent;
padding: 0;
}
.file > label {
display: inline-block;
/* Copy from forms.css below this */
width: 12em;
min-width: 12em;
-moz-padding-start: 5px;
color: inherit;

View File

@ -2,7 +2,6 @@
== checkbox-label-dynamic.html checkbox-label-dynamic-ref.html
skip-if(B2G) fails-if(Android) == checkbox-radio-stretched.html checkbox-radio-stretched-ref.html # test for bug 464589
skip-if(B2G) == input-file-width-clip-1.html input-file-width-clip-ref.html # test for bug 409587
== input-hidden-border.html about:blank
== input-text-bounds-1.html input-text-bounds-1-ref.html
== input-text-size-1.html input-text-size-1-ref.html

View File

@ -411,20 +411,22 @@ input[type="image"]:-moz-focusring {
/* file selector */
input[type="file"] {
-moz-appearance: none;
display: inline-block;
white-space: nowrap;
cursor: default;
overflow:hidden;
/* Revert rules which apply on all inputs. */
-moz-appearance: none;
-moz-binding: none;
cursor: default;
border: none;
background-color: transparent;
/* TODO: check why. */
padding: 0 !important;
padding: 0;
}
input[type="file"] > xul|label {
width: 12em;
min-width: 12em;
-moz-padding-start: 5px;
color: inherit;