<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<meta charset="UTF-8">
<style>
#test1 {
--x: 1px;
transform-origin: var(--x) 1px 1px;
}
#test2 {
--y: 1px;
transform-origin: 1px var(--y) 1px;
}
#test3 {
--z: 1px;
transform-origin: 1px 1px var(--z);
}
</style>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<script>
test(function() {
assert_equals(getComputedStyle(test1).transformOrigin, "1px 1px 1px", "X component");
assert_equals(getComputedStyle(test2).transformOrigin, "1px 1px 1px", "Y component");
assert_equals(getComputedStyle(test3).transformOrigin, "1px 1px 1px", "Z component");
}, "Test that setting each component of transformOrigin to a variable reference works.");
</script>