Replace RenderFullScreen with top layer

Source/core/css/fullscreen.css

 :-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 {
     overflow: hidden !important;
 }
 
 :-webkit-full-screen-ancestor:not(iframe) {
     z-index: auto !important;
     position: static !important;
     opacity: 1 !important;
@@ skipping 26 matching lines @@
 iframe:-webkit-full-screen {
     margin: 0 !important;
     padding: 0 !important;
     border: 0 !important;
     position: fixed !important;
     height: 100% !important;
     width: 100% !important;
     left: 0 !important;
     top: 0 !important;
 }