corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 840820 - Make <input type=range> display as a vertical slider if it has an orient="vertical" attribute. r=mounir

Browse Source
This commit is contained in:
Jonathan Watt
2013-03-26 13:54:05 +00:00
parent 1f22159fb4
commit 12caac1916
2 changed files with 46 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
layout/forms/nsRangeFrame.cpp
View File

@@ -457,27 +457,31 @@ nsRangeFrame::AttributeChanged(int32_t aNameSpaceID,
NS_ASSERTION(mTrackDiv, "The track div must exist!");
NS_ASSERTION(mThumbDiv, "The thumb div must exist!");
if (aNameSpaceID == kNameSpaceID_None &&
(aAttribute == nsGkAtoms::value ||
aAttribute == nsGkAtoms::min ||
aAttribute == nsGkAtoms::max ||
aAttribute == nsGkAtoms::step)) {
// We want to update the position of the thumb, except in one special case:
// If the value attribute is being set, it is possible that we are in the
// middle of a type change away from type=range, under the
// SetAttr(..., nsGkAtoms::value, ...) call in nsHTMLInputElement::
// HandleTypeChange. In that case the nsHTMLInputElement's type will
// already have changed, and if we call UpdateThumbPositionForValueChange()
// we'll fail the asserts under that call that check the type of our
// nsHTMLInputElement. Given that we're changing away from being a range
// and this frame will shortly be destroyed, there's no point in calling
// UpdateThumbPositionForValueChange() anyway.
MOZ_ASSERT(mContent->IsHTML(nsGkAtoms::input), "bad cast");
bool typeIsRange = static_cast<nsHTMLInputElement*>(mContent)->GetType() ==
NS_FORM_INPUT_RANGE;
MOZ_ASSERT(typeIsRange || aAttribute == nsGkAtoms::value, "why?");
if (typeIsRange) {
UpdateThumbPositionForValueChange();
if (aNameSpaceID == kNameSpaceID_None) {
if (aAttribute == nsGkAtoms::value ||
aAttribute == nsGkAtoms::min ||
aAttribute == nsGkAtoms::max ||
aAttribute == nsGkAtoms::step) {
// We want to update the position of the thumb, except in one special
// case: If the value attribute is being set, it is possible that we are
// in the middle of a type change away from type=range, under the
// SetAttr(..., nsGkAtoms::value, ...) call in nsHTMLInputElement::
// HandleTypeChange. In that case the nsHTMLInputElement's type will
// already have changed, and if we call UpdateThumbPositionForValueChange()
// we'll fail the asserts under that call that check the type of our
// nsHTMLInputElement. Given that we're changing away from being a range
// and this frame will shortly be destroyed, there's no point in calling
// UpdateThumbPositionForValueChange() anyway.
MOZ_ASSERT(mContent->IsHTML(nsGkAtoms::input), "bad cast");
bool typeIsRange = static_cast<nsHTMLInputElement*>(mContent)->GetType() ==
NS_FORM_INPUT_RANGE;
MOZ_ASSERT(typeIsRange || aAttribute == nsGkAtoms::value, "why?");
if (typeIsRange) {
UpdateThumbPositionForValueChange();
}
} else if (aAttribute == nsGkAtoms::orient) {
PresContext()->PresShell()->FrameNeedsReflow(this, nsIPresShell::eResize,
NS_FRAME_IS_DIRTY);
}
}
@@ -554,7 +558,9 @@ nsRangeFrame::GetPrefWidth(nsRenderingContext *aRenderingContext)
bool
nsRangeFrame::IsHorizontal(const nsSize *aFrameSizeOverride) const
{
return true; // until we decide how to support vertical range (bug 840820)
nsHTMLInputElement* element = static_cast<nsHTMLInputElement*>(mContent);
return !element->AttrValueIs(kNameSpaceID_None, nsGkAtoms::orient,
nsGkAtoms::vertical, eCaseMatters);
}
double

22
layout/style/forms.css
View File

@@ -717,9 +717,9 @@ meter {
background: -moz-linear-gradient(top, #f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
}
input[type="range"] {
input[type=range] {
-moz-appearance: none;
display: inline-block !important;
display: inline-block;
width: 12em;
height: 1.3em;
margin: 0 0.7em;
@@ -732,6 +732,11 @@ input[type="range"] {
-moz-user-select: none ! important;
}
input[type=range][orient=vertical] {
width: 1.3em;
height: 12em;
}
/**
* Layout handles positioning of this pseudo-element specially (so that content
* authors can concentrate on styling the thumb without worrying about the
@@ -741,7 +746,7 @@ input[type="range"] {
* If content authors want to have a vertical range, they will also need to
* set the width/height of this pseudo-element.
*/
::-moz-range-track {
input[type=range]::-moz-range-track {
/* Prevent styling that would change the type of frame we construct. */
display: inline-block !important;
float: none !important;
@@ -756,13 +761,22 @@ input[type="range"] {
-moz-user-select: none ! important;
}
input[type=range][orient=vertical]::-moz-range-track {
border-top: none;
border-bottom: none;
border-left: solid 0.1em lightgrey;
border-right: solid 0.1em lightgrey;
width: 0.2em;
height: 100%;
}
/**
* Layout handles positioning of this pseudo-element specially (so that content
* authors can concentrate on styling the thumb without worrying about the
* logic to position it). Specifically the 'margin', 'top' and 'left'
* properties are ignored.
*/
::-moz-range-thumb {
input[type=range]::-moz-range-thumb {
/* Prevent styling that would change the type of frame we construct. */
display: inline-block !important;
float: none !important;