Implement FullScreen using top layer.

third_party/WebKit/Source/core/css/fullscreen.css

Index: third_party/WebKit/Source/core/css/fullscreen.css
diff --git a/third_party/WebKit/Source/core/css/fullscreen.css b/third_party/WebKit/Source/core/css/fullscreen.css
index bb9c79e0eae427ab0fa76dd0fc2fa00796f0c063..a69a0483fc0b76ce4c02f9970798d292cf09254d 100644
--- a/third_party/WebKit/Source/core/css/fullscreen.css
+++ b/third_party/WebKit/Source/core/css/fullscreen.css
@@ -1,60 +1,46 @@
-:-webkit-full-screen {
-    background-color: white;
-    z-index: 2147483647 !important;
-}
-
-:root:-webkit-full-screen-ancestor {
-    overflow: hidden !important;
-}
-
-:-webkit-full-screen-ancestor:not(iframe) {
-    z-index: auto !important;
-    position: static !important;
-    opacity: 1 !important;
-    transform: none !important;
-    -webkit-mask: none !important;
-    clip: none !important;
-    -webkit-filter: none !important;
-    transition: none !important;
-    -webkit-box-reflect: none !important;
-    -webkit-perspective: none !important;
-    -webkit-transform-style: flat !important;
-}
-
-video:-webkit-full-screen, audio:-webkit-full-screen {
-    background-color: transparent !important;
-    position: relative !important;
+:not(:root):-webkit-full-screen {
+    position: fixed !important;
+    top: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
     left: 0 !important;
-    top: 0 ! important;
     margin: 0 !important;
+    box-sizing: border-box !important;
     min-width: 0 !important;
     max-width: none !important;
     min-height: 0 !important;
     max-height: none !important;
     width: 100% !important;
     height: 100% !important;
-    flex: 1 !important;
-    display: block !important;
+    object-fit: contain !important;
     transform: none !important;
 }
 
-img:-webkit-full-screen {
-    width: auto;
-    height: 100%;
-    max-width: 100%;
-}
-
 iframe:-webkit-full-screen {
-    margin: 0 !important;
+    border: none;

[philipj_slow, 2015/09/29 08:05:23]

This should be !important per spec.

[dsinclair, 2015/10/01 14:50:13]

Done.

     padding: 0 !important;
-    border: 0 !important;
-    position: fixed !important;
-    min-width: 0 !important;
-    max-width: none !important;
-    min-height: 0 !important;
-    max-height: none !important;
-    width: 100% !important;
-    height: 100% !important;
-    left: 0 !important;
-    top: 0 !important;
+}
+
+:-webkit-full-screen::backdrop {

[philipj_slow, 2015/09/29 12:31:52]

The spec was just changed, so this should now include :not(:root):
https://github.com/whatwg/fullscreen/issues/24

[dsinclair, 2015/10/01 14:50:13]

Like this?

[philipj_slow, 2015/10/01 15:00:23]

Yep, looks right in PS4.

+    display: block !important;

[philipj_slow, 2015/09/29 08:05:22]

This should be in a separate ::backdrop { } block that doesn't only apply to
fullscreen.

[dsinclair, 2015/10/01 14:50:13]

Moved to its own CL. https://chromiumcodereview.appspot.com/1372413004/

+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: black;
+}
+
+/* Anything below are extensions over what the Fullscreen API (14 October 2014) mandates. */

[Julien - ping for review, 2015/10/01 00:24:40]

You probably want to update the Fullscreen API specification date after fixing
Philip's comments ;)

[dsinclair, 2015/10/01 14:50:13]

Done.

+
+/* This is required for https://crbug.com/356282 */
+video:-webkit-full-screen, audio:-webkit-full-screen {
+    transform: none !important;
+}
+
+/* This prevents video from overflowing the viewport in
+   virtual/android/fullscreen/video-scrolled-iframe.html
+   FIXME: We should remove this (see crbug.com/441890). */
+:root:-webkit-full-screen-ancestor {
+    overflow: hidden;
 }