82 lines
1.7 KiB
HTML
82 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src='../../resources/js-test-pre.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>
|
|
<script src='../../resources/js-test-post.js'></script>
|
|
</body>
|
|
</html>
|