56 lines
1.7 KiB
HTML
56 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.container {
|
|
width: 500px;
|
|
height: 400px;
|
|
overflow: hidden;
|
|
}
|
|
.fail {
|
|
margin: 1px;
|
|
width: 118px;
|
|
height: 58px;
|
|
background-color: red;
|
|
position: absolute;
|
|
}
|
|
.pass {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: solid green 10px;
|
|
background-color: green;
|
|
position: absolute;
|
|
transform-origin: 50% 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<p>You should see no red boxes below</p>
|
|
<div>
|
|
<div class="fail"></div>
|
|
<div class="pass" style="transform-box: border-box; transform: rotate(90deg) scale(1, 2) translate(30px, -75%)"></div>
|
|
</div>
|
|
<div style="transform: translateX(150px)">
|
|
<div class="fail"></div>
|
|
<div class="pass" style="transform-box: view-box; transform: rotate(90deg) scale(1, 2) translate(30px, -75%)"></div>
|
|
</div>
|
|
<div style="transform: translateX(300px)">
|
|
<div class="fail" style="width: 50px; height: 50px;"></div>
|
|
<div class="pass" style="transform-box: stroke-box; transform: rotate(90deg) scale(1, 2) translate(30px, -75%)"></div>
|
|
</div>
|
|
<div style="transform: translate(0, 90px)">
|
|
<div class="fail"></div>
|
|
<div class="pass" style="transform-box: content-box; transform: rotate(90deg) scale(1, 2) translate(20px, -87.5%);"></div>
|
|
</div>
|
|
<div style="transform: translate(150px, 90px)">
|
|
<div class="fail"></div>
|
|
<div class="pass" style="transform-box: fill-box; transform: rotate(90deg) scale(1, 2) translate(20px, -87.5%);"></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |