Match the Fullscreen spec's CSS as far as currently practical

Source/core/css/fullscreen.css

+/*
+ * User-agent level style sheet defaults for the Fullscreen API
+ * https://fullscreen.spec.whatwg.org/#user-agent-level-style-sheet-defaults
+ *
+ * Note that the prefixed :-webkit-full-screen pseudo-class is used instead of
+ * :fullscreen. crbug.com/402378

[Julien - ping for review, 2015/03/04 01:07:38]

That's not a really actionable (btw the rest of the comment is great).

[philipj_slow, 2015/03/04 07:15:28]

I'll convert everything to FIXMEs instead.

+ */
+
+:not(:root):-webkit-full-screen {
+    position: fixed !important;
+    top: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    left: 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;
+    object-fit: contain !important;
+}
+
+iframe:-webkit-full-screen {
+    border: none;
+}
+
+/*
+ * The flex and transform rules will likely be added to the spec:
+ * https://www.w3.org/Bugs/Public/show_bug.cgi?id=27931
+ * Bug history in WebKit and Blink:
+ * https://bugs.webkit.org/show_bug.cgi?id=58291
+ * https://bugs.webkit.org/show_bug.cgi?id=60140
+ * https://bugs.webkit.org/show_bug.cgi?id=62463
+ * https://crbug.com/356282

[Julien - ping for review, 2015/03/04 01:07:38]

The (apparently) semi-random selection of bugs you've picked up confused me. It
would be better to pick one or 2 that *are* relevant and we don't have to dig
through a lot of history.

It doesn't seem to justify the flex change (see below).

[philipj_slow, 2015/03/04 07:15:28]

These were the bugs references when adding/tweaking transform and flex to this
stylesheet, but I guess inlining git blame isn't that helpful. I'm going to
leave just the spec bug here since there isn't actually something to fix here
except wait for the spec bug.

+ */
 :-webkit-full-screen {
-    background-color: white;

[Julien - ping for review, 2015/03/04 01:07:38]

I don't agree with this change nor the justification above. You're making us
behave differently for no compelling reasons and it's better to keep our old
behavior until we can land the top layer bits. We are already taking a
compatibility risk by landing this change so I would rather stick to the minimal
amount of diff.

The change in LayoutTests/fullscreen/resources/empty.html underlines this risk.

[philipj_slow, 2015/03/04 07:15:28]

OK, I'll revert the background changes.

+    flex: none !important;

[Julien - ping for review, 2015/03/04 01:07:38]

I would have liked a focused explanation on why it's correct to convert flex: 1
!important to flex: none !important (it doesn't have to be here but can be done
in the description)

[philipj_slow, 2015/03/04 07:15:28]

Sorry, I should have declared my ignorance on this up front. In the spec bug you
can see that I don't really know the difference, and I couldn't get anyone else
to clue me in. It was removed in your review so I figured you didn't find a bug
that required it.

It seems to me that per spec, the size of the fullscreen element is fixed in
every way possible, there's no available space to fill into. If the rule is
removed, full-screen-with-flex-item.html still passes. Do you know of any
situation where it would matter? If not, I'll ask that it isn't added to the
spec and remove it here instead.

[Julien - ping for review, 2015/03/04 17:50:22]

It was probably not needed before actually but we were conservative as we wrap
the fullscreen layout object in a flexbox.

[philipj_slow, 2015/03/05 04:05:06]

I've played around a bit with flexbox and the Fullscreen UA style sheet rules
and have satisfied myself that nothing you do with the flex property will affect
the size or position of the fullscreen element. I've updated the description,
removed flex from the stylesheet, and will comment on the spec bug.

+    transform: none !important;
+}
+

[Julien - ping for review, 2015/03/04 01:07:38]

I would love to keep the separation between spec and our implementation.

[philipj_slow, 2015/03/04 07:15:28]

Done.

+/*
+ * Implementing Fullscreen using top layer would remove the need for
+ * z-index and :-webkit-full-screen-ancestor rules. crbug.com/240576
+ */
+:-webkit-full-screen {
     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;
-    left: 0 !important;
-    top: 0 ! important;
-    margin: 0 !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;
-    transform: none !important;
+/*
+ * Prevents video from overflowing the viewport on Android. crbug.com/441890
+ */
+:-webkit-full-screen-ancestor {
+    overflow: hidden !important;
 }
-
-img:-webkit-full-screen {
-    width: auto;
-    height: 100%;
-    max-width: 100%;
-}
-
-iframe:-webkit-full-screen {
-    margin: 0 !important;
-    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;
-}