<!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>