/*
 * Copyright (c) 2014, the Dart project authors.  Please see the AUTHORS file
 * for details. All rights reserved. Use of this source code is governed by a
 * BSD-style license that can be found in the LICENSE file.
 */
/**
 * @assertion
 * @description
 */
import "dart:html";
import "../../../testharness.dart";

const String htmlEL1 = r'''
<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);
}
</style>
''';

const String htmlEL2 = r'''
<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>
''';

Rectangle elementRect(elementId) {
    Rectangle s = document.getElementById("container").getBoundingClientRect();
    Rectangle r = document.getElementById(elementId).getBoundingClientRect();
    return new Rectangle(r.left - s.left, r.top - s.top, r.width, r.height);
}

void main() {
    document.head.appendHtml(htmlEL1, treeSanitizer: new NullTreeSanitizer());
    document.body.appendHtml(htmlEL2, treeSanitizer: new NullTreeSanitizer());

    test(() {
        var rect = elementRect("s1");
        assert_equals(rect.left, 1);
        assert_equals(rect.top, 1);
    }, "1st square doesn't overlap shape.");

    test(() {
        var rect = elementRect("s2");
        assert_equals(rect.left, 11);
        assert_approx_equals(rect.top, 91, 0.5);
    }, "2nd square is properly affected by shape.");

    test(() {
        var rect = elementRect("s3");
        assert_equals(rect.left, 21);
        assert_approx_equals(rect.top, 97, 0.5);
    }, "3rd square is properly affected by shape.");

    test(() {
        var rect = elementRect("s4");
        assert_equals(rect.left, 31);
        assert_approx_equals(rect.top, 100, 0.5);
    }, "4th square is properly affected by shape.");

    test(() {
        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(() {
        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(() {
        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(() {
        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(() {
        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(() {
        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(() {
        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(() {
        var rect = elementRect("s12");
        assert_equals(rect.left, 111);
        assert_equals(rect.top, 1);
    }, "12th square doesn't overlap shape.");

    checkTestFailures();
}