Bug 633209 - Add ::-moz-progress-bar to access the anonymous div inside the progress element. r=dbaron
authorMounir Lamouri <mounir.lamouri@gmail.com>
Fri, 06 May 2011 11:52:05 +0200
changeset 69473 dd09b7ba02ffde15f5411259d539dc21e0ce1131
parent 69472 97e11f940f25dad89ec7c724435abb98370add82
child 69474 91fa0c94e6dbf82a69d02741f68e0d3261d852d8
push idunknown
push userunknown
push dateunknown
reviewersdbaron
bugs633209
milestone6.0a1
Bug 633209 - Add ::-moz-progress-bar to access the anonymous div inside the progress element. r=dbaron
layout/forms/nsProgressFrame.cpp
layout/forms/nsProgressFrame.h
layout/reftests/forms/progress/bar-pseudo-element-ref.html
layout/reftests/forms/progress/bar-pseudo-element-rtl-ref.html
layout/reftests/forms/progress/bar-pseudo-element-rtl.html
layout/reftests/forms/progress/bar-pseudo-element.html
layout/reftests/forms/progress/margin-padding-rtl-ref.html
layout/reftests/forms/progress/margin-padding-rtl.html
layout/reftests/forms/progress/margin-padding.html
layout/reftests/forms/progress/reftest.list
layout/reftests/forms/progress/style.css
layout/reftests/forms/progress/transformations.html
layout/reftests/forms/progress/values-rtl.html
layout/reftests/forms/progress/values.html
layout/style/forms.css
layout/style/nsCSSPseudoElementList.h
layout/style/nsStyleContext.cpp
--- a/layout/forms/nsProgressFrame.cpp
+++ b/layout/forms/nsProgressFrame.cpp
@@ -66,16 +66,40 @@ nsProgressFrame::nsProgressFrame(nsStyle
   , mBarDiv(nsnull)
 {
 }
 
 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)
 {
   NS_ASSERTION(!GetPrevContinuation(),
                "nsProgressFrame should not have continuations; if it does we "
                "need to call RegUnregAccessKey only for the first.");
   nsFormControlFrame::RegUnRegAccessKey(static_cast<nsIFrame*>(this), PR_FALSE);
   nsContentUtils::DestroyAnonymousContent(&mBarDiv);
--- a/layout/forms/nsProgressFrame.h
+++ b/layout/forms/nsProgressFrame.h
@@ -49,16 +49,19 @@ class nsProgressFrame : public nsHTMLCon
 public:
   NS_DECL_QUERYFRAME_TARGET(nsProgressFrame)
   NS_DECL_QUERYFRAME
   NS_DECL_FRAMEARENA_HELPERS
 
   nsProgressFrame(nsStyleContext* aContext);
   virtual ~nsProgressFrame();
 
+  NS_IMETHOD SetInitialChildList(nsIAtom*     aListName,
+                                 nsFrameList& aChildList);
+
   virtual void DestroyFrom(nsIFrame* aDestructRoot);
 
   NS_IMETHOD Reflow(nsPresContext*           aCX,
                     nsHTMLReflowMetrics&     aDesiredSize,
                     const nsHTMLReflowState& aReflowState,
                     nsReflowStatus&          aStatus);
 
 #ifdef NS_DEBUG
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-ref.html
@@ -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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-rtl-ref.html
@@ -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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-rtl.html
@@ -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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element.html
@@ -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>
copy from layout/reftests/forms/progress/margin-padding-ref.html
copy to layout/reftests/forms/progress/margin-padding-rtl-ref.html
--- a/layout/reftests/forms/progress/margin-padding-ref.html
+++ b/layout/reftests/forms/progress/margin-padding-rtl-ref.html
@@ -14,17 +14,17 @@
     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>
+  <body dir='rtl'>
     <div class="progress-element">
       <div class="progress-bar">
       </div>
     </div>
     <div class="progress-element">
       <div class="progress-bar">
       </div>
     </div>
copy from layout/reftests/forms/progress/margin-padding.html
copy to layout/reftests/forms/progress/margin-padding-rtl.html
--- a/layout/reftests/forms/progress/margin-padding.html
+++ b/layout/reftests/forms/progress/margin-padding-rtl.html
@@ -1,10 +1,11 @@
 <!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; }
