wpt / css / css-transforms / parsing / perspective-origin-valid.html

Status: PASS | Duration: 56ms | Subtests: 18/18 | Open test on wpt.live | wpt.fyi

Data from commit:
7727414 ci: report WPT subtest changes in the PR description (#826) (2026-09-02)

SubtestStatusMessage
e.style['perspective-origin'] = "10%" should set the property valuePASS
e.style['perspective-origin'] = "20% 30px" should set the property valuePASS
e.style['perspective-origin'] = "30px center" should set the property valuePASS
e.style['perspective-origin'] = "40px top" should set the property valuePASS
e.style['perspective-origin'] = "bottom 10% right 20%" should set the property valuePASS
e.style['perspective-origin'] = "bottom right" should set the property valuePASS
e.style['perspective-origin'] = "center" should set the property valuePASS
e.style['perspective-origin'] = "center 50px" should set the property valuePASS
e.style['perspective-origin'] = "center bottom" should set the property valuePASS
e.style['perspective-origin'] = "center center" should set the property valuePASS
e.style['perspective-origin'] = "center left" should set the property valuePASS
e.style['perspective-origin'] = "left" should set the property valuePASS
e.style['perspective-origin'] = "left bottom" should set the property valuePASS
e.style['perspective-origin'] = "left center" should set the property valuePASS
e.style['perspective-origin'] = "right 40%" should set the property valuePASS
e.style['perspective-origin'] = "right 30% top 60px" should set the property valuePASS
e.style['perspective-origin'] = "top" should set the property valuePASS
e.style['perspective-origin'] = "top center" should set the property valuePASS

/css/css-transforms/parsing/perspective-origin-valid.html

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