REGRESSION(r217695): Offscreen/overflowed items not being rendered while translating...
[WebKit-https.git] / LayoutTests / compositing / ios / rasterization-scale.html
1 <!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
2
3 <html>
4 <head>
5     <meta name="viewport" content="width=device-width">
6     <style>
7         .perspective-container {
8             perspective: 1500px;
9             width: 100%;
10             padding: 10px;
11             border: 1px solid black;
12         }
13         
14         .container {
15             transform: translateZ(20px);
16         }
17         
18         .middle {
19             transform-style: preserve-3d;
20             perspective: 300px;
21         }
22         
23         #blurry-layer {
24             width: 100%;
25             height: 50px;
26             -webkit-backface-visibility: hidden;
27             transform: rotateX(20deg);
28             background-color: silver;
29             font-size: 24pt;
30         }
31     </style>
32     <script>
33         if (window.testRunner) {
34             testRunner.dumpAsText();
35             testRunner.waitUntilDone();
36         }
37
38         function getUIScript(layerID)
39         {
40             return `
41                 (function() {
42                     uiController.doAfterPresentationUpdate(function() {
43                         var layerProperties = JSON.stringify(uiController.propertiesOfLayerWithID(${layerID}));
44                         uiController.uiScriptComplete(layerProperties);
45                     })
46                 })();`
47         }
48
49         function doTest()
50         {
51             if (!window.testRunner)
52                 return;
53
54             var layerID = internals.layerIDForElement(document.getElementById('blurry-layer'));
55
56             testRunner.runUIScript(getUIScript(layerID), function(layerProperties) {
57                 var propertiesAsJSON = JSON.parse(layerProperties);
58                 document.getElementById('layer-properties').textContent = 'rasterizationScale of layer is ' + propertiesAsJSON['rasterizationScale'];
59                 testRunner.notifyDone();
60             });
61         }
62         
63         window.addEventListener('load', doTest, false);
64     </script>
65 </head>
66 <body>
67
68 <div class="perspective-container">
69     <div class="container">
70         <div class="middle">
71             <div id="blurry-layer">
72                 This text should not be blurry
73             </div>
74         </div>
75     </div>
76 </div>
77
78 <pre id="layer-properties"></pre>
79 </body>
80 </html>