<!DOCTYPE html>
<style>
body {
    width: 600px;
    font-family: "Arial";
    font-size: 20px;
    line-height: 20px;
}

.polygonContainer {
    width: 200px;
    height: 200px;
    margin: 5px;
    padding: 8px;
    border: 10px solid yellow;
    background: green;
}

#polygonLeftBorderBox {
    position: absolute;
    top: 200px;
    left: 0px;
    -webkit-clip-path: polygon(0 0, 50% 0, 50% 25%, 100% 25%, 100% 75%, 50% 75%, 50% 100%, 0 100%) border-box;
}

#polygonLeftMarginBox {
    position: absolute;
    top: 200px;
    left: 300px;
    -webkit-clip-path: polygon(0 0, 50% 0, 50% 25%, 100% 25%, 100% 75%, 50% 75%, 50% 100%, 0 100%) margin-box;
}

#polygonLeftPaddingBox {
    position: absolute;
    top: 450px;
    left: 0px;
    -webkit-clip-path: polygon(0 0, 50% 0, 50% 25%, 100% 25%, 100% 75%, 50% 75%, 50% 100%, 0 100%) padding-box;
}

#polygonLeftContentBox {
    position: absolute;
    top: 450px;
    left: 300px;
    -webkit-clip-path: polygon(0 0, 50% 0, 50% 25%, 100% 25%, 100% 75%, 50% 75%, 50% 100%, 0 100%) content-box;
}
</style>

<div id="polygonLeftBorderBox" class="polygonContainer">Although the Culture was originated by humanoid species...</div>
<div id="polygonLeftMarginBox" class="polygonContainer">Although the Culture was originated by humanoid species...</div>
<div id="polygonLeftPaddingBox" class="polygonContainer">Although the Culture was originated by humanoid species...</div>
<div id="polygonLeftContentBox" class="polygonContainer">Although the Culture was originated by humanoid species...</div>

<script src="../../resources/js-test.js"></script>
<script>
    var selection = window.getSelection();

    function compareSelectionWithText(startX, startY, endX, endY, expectedText) {
        if (!window.testRunner)
            return;

        selection.removeAllRanges();
        eventSender.mouseMoveTo(startX, startY);
        eventSender.mouseDown();
        eventSender.mouseMoveTo(endX, endY);
        eventSender.mouseUp();
        shouldBe('selection.toString()', expectedText);
    }

    // polygonLeftBorderBox, select part of the polygon, not the text
    compareSelectionWithText(160, 222, 180, 242, '""');
    // polygonLeftBorderBox, select 'was' using select drag
    compareSelectionWithText(23, 242, 59, 260, "'was'");

    // polygonLeftMarginBox, select part of the polygon, not the text
    compareSelectionWithText(460, 160, 480, 180, '""');
    // polygonLeftMarginBox, select 'was' using select drag
    compareSelectionWithText(323, 242, 359, 260, "'was'");

    // polygonLeftPaddingBox, select part of the polygon, not the text
    compareSelectionWithText(160, 472, 180, 492, '""');
    // polygonLeftPaddingBox, select 'was' using select drag
    compareSelectionWithText(23, 492, 59, 510, "'was'");

    // polygonLeftContentBox, select part of the polygon, not the text
    compareSelectionWithText(460, 472, 480, 492, '""');
    // polygonLeftContentBox, select 'was' using select drag
    compareSelectionWithText(323, 492, 359, 510, "'was'");

    // Remove testing content from output.
    var polygons = document.getElementsByClassName('polygonContainer');
    for (var i = polygons.length -1 ; i >= 0; --i)
        polygons[i].remove();
</script>