OLD | NEW |
| 1 /* |
| 2 * User-agent level style sheet defaults for the Fullscreen API |
| 3 * https://fullscreen.spec.whatwg.org/#user-agent-level-style-sheet-defaults |
| 4 * |
| 5 * FIXME: Use the :fullscreen pseudo-class instead of :-webkit-full-screen. |
| 6 * (see crbug.com/402378) |
| 7 */ |
| 8 |
| 9 :not(:root):-webkit-full-screen { |
| 10 position: fixed !important; |
| 11 top: 0 !important; |
| 12 right: 0 !important; |
| 13 bottom: 0 !important; |
| 14 left: 0 !important; |
| 15 margin: 0 !important; |
| 16 box-sizing: border-box !important; |
| 17 min-width: 0 !important; |
| 18 max-width: none !important; |
| 19 min-height: 0 !important; |
| 20 max-height: none !important; |
| 21 width: 100% !important; |
| 22 height: 100% !important; |
| 23 object-fit: contain !important; |
| 24 } |
| 25 |
| 26 iframe:-webkit-full-screen { |
| 27 border: none; |
| 28 } |
| 29 |
| 30 /* Anything below are extensions over what the Fullscreen API mandates. */ |
| 31 |
| 32 /* The transform rule is needed to prevent transforms that make sense in the |
| 33 context of the page from messing up the fullscreen rendering. It will likely |
| 34 be added to the spec: https://www.w3.org/Bugs/Public/show_bug.cgi?id=27931 */ |
| 35 :not(:root):-webkit-full-screen { |
| 36 transform: none !important; |
| 37 } |
| 38 |
| 39 /* FIXME: Remove these rules when moving Fullscreen to top layer. |
| 40 (see crbug.com/240576) */ |
1 :-webkit-full-screen { | 41 :-webkit-full-screen { |
2 background-color: white; | 42 background-color: white; |
3 z-index: 2147483647 !important; | 43 z-index: 2147483647 !important; |
4 } | 44 } |
5 | 45 |
6 :root:-webkit-full-screen-ancestor { | 46 video:-webkit-full-screen, audio:-webkit-full-screen { |
7 overflow: hidden !important; | 47 background-color: transparent !important; |
8 } | 48 } |
9 | 49 |
10 :-webkit-full-screen-ancestor:not(iframe) { | 50 :-webkit-full-screen-ancestor:not(iframe) { |
11 z-index: auto !important; | 51 z-index: auto !important; |
12 position: static !important; | 52 position: static !important; |
13 opacity: 1 !important; | 53 opacity: 1 !important; |
14 transform: none !important; | 54 transform: none !important; |
15 -webkit-mask: none !important; | 55 -webkit-mask: none !important; |
16 clip: none !important; | 56 clip: none !important; |
17 -webkit-filter: none !important; | 57 -webkit-filter: none !important; |
18 transition: none !important; | 58 transition: none !important; |
19 -webkit-box-reflect: none !important; | 59 -webkit-box-reflect: none !important; |
20 -webkit-perspective: none !important; | 60 -webkit-perspective: none !important; |
21 -webkit-transform-style: flat !important; | 61 -webkit-transform-style: flat !important; |
22 } | 62 } |
23 | 63 |
24 video:-webkit-full-screen, audio:-webkit-full-screen { | 64 /* This prevents video from overflowing the viewport in |
25 background-color: transparent !important; | 65 virtual/android/fullscreen/video-scrolled-iframe.html |
26 position: relative !important; | 66 FIXME: We should remove this (see crbug.com/441890). */ |
27 left: 0 !important; | 67 :-webkit-full-screen-ancestor { |
28 top: 0 ! important; | 68 overflow: hidden !important; |
29 margin: 0 !important; | |
30 min-width: 0 !important; | |
31 max-width: none !important; | |
32 min-height: 0 !important; | |
33 max-height: none !important; | |
34 width: 100% !important; | |
35 height: 100% !important; | |
36 flex: 1 !important; | |
37 display: block !important; | |
38 transform: none !important; | |
39 } | 69 } |
40 | |
41 img:-webkit-full-screen { | |
42 width: auto; | |
43 height: 100%; | |
44 max-width: 100%; | |
45 } | |
46 | |
47 iframe:-webkit-full-screen { | |
48 margin: 0 !important; | |
49 padding: 0 !important; | |
50 border: 0 !important; | |
51 position: fixed !important; | |
52 min-width: 0 !important; | |
53 max-width: none !important; | |
54 min-height: 0 !important; | |
55 max-height: none !important; | |
56 width: 100% !important; | |
57 height: 100% !important; | |
58 left: 0 !important; | |
59 top: 0 !important; | |
60 } | |
OLD | NEW |