<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transform Module Level 2: parsing perspective-origin with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-origin-property">
<meta name="assert" content="perspective-origin supports the full '<position>' grammar.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
// Blink and WebKit append center. Edge and Firefox append 50%
test_valid_value("perspective-origin", "10%", ["10% center", "10% 50%"]);
test_valid_value("perspective-origin", "20% 30px");
test_valid_value("perspective-origin", "30px center");
test_valid_value("perspective-origin", "40px top");
test_valid_value("perspective-origin", "bottom 10% right 20%", "right 20% bottom 10%");
test_valid_value("perspective-origin", "bottom right", "right bottom");
test_valid_value("perspective-origin", "center", ["center center", "center 50%"]);
test_valid_value("perspective-origin", "center 50px");
test_valid_value("perspective-origin", "center bottom");
test_valid_value("perspective-origin", "center center");
test_valid_value("perspective-origin", "center left", "left center");
test_valid_value("perspective-origin", "left", ["left center", "left 50%"]);
test_valid_value("perspective-origin", "left bottom");
test_valid_value("perspective-origin", "left center");
test_valid_value("perspective-origin", "right 40%");
test_valid_value("perspective-origin", "right 30% top 60px");
test_valid_value("perspective-origin", "top", ["center top", "50% top"]);
test_valid_value("perspective-origin", "top center", "center top");
</script>
</body>
</html>
