blob: 96f6ac2eb8052b3fc81e55da22a309f22e27c7f9 [file] [log] [blame]
<!DOCTYPE html>
<title>Legacy transform-box behavior</title>
<script src="../../../../../resources/testharness.js"></script>
<script src="../../../../../resources/testharnessreport.js"></script>
<style>
svg {
background-color: red;
}
#r1 {
transform: translate(100%, 100%);
}
#r2 {
transform-origin: 150px -50%;
transform: rotate(90deg);
}
#r3 {
transform-origin: -50% 50px;
transform: rotate(90deg);
}
#r4 {
transform-origin: 100% 0%;
transform: rotate(-180deg);
}
</style>
<svg width="200" height="200">
<rect id="r1" width="100" height="100" fill="green"/>
<rect id="r2" width="100" height="100" x="100" y="100" fill="green"/>
<rect id="r3" width="100" height="100" x="100" fill="green"/>
<rect id="r4" width="100" height="100" y="100" fill="green"/>
</svg>
<script>
function assert_rect_equals(actual, expected) {
for (let component of ['left', 'top', 'width', 'height'])
assert_equals(actual[component], expected[component], component);
}
test(function() {
let rects = document.querySelectorAll('rect');
assert_rect_equals(rects[0].getBoundingClientRect(), { left: 108, top: 108, width: 100, height: 100});
assert_rect_equals(rects[1].getBoundingClientRect(), { left: 8, top: 8, width: 100, height: 100});
assert_rect_equals(rects[2].getBoundingClientRect(), { left: 8, top: 108, width: 100, height: 100});
assert_rect_equals(rects[3].getBoundingClientRect(), { left: 108, top: 8, width: 100, height: 100});
});
</script>