Implement the ::backdrop pseudo-element for modal <dialog>.

Source/core/dom/Element.h

Index: Source/core/dom/Element.h
diff --git a/Source/core/dom/Element.h b/Source/core/dom/Element.h
index 521ff69970b4afc6536379ca8139f1a627f4ca24..36ed8770d386b244d295295024442febd4332af0 100644
--- a/Source/core/dom/Element.h
+++ b/Source/core/dom/Element.h
@@ -573,7 +573,7 @@ public:
     virtual bool isDisabledFormControl() const { return false; }
 
     bool isInert() const;
-    virtual bool shouldBeReparentedUnderRenderView(const RenderStyle*) const { return isInTopLayer(); }
+    virtual bool shouldBeReparentedUnderRenderView(const RenderStyle*) const { return pseudoId() == BACKDROP || isInTopLayer(); }

[Julien - ping for review, 2013/06/27 22:49:00]

Won't this break everything by making backdrop a sibling of the <dialog> instead
of a child? That also means that we make our render tree differ more from the
DOM tree.

[falken, 2013/06/28 08:06:52]

Hm, I was thinking of ::backdrop as a standalone top layer element. So it's
CB would be the ICB like a top layer element. Reparenting it also gets other
probably desired effects like "Ancestor elements with overflow, opacity,
masks, etc. cannot affect it." The spec is not so clear:
"This pseudo-element is a box rendered immediately below the element (and
above the element below the element in the stack, if any), within the same
top layer."

"within the same top layer" sounded to me like ::backdrop is a member of the
stack of elements called the top layer.

Do we want the CB of ::backdrop to be the <dialog> or the ICB? One advantage
of the former is the ::backdrop can be positioned and sized relative to the
dialog. I imagine in most cases the ::backdrop would cover the whole page
though.

 
     virtual bool childShouldCreateRenderer(const NodeRenderingContext&) const;
     bool hasPendingResources() const;