OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <script> |
3 <head> | 3 var runPixelTests = true; |
4 <script> | 4 |
5 var runPixelTests = true; | 5 function init() { |
6 | 6 waitForEventAndEnd(document, 'webkitfullscreenchange'); |
7 function init() { | 7 runWithKeyDown(goFullScreen); |
8 waitForEventAndEnd(document, 'webkitfullscreenchange'); | 8 } |
9 runWithKeyDown(goFullScreen); | 9 |
10 } | 10 function goFullScreen() { |
11 | 11 document.getElementById('video').webkitRequestFullScreen(); |
12 function goFullScreen() { | 12 } |
13 document.getElementById('video').webkitRequestFullScreen(); | 13 </script> |
14 } | 14 <script src="full-screen-test.js"></script> |
15 </script> | 15 <style> |
16 <script src="full-screen-test.js"></script> | 16 #one { |
17 <style> | 17 width: 100px; |
18 #one { | 18 height: 100px; |
19 width: 100px; | 19 position: relative; |
20 height: 100px; | 20 top: 50px; |
21 position: relative; | 21 left: 50px; |
22 top: 50px; | 22 z-index: 1; |
23 left: 50px; | 23 background-color: red; |
24 z-index: 1; | 24 opacity: 0.5; |
25 background-color: red; | 25 transform: rotate(180); |
26 } | 26 -webkit-mask: -webkit-linear-gradient(left, alpha 0%, white 100%); |
27 #one, #two { | 27 -webkit-filter: contrast(100%); |
28 opacity: 0.5; | 28 clip:rect(0px,100px,100px,0px); |
29 transform: rotate(180); | 29 -webkit-box-reflect: below; |
30 -webkit-mask: -webkit-linear-gradient(left, alpha 0%, white 100%
); | 30 -webkit-transform-style: preserve-3d; |
31 -webkit-filter: contrast(100%); | 31 -webkit-perspective: 300; |
32 clip:rect(0px,100px,100px,0px); | 32 } |
33 -webkit-box-reflect: below; | 33 #zero { |
34 -webkit-transform-style: preserve-3d; | 34 position: relative; |
35 -webkit-perspective: 300; | 35 z-index: 0; |
36 } | 36 } |
37 #zero { | 37 #video { |
38 position: relative; | 38 width: 200px; |
39 z-index: 0; | 39 height: 200px; |
40 } | 40 background-color: black; |
41 #video { | 41 } |
42 width: 200px; | 42 </style> |
43 height: 200px; | 43 |
44 background-color: black; | 44 <body onload="init()"> |
45 } | 45 <div>This tests that a full screen element in a lower stacking context blocks
a sibling in a higher stacking context. |
46 </style> | 46 After entering full screen mode, only a black box should be visible. |
47 </head> | 47 Click <button onclick="goFullScreen()">go full screen</button> to run the
test.</div> |
48 <body onload="init()"> | 48 <div id="one"></div> |
49 <div>This tests that a full screen element in a lower stacking context b
locks a sibling in a higher stacking context. | 49 <div id="zero"> |
50 After entering full screen mode, only a black box should be visible
. | 50 <video id="video"></video> |
51 Click <button onclick="goFullScreen()">go full screen</button> to r
un the test.</div> | 51 </div> |
52 <div id="one"></div> | 52 </body> |
53 <div id="zero"> | |
54 <video id="video"></video> | |
55 </div> | |
56 </body> | |
57 </html> | |
OLD | NEW |