@@ -13,17 +14,17 @@
     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>
+  <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>
--- a/layout/reftests/forms/progress/margin-padding.html
+++ b/layout/reftests/forms/progress/margin-padding.html
@@ -1,10 +1,11 @@
 <!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; }
--- a/layout/reftests/forms/progress/reftest.list
+++ b/layout/reftests/forms/progress/reftest.list
@@ -1,9 +1,11 @@
-# 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.
 # However, it would be possible to manually check those.
 # == transformations.html transformations-ref.html
--- a/layout/reftests/forms/progress/style.css
+++ b/layout/reftests/forms/progress/style.css
@@ -1,26 +1,27 @@
 div.progress-element {
   -moz-appearance: progressbar;
   display: inline-block;
   height: 1em;
   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;
   -moz-border-right-colors: ThreeDHighlight -moz-Dialog;
   -moz-border-bottom-colors: ThreeDHighlight -moz-Dialog;
   -moz-border-left-colors: ThreeDShadow -moz-Dialog;
   background-color: -moz-Dialog;
 }
 
 div.progress-bar {
   -moz-appearance: progresschunk;
   height: 100%;
 
   /* 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;
+}
--- a/layout/reftests/forms/progress/transformations.html
+++ b/layout/reftests/forms/progress/transformations.html
@@ -1,10 +1,11 @@
 <!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); }
     progress:nth-child(3) { -moz-transform: rotate(30deg); }
     progress:nth-child(4) { -moz-transform: scale(2, 4); }
     progress:nth-child(5) { -moz-transform: scale(0.1, 0.4); }
     progress:nth-child(6) { -moz-transform: scale(1, 0.4); }
     progress:nth-child(7) { -moz-transform: scale(0.1, 1); }
--- a/layout/reftests/forms/progress/values-rtl.html
+++ b/layout/reftests/forms/progress/values-rtl.html
@@ -1,10 +1,11 @@
 <!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>
     <progress value="0.1"></progress>
     <progress value="0.5"></progress>
     <progress value="-1"></progress>
     <progress value="42"></progress>
     <progress value="42" max="100"></progress>
--- a/layout/reftests/forms/progress/values.html
+++ b/layout/reftests/forms/progress/values.html
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
 <html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <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>
--- a/layout/style/forms.css
+++ b/layout/style/forms.css
@@ -668,29 +668,32 @@ output:-moz-ui-invalid {
   input[type="file"] { height: 2em; }
 }
 
 progress {
   -moz-appearance: progressbar;
   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;
   -moz-border-right-colors: ThreeDHighlight -moz-Dialog;
   -moz-border-bottom-colors: ThreeDHighlight -moz-Dialog;
   -moz-border-left-colors: ThreeDShadow -moz-Dialog;
   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%;
 
   /* Default style in case of there is -moz-appearance: none; */
   background-color: ThreeDShadow;
 }
 
 %if OSARCH==OS2
--- a/layout/style/nsCSSPseudoElementList.h
+++ b/layout/style/nsCSSPseudoElementList.h
@@ -81,8 +81,11 @@ CSS_PSEUDO_ELEMENT(mozFocusOuter, ":-moz
 CSS_PSEUDO_ELEMENT(mozListBullet, ":-moz-list-bullet", 0)
 CSS_PSEUDO_ELEMENT(mozListNumber, ":-moz-list-number", 0)
 
 #ifdef MOZ_MATHML
 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)
+
--- a/layout/style/nsStyleContext.cpp
+++ b/layout/style/nsStyleContext.cpp
@@ -70,17 +70,17 @@ nsStyleContext::nsStyleContext(nsStyleCo
     mEmptyChild(nsnull),
     mPseudoTag(aPseudoTag),
     mRuleNode(aRuleNode),
     mAllocations(nsnull),
     mCachedResetData(nsnull),
     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;
   mPrevSibling = this;
   if (mParent) {
     mParent->AddRef();
     mParent->AddChild(this);
 #ifdef DEBUG