| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <div id="parentDiv" style="-webkit-perspective: 150px; -webkit-perspective-origin: 10px 10px; width: 400px; height: 400px"> |
| <div id="testDiv" style="-webkit-perspective: 100px; -webkit-perspective-origin: 5px 5px; width: 200px; height: 200px"></div> |
| <div id="noShortHandDiv" style="-webkit-perspective: 200px; -webkit-perspective-origin: 15px 15px; width: 300px; height: 300px"></div> |
| </div> |
| <script> |
| description("Tests that setting -webkit-perspective-origin property is corrected parsed / computed."); |
| |
| var parentDiv = document.getElementById("parentDiv"); |
| var testDiv = document.getElementById("testDiv"); |
| var noShortHandDiv = document.getElementById("noShortHandDiv"); |
| |
| shouldBeEqualToString("getComputedStyle(parentDiv)['-webkit-perspective']", "150px"); |
| shouldBeEqualToString("getComputedStyle(parentDiv)['-webkit-perspective-origin']", "10px 10px"); |
| // Not implemented. |
| shouldBeEmptyString("getComputedStyle(parentDiv)['-webkit-perspective-origin-x']"); |
| shouldBeEmptyString("getComputedStyle(parentDiv)['-webkit-perspective-origin-y']"); |
| |
| shouldBeEqualToString("getComputedStyle(testDiv)['-webkit-perspective']", "100px"); |
| shouldBeEqualToString("getComputedStyle(testDiv)['-webkit-perspective-origin']", "5px 5px"); |
| // Not implemented. |
| shouldBeEmptyString("getComputedStyle(testDiv)['-webkit-perspective-origin-x']"); |
| shouldBeEmptyString("getComputedStyle(testDiv)['-webkit-perspective-origin-y']"); |
| |
| shouldBeEqualToString("getComputedStyle(noShortHandDiv)['-webkit-perspective']", "200px"); |
| shouldBeEqualToString("getComputedStyle(noShortHandDiv)['-webkit-perspective-origin']", "15px 15px"); |
| // Not implemented. |
| shouldBeEmptyString("getComputedStyle(noShortHandDiv)['-webkit-perspective-origin-x']"); |
| shouldBeEmptyString("getComputedStyle(noShortHandDiv)['-webkit-perspective-origin-y']"); |
| |
| evalAndLog("testDiv.style['-webkit-perspective-origin'] = 'inherit'"); |
| shouldBeEqualToString("getComputedStyle(testDiv)['-webkit-perspective-origin']", "10px 10px"); |
| |
| evalAndLog("testDiv.style['-webkit-perspective-origin'] = 'initial'"); |
| // Initial is '50% 50%' -> '100px 100px', because width / height are 100px. |
| shouldBeEqualToString("getComputedStyle(testDiv)['-webkit-perspective-origin']", "100px 100px"); |
| |
| evalAndLog("testDiv.style['-webkit-perspective-origin'] = '20px 20px'"); |
| shouldBeEqualToString("getComputedStyle(testDiv)['-webkit-perspective-origin']", "20px 20px"); |
| |
| evalAndLog("noShortHandDiv.style['-webkit-perspective-origin'] = 'inherit'"); |
| shouldBeEqualToString("getComputedStyle(noShortHandDiv)['-webkit-perspective-origin']", "10px 10px"); |
| |
| evalAndLog("noShortHandDiv.style['-webkit-perspective-origin'] = 'initial'"); |
| // Initial is '50% 50%' -> '150px 150px', because width / height are 300px. |
| shouldBeEqualToString("getComputedStyle(noShortHandDiv)['-webkit-perspective-origin']", "150px 150px"); |
| |
| evalAndLog("noShortHandDiv.style['-webkit-perspective-origin'] = '20px 20px'"); |
| shouldBeEqualToString("getComputedStyle(noShortHandDiv)['-webkit-perspective-origin']", "20px 20px"); |
| |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
