mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-30 00:01:50 +00:00
Bug 638540 - Progress element should be shown vertically when -moz-orient value is 'vertical'. r=roc
--HG-- rename : layout/reftests/forms/progress/bar-pseudo-element-ref.html => layout/reftests/forms/progress/bar-pseudo-element-vertical-ref.html rename : layout/reftests/forms/progress/bar-pseudo-element.html => layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl.html rename : layout/reftests/forms/progress/bar-pseudo-element.html => layout/reftests/forms/progress/bar-pseudo-element-vertical.html rename : layout/reftests/forms/progress/indeterminate-style-width-ref.html => layout/reftests/forms/progress/indeterminate-style-height-ref.html rename : layout/reftests/forms/progress/indeterminate-style-width.html => layout/reftests/forms/progress/indeterminate-style-height.html rename : layout/reftests/forms/progress/margin-padding-ref.html => layout/reftests/forms/progress/margin-padding-vertical-ref.html rename : layout/reftests/forms/progress/margin-padding-rtl-ref.html => layout/reftests/forms/progress/margin-padding-vertical-rtl-ref.html rename : layout/reftests/forms/progress/margin-padding-rtl.html => layout/reftests/forms/progress/margin-padding-vertical-rtl.html rename : layout/reftests/forms/progress/margin-padding.html => layout/reftests/forms/progress/margin-padding-vertical.html rename : layout/reftests/forms/progress/values-ref.html => layout/reftests/forms/progress/values-vertical-ref.html rename : layout/reftests/forms/progress/values-ref.html => layout/reftests/forms/progress/values-vertical-rtl-ref.html rename : layout/reftests/forms/progress/values.html => layout/reftests/forms/progress/values-vertical-rtl.html rename : layout/reftests/forms/progress/values.html => layout/reftests/forms/progress/values-vertical.html
This commit is contained in:
Mounir Lamouri
parent
d58b2950df
commit
c5a1b0eda2
@ -171,10 +171,12 @@ nsProgressFrame::ReflowBarFrame(nsIFrame* aBarFrame,
|
||||
const nsHTMLReflowState& aReflowState,
|
||||
nsReflowStatus& aStatus)
|
||||
{
|
||||
bool vertical = GetStyleDisplay()->mOrient == NS_STYLE_ORIENT_VERTICAL;
|
||||
nsHTMLReflowState reflowState(aPresContext, aReflowState, aBarFrame,
|
||||
nsSize(aReflowState.ComputedWidth(),
|
||||
NS_UNCONSTRAINEDSIZE));
|
||||
nscoord width = aReflowState.ComputedWidth();
|
||||
nscoord size = vertical ? aReflowState.ComputedHeight()
|
||||
: aReflowState.ComputedWidth();
|
||||
nscoord xoffset = aReflowState.mComputedBorderPadding.left;
|
||||
nscoord yoffset = aReflowState.mComputedBorderPadding.top;
|
||||
|
||||
@ -183,28 +185,43 @@ nsProgressFrame::ReflowBarFrame(nsIFrame* aBarFrame,
|
||||
do_QueryInterface(mContent);
|
||||
progressElement->GetPosition(&position);
|
||||
|
||||
// Force the bar's width to match the current progress.
|
||||
// When indeterminate, the progress' width will be 100%.
|
||||
// Force the bar's size to match the current progress.
|
||||
// When indeterminate, the progress' size will be 100%.
|
||||
if (position >= 0.0) {
|
||||
width *= position;
|
||||
size *= position;
|
||||
}
|
||||
|
||||
if (GetStyleVisibility()->mDirection == NS_STYLE_DIRECTION_RTL) {
|
||||
xoffset += aReflowState.ComputedWidth() - width;
|
||||
if (!vertical && GetStyleVisibility()->mDirection == NS_STYLE_DIRECTION_RTL) {
|
||||
xoffset += aReflowState.ComputedWidth() - size;
|
||||
}
|
||||
|
||||
// The bar width is fixed in these cases:
|
||||
// - the progress position is determined: the bar width is fixed according
|
||||
// The bar size is fixed in these cases:
|
||||
// - the progress position is determined: the bar size is fixed according
|
||||
// to it's value.
|
||||
// - the progress position is indeterminate and the bar appearance should be
|
||||
// shown as native: the bar width is forced to 100%.
|
||||
// shown as native: the bar size is forced to 100%.
|
||||
// Otherwise (when the progress is indeterminate and the bar appearance isn't
|
||||
// native), the bar width isn't fixed and can be set by the author.
|
||||
// native), the bar size isn't fixed and can be set by the author.
|
||||
if (position != -1 || ShouldUseNativeStyle()) {
|
||||
width -= reflowState.mComputedMargin.LeftRight() +
|
||||
if (vertical) {
|
||||
// We want the bar to begin at the bottom.
|
||||
yoffset += aReflowState.ComputedHeight() - size;
|
||||
|
||||
size -= reflowState.mComputedMargin.TopBottom() +
|
||||
reflowState.mComputedBorderPadding.TopBottom();
|
||||
size = NS_MAX(size, 0);
|
||||
reflowState.SetComputedHeight(size);
|
||||
} else {
|
||||
size -= reflowState.mComputedMargin.LeftRight() +
|
||||
reflowState.mComputedBorderPadding.LeftRight();
|
||||
width = NS_MAX(width, 0);
|
||||
reflowState.SetComputedWidth(width);
|
||||
size = NS_MAX(size, 0);
|
||||
reflowState.SetComputedWidth(size);
|
||||
}
|
||||
} else if (vertical) {
|
||||
// For vertical progress bars, we need to position the bar specificly when
|
||||
// the width isn't constrained (position == -1 and !ShouldUseNativeStyle())
|
||||
// because aReflowState.ComputedHeight() - size == 0.
|
||||
yoffset += aReflowState.ComputedHeight() - reflowState.ComputedHeight();
|
||||
}
|
||||
|
||||
xoffset += reflowState.mComputedMargin.left;
|
||||
|
||||
@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel='stylesheet' type='text/css' href='style.css'>
|
||||
<style>
|
||||
.progress-element { margin: 10px; }
|
||||
body > div:nth-child(1) > .progress-bar { position: relative; top: 4px; left: 4px;
|
||||
height: -moz-calc(100% - 8px); }
|
||||
body > div:nth-child(2) > .progress-bar { }
|
||||
body > div:nth-child(3) > .progress-bar { position: relative; top: 4px; left: 4px;
|
||||
height: -moz-calc(100% - 8px); }
|
||||
body > div:nth-child(4) > .progress-bar { position: relative; top: 10px; height: -moz-calc(100% - 10px); }
|
||||
body > div:nth-child(5) > .progress-bar { }
|
||||
body > div:nth-child(6) > .progress-bar { height: -moz-calc(100% - 10px); }
|
||||
body > div:nth-child(7) > .progress-bar { position: relative; left: 10px; }
|
||||
body > div:nth-child(8) > .progress-bar { }
|
||||
body > div:nth-child(9) > .progress-bar { }
|
||||
body > div:nth-child(10) > .progress-bar { }
|
||||
body > div:nth-child(11) > .progress-bar { }
|
||||
/* 12 - 15 should have 100% width, no need to specify. */
|
||||
body > div:nth-child(16) > .progress-bar { position: relative; top: 64px; left: 64px;
|
||||
height: -moz-calc(100% + 128px - 1em); }
|
||||
</style>
|
||||
<body>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel='stylesheet' type='text/css' href='style.css'>
|
||||
<style>
|
||||
.progress-element { margin: 10px; }
|
||||
body > div:nth-child(1) > .progress-bar { position: relative; top: 4px; left: 4px;
|
||||
height: -moz-calc(100% - 8px); }
|
||||
body > div:nth-child(2) > .progress-bar { }
|
||||
body > div:nth-child(3) > .progress-bar { position: relative; top: 4px; left: 4px;
|
||||
height: -moz-calc(100% - 8px); }
|
||||
body > div:nth-child(4) > .progress-bar { position: relative; top: 10px; height: -moz-calc(100% - 10px); }
|
||||
body > div:nth-child(5) > .progress-bar { }
|
||||
body > div:nth-child(6) > .progress-bar { height: -moz-calc(100% - 10px); }
|
||||
body > div:nth-child(7) > .progress-bar { position: relative; left: 10px; }
|
||||
body > div:nth-child(8) > .progress-bar { }
|
||||
body > div:nth-child(9) > .progress-bar { }
|
||||
body > div:nth-child(10) > .progress-bar { }
|
||||
body > div:nth-child(11) > .progress-bar { }
|
||||
/* 12 - 15 should have 100% width, no need to specify. */
|
||||
body > div:nth-child(16) > .progress-bar { position: relative; top: 64px; left: 64px;
|
||||
height: -moz-calc(100% + 128px - 1em); }
|
||||
</style>
|
||||
<body dir='rtl'>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel='stylesheet' type='text/css' href='style.css'>
|
||||
<style>
|
||||
progress {
|
||||
margin: 10px;
|
||||
-moz-orient: vertical;
|
||||
}
|
||||
body > progress:nth-child(1)::-moz-progress-bar { margin: 4px; padding: 0px; }
|
||||
body > progress:nth-child(2)::-moz-progress-bar { margin: 0px; padding: 4px; }
|
||||
body > progress:nth-child(3)::-moz-progress-bar { margin: 4px; padding: 4px; }
|
||||
body > progress:nth-child(4)::-moz-progress-bar { margin: 10px 0px 0px 0px; padding: 0px; }
|
||||
body > progress:nth-child(5)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
|
||||
body > progress:nth-child(6)::-moz-progress-bar { margin: 0px 0px 10px 0px; padding: 0px; }
|
||||
body > progress:nth-child(7)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
|
||||
body > progress:nth-child(8)::-moz-progress-bar { margin: 0px; padding: 10px 0px 0px 0px; }
|
||||
body > progress:nth-child(9)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
|
||||
body > progress:nth-child(10)::-moz-progress-bar { margin: 0px; padding: 0px 0px 10px 0px; }
|
||||
body > progress:nth-child(11)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
|
||||
body > progress:nth-child(12)::-moz-progress-bar { height: 1000px; }
|
||||
body > progress:nth-child(13)::-moz-progress-bar { height: 10px; }
|
||||
body > progress:nth-child(14)::-moz-progress-bar { height: 10%; }
|
||||
body > progress:nth-child(15)::-moz-progress-bar { height: 200%; }
|
||||
body > progress:nth-child(16)::-moz-progress-bar { margin: 64px; padding: 64px; }
|
||||
</style>
|
||||
<body dir='rtl'>
|
||||
<!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<!-- Those will be used to change width. -->
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel='stylesheet' type='text/css' href='style.css'>
|
||||
<style>
|
||||
progress {
|
||||
margin: 10px;
|
||||
-moz-orient: vertical;
|
||||
}
|
||||
body > progress:nth-child(1)::-moz-progress-bar { margin: 4px; padding: 0px; }
|
||||
body > progress:nth-child(2)::-moz-progress-bar { margin: 0px; padding: 4px; }
|
||||
body > progress:nth-child(3)::-moz-progress-bar { margin: 4px; padding: 4px; }
|
||||
body > progress:nth-child(4)::-moz-progress-bar { margin: 10px 0px 0px 0px; padding: 0px; }
|
||||
body > progress:nth-child(5)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
|
||||
body > progress:nth-child(6)::-moz-progress-bar { margin: 0px 0px 10px 0px; padding: 0px; }
|
||||
body > progress:nth-child(7)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
|
||||
body > progress:nth-child(8)::-moz-progress-bar { margin: 0px; padding: 10px 0px 0px 0px; }
|
||||
body > progress:nth-child(9)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
|
||||
body > progress:nth-child(10)::-moz-progress-bar { margin: 0px; padding: 0px 0px 10px 0px; }
|
||||
body > progress:nth-child(11)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
|
||||
body > progress:nth-child(12)::-moz-progress-bar { height: 1000px; }
|
||||
body > progress:nth-child(13)::-moz-progress-bar { height: 10px; }
|
||||
body > progress:nth-child(14)::-moz-progress-bar { height: 10%; }
|
||||
body > progress:nth-child(15)::-moz-progress-bar { height: 200%; }
|
||||
body > progress:nth-child(16)::-moz-progress-bar { margin: 64px; padding: 64px; }
|
||||
</style>
|
||||
<body>
|
||||
<!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<!-- Those will be used to change width. -->
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel='stylesheet' type='text/css' href='style.css'>
|
||||
<style>
|
||||
div.progress-element {
|
||||
height: 12em;
|
||||
width: 2em;
|
||||
}
|
||||
div.progress-bar {
|
||||
height: 100%;
|
||||
}
|
||||
body > div:nth-child(1) > .progress-bar { position: relative;
|
||||
top: -moz-calc(12em - 20px); height: 20px; }
|
||||
body > div:nth-child(2) > .progress-bar { position: relative;
|
||||
top: -moz-calc(12em - 0px); height: 0px; }
|
||||
body > div:nth-child(3) > .progress-bar { position: relative;
|
||||
top: -moz-calc(12em - 50%); height: 50%; }
|
||||
body > div:nth-child(4) > .progress-bar { position: relative;
|
||||
top: -moz-calc(12em - 1em); height: 1em; }
|
||||
body > div:nth-child(5) > .progress-bar { position: relative;
|
||||
top: -moz-calc(12em - 100%); height: 100%; }
|
||||
</style>
|
||||
<body>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel='stylesheet' type='text/css' href='style.css'>
|
||||
<style>
|
||||
progress {
|
||||
-moz-orient: vertical;
|
||||
height: 12em;
|
||||
width: 2em;
|
||||
}
|
||||
body > progress:nth-child(1)::-moz-progress-bar { height: 20px; }
|
||||
body > progress:nth-child(2)::-moz-progress-bar { height: 0px; }
|
||||
body > progress:nth-child(3)::-moz-progress-bar { height: 50%; }
|
||||
body > progress:nth-child(4)::-moz-progress-bar { height: 1em; }
|
||||
/* last one is for the default value: width=100%. */
|
||||
</style>
|
||||
<body>
|
||||
<!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
|
||||
<progress></progress>
|
||||
<progress></progress>
|
||||
<progress></progress>
|
||||
<progress></progress>
|
||||
<progress></progress>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,88 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel='stylesheet' type='text/css' href='style.css'>
|
||||
<style>
|
||||
body > div:nth-child(1) { margin: 10px; padding: 0px; }
|
||||
body > div:nth-child(2) { margin: 0px; padding: 10px; }
|
||||
body > div:nth-child(3) { margin: 10px; padding: 10px; }
|
||||
body > div:nth-child(4) { margin: 5px; padding: 5px; }
|
||||
body > div:nth-child(5) { margin: 50px; padding: 50px; }
|
||||
body > div:nth-child(6) { margin: 100px; padding: 100px; }
|
||||
body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
|
||||
body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
|
||||
body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
|
||||
body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
|
||||
body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
|
||||
body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
|
||||
body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
|
||||
body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
|
||||
body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
|
||||
body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
|
||||
</style>
|
||||
<body>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,88 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel='stylesheet' type='text/css' href='style.css'>
|
||||
<style>
|
||||
body > div:nth-child(1) { margin: 10px; padding: 0px; }
|
||||
body > div:nth-child(2) { margin: 0px; padding: 10px; }
|
||||
body > div:nth-child(3) { margin: 10px; padding: 10px; }
|
||||
body > div:nth-child(4) { margin: 5px; padding: 5px; }
|
||||
body > div:nth-child(5) { margin: 50px; padding: 50px; }
|
||||
body > div:nth-child(6) { margin: 100px; padding: 100px; }
|
||||
body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
|
||||
body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
|
||||
body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
|
||||
body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
|
||||
body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
|
||||
body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
|
||||
body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
|
||||
body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
|
||||
body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
|
||||
body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
|
||||
</style>
|
||||
<body dir='rtl'>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel='stylesheet' type='text/css' href='style.css'>
|
||||
<style>
|
||||
progress {
|
||||
-moz-orient: vertical;
|
||||
}
|
||||
progress:nth-child(1) { margin: 10px; padding: 0px; }
|
||||
progress:nth-child(2) { margin: 0px; padding: 10px; }
|
||||
progress:nth-child(3) { margin: 10px; padding: 10px; }
|
||||
progress:nth-child(4) { margin: 5px; padding: 5px; }
|
||||
progress:nth-child(5) { margin: 50px; padding: 50px; }
|
||||
progress:nth-child(6) { margin: 100px; padding: 100px; }
|
||||
progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
|
||||
progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
|
||||
progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
|
||||
progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
|
||||
progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
|
||||
progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
|
||||
progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
|
||||
progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
|
||||
progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
|
||||
progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
|
||||
</style>
|
||||
<body dir='rtl'>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
</body>
|
||||
</html>
|
||||
43
layout/reftests/forms/progress/margin-padding-vertical.html
Normal file
43
layout/reftests/forms/progress/margin-padding-vertical.html
Normal file
@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel='stylesheet' type='text/css' href='style.css'>
|
||||
<style>
|
||||
progress {
|
||||
-moz-orient: vertical;
|
||||
}
|
||||
progress:nth-child(1) { margin: 10px; padding: 0px; }
|
||||
progress:nth-child(2) { margin: 0px; padding: 10px; }
|
||||
progress:nth-child(3) { margin: 10px; padding: 10px; }
|
||||
progress:nth-child(4) { margin: 5px; padding: 5px; }
|
||||
progress:nth-child(5) { margin: 50px; padding: 50px; }
|
||||
progress:nth-child(6) { margin: 100px; padding: 100px; }
|
||||
progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
|
||||
progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
|
||||
progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
|
||||
progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
|
||||
progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
|
||||
progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
|
||||
progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
|
||||
progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
|
||||
progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
|
||||
progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
|
||||
</style>
|
||||
<body>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
<progress value='1'></progress>
|
||||
</body>
|
||||
</html>
|
||||
@ -6,6 +6,15 @@
|
||||
== bar-pseudo-element-rtl.html bar-pseudo-element-rtl-ref.html
|
||||
== indeterminate-style-width.html indeterminate-style-width-ref.html
|
||||
|
||||
# vertical tests
|
||||
== values-vertical.html values-vertical-ref.html
|
||||
== values-vertical-rtl.html values-vertical-rtl-ref.html
|
||||
== margin-padding-vertical.html margin-padding-vertical-ref.html
|
||||
== margin-padding-vertical-rtl.html margin-padding-vertical-rtl-ref.html
|
||||
== bar-pseudo-element-vertical.html bar-pseudo-element-vertical-ref.html
|
||||
== bar-pseudo-element-vertical-rtl.html bar-pseudo-element-vertical-rtl-ref.html
|
||||
== indeterminate-style-height.html indeterminate-style-height-ref.html
|
||||
|
||||
# The following test is disabled but kept in the repository because the
|
||||
# transformations will not behave exactly the same for <progress> and two divs.
|
||||
# However, it would be possible to manually check those.
|
||||
|
||||
58
layout/reftests/forms/progress/values-vertical-ref.html
Normal file
58
layout/reftests/forms/progress/values-vertical-ref.html
Normal file
@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel='stylesheet' type='text/css' href='style.css'>
|
||||
<style>
|
||||
div:nth-child(1) > .progress-bar { position: relative; top: 0%; height: 100%; }
|
||||
div:nth-child(2) > .progress-bar { position: relative; top: 100%; height: 0%; }
|
||||
div:nth-child(3) > .progress-bar { position: relative; top: 90%; height: 10%; }
|
||||
div:nth-child(4) > .progress-bar { position: relative; top: 50%; height: 50%; }
|
||||
div:nth-child(5) > .progress-bar { position: relative; top: 100%; height: 0%; }
|
||||
div:nth-child(6) > .progress-bar { position: relative; top: 0%; height: 100%; }
|
||||
div:nth-child(7) > .progress-bar { position: relative; top: 58%; height: 42%; }
|
||||
div:nth-child(8) > .progress-bar { position: relative; top: 0%; height: 100%; }
|
||||
div:nth-child(9) > .progress-bar { position: relative; top: 0%; height: 100%; }
|
||||
div:nth-child(10) > .progress-bar { position: relative; top: 90%; height: 10%; }
|
||||
</style>
|
||||
<body>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
58
layout/reftests/forms/progress/values-vertical-rtl-ref.html
Normal file
58
layout/reftests/forms/progress/values-vertical-rtl-ref.html
Normal file
@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel='stylesheet' type='text/css' href='style.css'>
|
||||
<style>
|
||||
div:nth-child(1) > .progress-bar { position: relative; top: 0%; height: 100%; }
|
||||
div:nth-child(2) > .progress-bar { position: relative; top: 100%; height: 0%; }
|
||||
div:nth-child(3) > .progress-bar { position: relative; top: 90%; height: 10%; }
|
||||
div:nth-child(4) > .progress-bar { position: relative; top: 50%; height: 50%; }
|
||||
div:nth-child(5) > .progress-bar { position: relative; top: 100%; height: 0%; }
|
||||
div:nth-child(6) > .progress-bar { position: relative; top: 0%; height: 100%; }
|
||||
div:nth-child(7) > .progress-bar { position: relative; top: 58%; height: 42%; }
|
||||
div:nth-child(8) > .progress-bar { position: relative; top: 0%; height: 100%; }
|
||||
div:nth-child(9) > .progress-bar { position: relative; top: 0%; height: 100%; }
|
||||
div:nth-child(10) > .progress-bar { position: relative; top: 90%; height: 10%; }
|
||||
</style>
|
||||
<body dir='rtl'>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
21
layout/reftests/forms/progress/values-vertical-rtl.html
Normal file
21
layout/reftests/forms/progress/values-vertical-rtl.html
Normal file
@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel='stylesheet' type='text/css' href='style.css'>
|
||||
<style>
|
||||
progress {
|
||||
-moz-orient: vertical;
|
||||
}
|
||||
</style>
|
||||
<body dir='rtl'>
|
||||
<progress value="1.0"></progress>
|
||||
<progress value="0.0"></progress>
|
||||
<progress value="0.1"></progress>
|
||||
<progress value="0.5"></progress>
|
||||
<progress value="-1"></progress>
|
||||
<progress value="42"></progress>
|
||||
<progress value="42" max="100"></progress>
|
||||
<progress value="42" max="1"></progress>
|
||||
<progress value="42" max="-1"></progress>
|
||||
<progress value="0.1" max="-1"></progress>
|
||||
</body>
|
||||
</html>
|
||||
21
layout/reftests/forms/progress/values-vertical.html
Normal file
21
layout/reftests/forms/progress/values-vertical.html
Normal file
@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel='stylesheet' type='text/css' href='style.css'>
|
||||
<style>
|
||||
progress {
|
||||
-moz-orient: vertical;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<progress value="1.0"></progress>
|
||||
<progress value="0.0"></progress>
|
||||
<progress value="0.1"></progress>
|
||||
<progress value="0.5"></progress>
|
||||
<progress value="-1"></progress>
|
||||
<progress value="42"></progress>
|
||||
<progress value="42" max="100"></progress>
|
||||
<progress value="42" max="1"></progress>
|
||||
<progress value="42" max="-1"></progress>
|
||||
<progress value="0.1" max="-1"></progress>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user