<!DOCTYPE html>
<html>
    <head>
    <title>Test of box-decoration break rendering when the a text is broken in multiple lines</title>
    <style type="text/css">
    body {
        width:  360px;
        font: monospace 10px;
    }
    span {
        display: block;
        width: 360px;
    }
    #rightCutHighlight {
        display: inline;
        border-top: 2px solid red;
        border-right: 0px solid red;
        border-left: 2px solid red;
        border-bottom: 2px solid red;
        background: yellow;
        box-shadow: 0px 1px 3px dimgrey;
    }
    #leftCutHighlight {
        display: inline;
        margin: 0px;
        padding: 0px;
        border-top: 2px solid red;
        border-right: 2px solid red;
        border-left: 0px solid red;
        border-bottom: 2px solid red;
        background: yellow;
        box-shadow: 0px 1px 3px dimgrey;
    }
    .clone {
        display: inline;
        margin: 0px;
        padding: 0px;
        border: 2px solid red;
        background: yellow;
        box-shadow: 0px 1px 3px dimgrey;
    }
    </style>

    </head>
    <body>
    <h1>Box-decoration-break: slice</h1>
    <span>This long word should break in a new line : <span id="rightCutHighlight">veryveryveryveryveryveryvery-</span><br><span id="leftCutHighlight">-longword</span>. box-decoration-break is set to cloned,
    so the right edge of the previous line is cut, and the left edge of the highlight in this line is cut too.</span>
    <h1>Box-decoration-break: clone</h1>
    <span>This long word should break in a new line : <span class="clone">veryveryveryveryveryveryvery-</span><br><span class="clone">-longword</span>. box-decoration-break is set to cloned,
    so the right edge of the previous line is similar as its left edge, and the left edge of the highlight in this line is similar as its right one. </span>
    </body>
    </body>
</html>