Replace RenderFullScreen with top layer

Source/core/css/fullscreen.css

Index: Source/core/css/fullscreen.css
diff --git a/Source/core/css/fullscreen.css b/Source/core/css/fullscreen.css
index 5ea5f06c2f071bf792657394e4c80fcec9e05b92..535ed667980f34386e2c8e037a7f2317b4051f10 100644
--- a/Source/core/css/fullscreen.css
+++ b/Source/core/css/fullscreen.css
@@ -1,6 +1,27 @@
 :-webkit-full-screen {
     background-color: white;
-    z-index: 2147483647 !important;
+}
+
+*|*:not(:root):-webkit-full-screen {

[esprehn, 2014/01/21 18:59:05]

remove the *|*, it's not needed and just complicates this. Not sure how I feel
about the :not() in the UA sheet either, but this is fine I guess.

[falken, 2014/01/22 06:08:02]

This was taken directly from the Fullscreen API spec. I guess we don't care
about namespaces though? 

+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: 0;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;

[esprehn, 2014/01/21 18:59:05]

Why are you stretching the element to 100% size? I don't think Firefox does
this, the authors is supposed to do it.

[falken, 2014/01/22 06:08:02]

It's taken from the spec. IE 11 also follows the spec here. Firefox actually
forces width/height 100% without allowing it to be overriden by custom styling.
(Some basic test cases are here: http://falken-testing.appspot.com/)

+    object-fit: contain;
+}
+
+:-webkit-full-screen::backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: black;
 }
 
 :root:-webkit-full-screen-document:not(:-webkit-full-screen), :root:-webkit-full-screen-ancestor {