Bug 633209 - Add ::-moz-progress-bar to access the anonymous div inside the progress element. r=dbaron

--HG--
rename : layout/reftests/forms/progress/margin-padding-ref.html => layout/reftests/forms/progress/margin-padding-rtl-ref.html
rename : layout/reftests/forms/progress/margin-padding.html => layout/reftests/forms/progress/margin-padding-rtl.html
This commit is contained in:
Mounir Lamouri 2011-05-06 11:52:05 +02:00
parent dc2475b233
commit 90e8e686e0
17 changed files with 406 additions and 12 deletions

View File

@ -71,6 +71,30 @@ nsProgressFrame::~nsProgressFrame()
{
}
NS_IMETHODIMP
nsProgressFrame::SetInitialChildList(nsIAtom* aListName,
nsFrameList& aChildList)
{
NS_ASSERTION(mBarDiv, "Progress bar div must exist!");
nsresult rv = nsHTMLContainerFrame::SetInitialChildList(aListName,
aChildList);
nsIFrame* barFrame = mBarDiv->GetPrimaryFrame();
nsCSSPseudoElements::Type pseudoType = nsCSSPseudoElements::ePseudo_mozProgressBar;
nsRefPtr<nsStyleContext> newStyleContext;
newStyleContext = barFrame->PresContext()->StyleSet()->
ResolvePseudoElementStyle(mContent->AsElement(), pseudoType,
barFrame->GetParent()->GetStyleContext());
if (newStyleContext) {
barFrame->SetStyleContext(newStyleContext);
}
return rv;
}
void
nsProgressFrame::DestroyFrom(nsIFrame* aDestructRoot)
{

View File

@ -54,6 +54,9 @@ public:
nsProgressFrame(nsStyleContext* aContext);
virtual ~nsProgressFrame();
NS_IMETHOD SetInitialChildList(nsIAtom* aListName,
nsFrameList& aChildList);
virtual void DestroyFrom(nsIFrame* aDestructRoot);
NS_IMETHOD Reflow(nsPresContext* aCX,

View File

@ -0,0 +1,105 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
body > div:nth-child(1) > .progress-bar { margin: 10px; padding: 0px; }
body > div:nth-child(2) > .progress-bar { margin: 0px; padding: 10px; }
body > div:nth-child(3) > .progress-bar { margin: 10px; padding: 10px; }
body > div:nth-child(4) > .progress-bar { margin: 5px; padding: 5px; }
body > div:nth-child(5) > .progress-bar { margin: 50px; padding: 50px; }
body > div:nth-child(6) > .progress-bar { margin: 100px; padding: 100px; }
body > div:nth-child(7) > .progress-bar { margin: 10px 0px 0px 0px; padding: 0px; }
body > div:nth-child(8) > .progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
body > div:nth-child(9) > .progress-bar { margin: 0px 0px 10px 0px; padding: 0px; }
body > div:nth-child(10) > .progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
body > div:nth-child(11) > .progress-bar { margin: 0px; padding: 10px 0px 0px 0px; }
body > div:nth-child(12) > .progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
body > div:nth-child(13) > .progress-bar { margin: 0px; padding: 0px 0px 10px 0px; }
body > div:nth-child(14) > .progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
body > div:nth-child(15) > .progress-bar { margin: 200px; padding: 0px; }
body > div:nth-child(16) > .progress-bar { margin: 0px; padding: 200px; }
/* 15 - 18 should have 100% width, no need to specify. */
</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>
<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>

View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
body > div:nth-child(1) > .progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
body > div:nth-child(2) > .progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
body > div:nth-child(3) > .progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
body > div:nth-child(4) > .progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
/* 15 - 18 should have 100% width, no need to specify. */
</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>
</body>
</html>

View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
body > progress:nth-child(1)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
body > progress:nth-child(2)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
body > progress:nth-child(3)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
body > progress:nth-child(4)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
body > progress:nth-child(5)::-moz-progress-bar { width: 1000px; }
body > progress:nth-child(6)::-moz-progress-bar { width: 10px; }
body > progress:nth-child(7)::-moz-progress-bar { width: 10%; }
body > progress:nth-child(8)::-moz-progress-bar { width: 200%; }
</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>
<!-- 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>

View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
body > progress:nth-child(1)::-moz-progress-bar { margin: 10px; padding: 0px; }
body > progress:nth-child(2)::-moz-progress-bar { margin: 0px; padding: 10px; }
body > progress:nth-child(3)::-moz-progress-bar { margin: 10px; padding: 10px; }
body > progress:nth-child(4)::-moz-progress-bar { margin: 5px; padding: 5px; }
body > progress:nth-child(5)::-moz-progress-bar { margin: 50px; padding: 50px; }
body > progress:nth-child(6)::-moz-progress-bar { margin: 100px; padding: 100px; }
body > progress:nth-child(7)::-moz-progress-bar { margin: 10px 0px 0px 0px; padding: 0px; }
body > progress:nth-child(8)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
body > progress:nth-child(9)::-moz-progress-bar { margin: 0px 0px 10px 0px; padding: 0px; }
body > progress:nth-child(10)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
body > progress:nth-child(11)::-moz-progress-bar { margin: 0px; padding: 10px 0px 0px 0px; }
body > progress:nth-child(12)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
body > progress:nth-child(13)::-moz-progress-bar { margin: 0px; padding: 0px 0px 10px 0px; }
body > progress:nth-child(14)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
body > progress:nth-child(15)::-moz-progress-bar { margin: 200px; padding: 0px; }
body > progress:nth-child(16)::-moz-progress-bar { margin: 0px; padding: 200px; }
body > progress:nth-child(17)::-moz-progress-bar { width: 1000px; }
body > progress:nth-child(18)::-moz-progress-bar { width: 10px; }
body > progress:nth-child(19)::-moz-progress-bar { width: 10%; }
body > progress:nth-child(20)::-moz-progress-bar { width: 200%; }
</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>
<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>

View File

@ -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>

View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
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>

View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
progress:nth-child(1) { margin: 10px; padding: 0px; }
progress:nth-child(2) { margin: 0px; padding: 10px; }

View File

@ -1,7 +1,9 @@
# For the moment, none of these tests will work on MacOS X.
skip-if(cocoaWidget) == values.html values-ref.html
skip-if(cocoaWidget) == values-rtl.html values-rtl-ref.html
skip-if(cocoaWidget) == margin-padding.html margin-padding-ref.html
== values.html values-ref.html
== values-rtl.html values-rtl-ref.html
== margin-padding.html margin-padding-ref.html
== margin-padding-rtl.html margin-padding-rtl-ref.html
== bar-pseudo-element.html bar-pseudo-element-ref.html
== bar-pseudo-element-rtl.html bar-pseudo-element-rtl-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.

View File

@ -5,9 +5,6 @@ div.progress-element {
width: 10em;
vertical-align: -0.2em;
/* TODO: this is a workaround for bug 568825 */
overflow: hidden;
/* Default style in case of there is -moz-appearance: none; */
border: 2px solid;
-moz-border-top-colors: ThreeDShadow -moz-Dialog;
@ -24,3 +21,7 @@ div.progress-bar {
/* Default style in case of there is -moz-appearance: none; */
background-color: ThreeDShadow;
}
progress, progress::-moz-progress-bar, div.progress-element, div.progress-bar {
-moz-appearance: none;
}

View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
progress:nth-child(1) { -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); }
progress:nth-child(2) { -moz-transform: matrix(1, 0, 0.6, 1, 15em, 0); }

View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<body dir='rtl'>
<progress value="1.0"></progress>
<progress value="0.0"></progress>

View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<body>
<progress value="1.0"></progress>
<progress value="0.0"></progress>

View File

@ -673,9 +673,6 @@ progress {
display: inline-block;
vertical-align: -0.2em;
/* TODO: this is a workaround for bug 568825 */
overflow: hidden;
/* Default style in case of there is -moz-appearance: none; */
border: 2px solid;
-moz-border-top-colors: ThreeDShadow -moz-Dialog;
@ -685,7 +682,13 @@ progress {
background-color: -moz-Dialog;
}
progress > div {
::-moz-progress-bar {
/* Block styles that would change the type of frame we construct. */
display: inline-block ! important;
float: none ! important;
position: static ! important;
overflow: visible ! important;
-moz-appearance: progresschunk;
height: 100%;

View File

@ -86,3 +86,6 @@ CSS_PSEUDO_ELEMENT(mozMathStretchy, ":-moz-math-stretchy", 0)
CSS_PSEUDO_ELEMENT(mozMathAnonymous, ":-moz-math-anonymous", 0)
#endif
// HTML5 Forms pseudo elements
CSS_PSEUDO_ELEMENT(mozProgressBar, ":-moz-progress-bar", 0)

View File

@ -75,7 +75,7 @@ nsStyleContext::nsStyleContext(nsStyleContext* aParent,
mBits(((PRUint32)aPseudoType) << NS_STYLE_CONTEXT_TYPE_SHIFT),
mRefCnt(0)
{
PR_STATIC_ASSERT((PR_UINT32_MAX >> NS_STYLE_CONTEXT_TYPE_SHIFT) >
PR_STATIC_ASSERT((PR_UINT32_MAX >> NS_STYLE_CONTEXT_TYPE_SHIFT) >=
nsCSSPseudoElements::ePseudo_MAX);
mNextSibling = this;