blob: e03587b21952814054d26a34c74143f36a44cedd [file] [log] [blame]
<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../resources/subpixel-utils.js"></script>
<style>
#container {
font: 10px/1 Ahem, sans-serif;
width: 200px;
height: 200px;
border: 1px solid black;
-webkit-writing-mode: vertical-lr;
}
#rounded-rect {
float: left;
-webkit-writing-mode: horizontal-tb;
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50px 40px 30px 20px / 20px 30px 40px 50px;
-webkit-shape-outside: inset(0px round 50px 40px 30px 20px / 20px 30px 40px 50px);
}
</style>
<body>
<p>The block squares should wrap around the bottom of the blue shape. They should not overlap the shape.</p>
<div id="container">
<span id="s1">X</span><br/>
<div id="rounded-rect"></div>
<span id="s2">X</span><br/>
<span id="s3">X</span><br/>
<span id="s4">X</span><br/>
<span id="s5">X</span><br/>
<span id="s6">X</span><br/>
<span id="s7">X</span><br/>
<span id="s8">X</span><br/>
<span id="s9">X</span><br/>
<span id="s10">X</span><br/>
<span id="s11">X</span><br/>
<span id="s12">X</span>
</div>
</body>
<script>
function elementRect(elementId)
{
var s = document.getElementById("container").getBoundingClientRect();
var r = document.getElementById(elementId).getBoundingClientRect();
return {left: Math.round(r.left) - Math.round(s.left), top: Math.round(r.top) - Math.round(s.top), width: Math.round(r.width), height: Math.round(r.height)};
}
test(function () {
var rect = elementRect("s1");
assert_equals(rect.left, 1);
assert_equals(rect.top, 1);
}, "1st square doesn't overlap shape.");
test(function () {
var rect = elementRect("s2");
assert_equals(rect.left, 11);
assert_approx_equals(rect.top, 91, 0.1);
}, "2nd square is properly affected by shape.");
test(function () {
var rect = elementRect("s3");
assert_equals(rect.left, 21);
assert_approx_equals(rect.top, 97, 0.1);
}, "3rd square is properly affected by shape.");
test(function () {
var rect = elementRect("s4");
assert_equals(rect.left, 31);
assert_approx_equals(rect.top, 100, 0.1);
}, "4th square is properly affected by shape.");
test(function () {
var rect = elementRect("s5");
assert_equals(rect.left, 41);
assert_approx_equals(rect.top, 101, 0.1);
}, "5th square is properly affected by shape.");
test(function () {
var rect = elementRect("s6");
assert_equals(rect.left, 51);
assert_approx_equals(rect.top, 101, 0.1);
}, "6th square is properly affected by shape.");
test(function () {
var rect = elementRect("s7");
assert_equals(rect.left, 61);
assert_approx_equals(rect.top, 101, 0.1);
}, "7th square is properly affected by shape.");
test(function () {
var rect = elementRect("s8");
assert_equals(rect.left, 71);
assert_approx_equals(rect.top, 101, 0.1);
}, "8th square is properly affected by shape.");
test(function () {
var rect = elementRect("s9");
assert_equals(rect.left, 81);
assert_approx_equals(rect.top, 101, 0.1);
}, "9th square is properly affected by shape.");
test(function () {
var rect = elementRect("s10");
assert_equals(rect.left, 91);
assert_approx_equals(rect.top, 99, 0.1);
}, "10th square is properly affected by shape.");
test(function () {
var rect = elementRect("s11");
assert_equals(rect.left, 101);
assert_approx_equals(rect.top, 91, 0.1);
}, "11th square is properly affected by shape.");
test(function () {
var rect = elementRect("s12");
assert_equals(rect.left, 111);
assert_equals(rect.top, 1);
}, "12th square doesn't overlap shape.");
</script>