| <!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] --> |
| |
| <html> |
| <head> |
| <meta name="viewport" content="width=device-width"> |
| <style> |
| .perspective-container { |
| perspective: 1500px; |
| width: 100%; |
| padding: 10px; |
| border: 1px solid black; |
| } |
| |
| .container { |
| transform: translateZ(20px); |
| } |
| |
| .middle { |
| transform-style: preserve-3d; |
| perspective: 300px; |
| } |
| |
| #blurry-layer { |
| width: 100%; |
| height: 50px; |
| -webkit-backface-visibility: hidden; |
| transform: rotateX(20deg); |
| background-color: silver; |
| font-size: 24pt; |
| } |
| </style> |
| <script> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| function getUIScript(layerID) |
| { |
| return ` |
| (function() { |
| uiController.doAfterPresentationUpdate(function() { |
| var layerProperties = JSON.stringify(uiController.propertiesOfLayerWithID(${layerID})); |
| uiController.uiScriptComplete(layerProperties); |
| }) |
| })();` |
| } |
| |
| function doTest() |
| { |
| if (!window.testRunner) |
| return; |
| |
| var layerID = internals.layerIDForElement(document.getElementById('blurry-layer')); |
| |
| testRunner.runUIScript(getUIScript(layerID), function(layerProperties) { |
| var propertiesAsJSON = JSON.parse(layerProperties); |
| document.getElementById('layer-properties').textContent = 'rasterizationScale of layer is ' + propertiesAsJSON['rasterizationScale']; |
| testRunner.notifyDone(); |
| }); |
| } |
| |
| window.addEventListener('load', doTest, false); |
| </script> |
| </head> |
| <body> |
| |
| <div class="perspective-container"> |
| <div class="container"> |
| <div class="middle"> |
| <div id="blurry-layer"> |
| This text should not be blurry |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <pre id="layer-properties"></pre> |
| </body> |
| </html> |
