overflow-transform-002.html | Explore in Territory

<!doctype html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
#container {
  overflow: auto;
  border: 1px solid black;
  width: 200px;
  height: 100px;
  perspective: 100px;
}
#target {
  width: 180px;
  height: 100px;
  background-color: rgba(0,255,0, 0.3);
  transform: rotateY(-45deg)
}
</style>
<p>Overflow: transform 3D.</p>
<div id="container">
  <div id="target"></div>
</div>
<script>

var container = document.querySelector('#container');
var target = document.querySelector('#target');

test(function() {
  assert_greater_than(container.scrollWidth, target.offsetWidth, "width");
  assert_greater_than(container.scrollHeight, target.offsetHeight, "height");
}, "3D overflow");

test(function() {
  target.style.transform = "rotateY(-50deg)";
  assert_greater_than(container.scrollWidth, target.offsetWidth, "width");
  assert_greater_than(container.scrollHeight, target.offsetHeight, "height");
}, "3D overflow, after css change");
</script>

chromium/third_party/blink/web_tests/overflow/overflow-transform-002.html