blob: 52f7111bd42ea432a53cb9d05b5275555338a378 [file] [log] [blame]
<!DOCTYPE html>
| Translation transforms can support percentage values, in which case the
| percentage should be based on the size of the element's "bounding box" (i.e.
| the size of its border box).
| This test should result in two overlapping boxes, a small red box and
| a large blue box on top of that. Both boxes have the same position (
| left: 0 and top: 0), and same translate values, but since the translate
| values are percentages and both boxes have different widths and heights and
| the translate values are percentages, the boxes will also have different
| offsets.
div {
position: absolute;
left: 0px;
top: 0px;
.transformed-1 {
transform: translateX(50%) translateY(25%);
width: 100px;
height: 50px;
background-color: rgb(255, 150, 150);
.transformed-2 {
transform: translateX(50%) translateY(25%);
width: 200px;
height: 100px;
background-color: rgb(150, 150, 255);
<div class="transformed-1"></div>
<div class="transformed-2"></div>