<!DOCTYPE html>
<html>
<head>
<script src='../../resources/js-test.js'></script>
<script>
description('Percentage margins on absolutely positioned replaced elements are relative to the container\'s logical width.');
window.onload = function() {
var inners = document.querySelectorAll('.inner');
for (var i = 0; i < inners.length; i++) {
var inner = inners.item(i);
var style = getComputedStyle(inner);
shouldBe('"' + style.getPropertyValue('margin') + '"', '"10px 20px 30px 40px"');
}
}
</script>
<style>
.outer {
position: relative;
width: 100px;
height: 200px;
}
.inner {
position: absolute;
width: 40px;
height: 160px;
margin: 5% 10% 15% 20%;
}
.horizontal-tb {
-webkit-writing-mode: horizontal-tb;
}
.horizontal-tb > .inner {
margin: 10% 20% 30% 40%;
}
.vertical-lr {
-webkit-writing-mode: vertical-lr;
}
.vertical-rl {
-webkit-writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div class='outer horizontal-tb'>
<svg class='inner horizontal-tb'></svg>
</div>
<div class='outer horizontal-tb'>
<svg class='inner vertical-lr'></svg>
</div>
<div class='outer horizontal-tb'>
<svg class='inner vertical-rl'></svg>
</div>
<div class='outer vertical-lr'>
<svg class='inner horizontal-tb'></svg>
</div>
<div class='outer vertical-lr'>
<svg class='inner vertcial-lr'></svg>
</div>
<div class='outer vertical-lr'>
<svg class='inner vertical-rl'></svg>
</div>
<div class='outer vertical-rl'>
<svg class='inner horizontal-tb'></svg>
</div>
<div class='outer vertical-rl'>
<svg class='inner vertical-lr'></svg>
</div>
<div class='outer vertical-rl'>
<svg class='inner vertical-rl'></svg>
</div>
</body>
</html>
Codebase Browser
chromium