[Modern Media Controls] Turn media/modern-media-controls/ios-inline-media-controls...
[WebKit-https.git] / LayoutTests / media / controls-should-not-trigger-isolates-blending.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5 <script src="media-file.js"></script>
6 <script src="../resources/js-test-pre.js"></script>
7     <style>
8         .container {
9             width: 456px;
10             height: 50px;
11             margin: 4px;
12             padding: 2px;
13             box-sizing: border-box;
14             border: 1px solid gray;
15             position: relative;
16             z-index: 0;
17         }
18         
19         audio {
20             display: block;
21             margin: 20px;
22         }
23     </style>
24     <script>
25         if (window.testRunner)
26             testRunner.dumpAsText();
27
28         jsTestIsAsync = true;
29
30         function containsLayerWithSize(layersText, width, height)
31         {
32             var lines = layersText.split('\n');
33             
34             var re = /\(bounds ([.\d]+) ([.\d]+)\)/;
35             
36             for (var line of lines) {
37                 var result;
38                 if (result = re.exec(line)) {
39                     if (parseFloat(result[1]) == width && parseFloat(result[2]) == height)
40                         return true;
41                 }
42                 
43             }
44             return false;
45         }
46         
47         var mediaElementsToWaitFor = 2;
48         function setupVideos()
49         {
50             setSrcById('loaded-video', findMediaFile('video', 'content/test'));
51
52             var video = document.getElementById('loaded-video');
53             video.addEventListener("canplaythrough", function() {
54                 checkForMediaLoaded(--mediaElementsToWaitFor);
55             });
56             video.load();
57
58             setSrcById('loaded-audio', findMediaFile('audio', 'content/test'));
59             var audio = document.getElementById('loaded-audio')
60             audio.addEventListener("canplaythrough", function() {
61                 checkForMediaLoaded(--mediaElementsToWaitFor);
62             });
63             audio.load();
64         }
65         
66         function checkForMediaLoaded(loadsRemaining)
67         {
68             if (loadsRemaining)
69                 return;
70             
71             testCompositedContainer();
72         }
73
74         var layers;
75         function testCompositedContainer()
76         {
77             if (!window.internals)
78                 return;
79
80             description('Tests that media controls don\'t trigger compositing on an ancestor via isolatesBlending');
81             layers = internals.layerTreeAsText(document);
82             
83             shouldBeFalse('containsLayerWithSize(layers, 456, 50)');
84             
85             finishJSTest();
86         }
87         
88         window.addEventListener('load', setupVideos, false);
89     </script>
90 </head>
91 <body>
92
93 <div class="container">
94     <audio controls="controls"/>
95 </div>
96
97 <div class="container">
98     <video id="loaded-audio" controls="controls"/>
99 </div>
100
101 <div class="container">
102     <video src="" controls="controls"/>
103 </div>
104
105 <div class="container">
106     <video id="loaded-video" controls="controls"/>
107 </div>
108
109 <script src="../resources/js-test-post.js"></script>
110 </body>
111 </html>