<!DOCTYPE html>
<title>The block squares should wrap around the bottom of the blue shape. They should not overlap the shape.</title>
<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;
shape-outside: inset(0px round 50px 40px 30px 20px / 20px 30px 40px 50px);
}
span {
visibility: hidden;
}
</style>
<body>
<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: r.left - s.left, top: r.top - s.top, width: r.width, height: 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, 94, 0.5);
}, "2nd square is properly affected by shape.");
test(function () {
var rect = elementRect("s3");
assert_equals(rect.left, 21);
assert_approx_equals(rect.top, 101, 0.5);
}, "3rd square is properly affected by shape.");
test(function () {
var rect = elementRect("s4");
assert_equals(rect.left, 31);
assert_approx_equals(rect.top, 101, 0.5);
}, "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.5);
}, "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.5);
}, "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.5);
}, "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.5);
}, "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.5);
}, "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.5);
}, "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.5);
}, "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>