<!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;
    text-align: right;
}

#rounded-rect {
    float: right;
    -webkit-writing-mode: horizontal-tb;
    width: 100px;
    height: 100px;
    background-color: blue;
    border-radius: 20px 30px 40px 50px / 50px 40px 30px 20px;
    shape-outside: inset(0px round 20px 30px 40px 50px / 50px 40px 30px 20px);
}
</style>

<body>
<p>The block squares should wrap around the top 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: 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, 191);
}, "1st square doesn't overlap shape.");

test(function () {
    var rect = elementRect("s2");
    assert_equals(rect.left, 11);
    assert_approx_equals(rect.top, 97, 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, 91, 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, 91, 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, 91, 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, 91, 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, 91, 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, 91, 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, 92, 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, 95, 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, 99, 0.5);
}, "11th square is properly affected by shape.");

test(function () {
    var rect = elementRect("s12");
    assert_equals(rect.left, 111);
    assert_equals(rect.top, 191);
}, "12th square doesn't overlap shape.");
</script>