transform-origin-substitution.html | Explore in Territory

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

chromium/third_party/blink/web_tests/fast/css/variables/transform-origin-substitution.html