<!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;
    }
    span highlight {
            border: 2px solid red;
            background: yellow;
            box-shadow: 0px 1px 3px dimgrey;
    }
    #slice highlight {
            box-decoration-break: slice;
            -webkit-box-decoration-break: slice;
    }

    #clone highlight {
            box-decoration-break: clone;
            -webkit-box-decoration-break: clone;
    }
    </style>

    </head>
    <body>
    <h1>Box-decoration-break: slice</h1>
    <span id="slice">This long word should break in a new line : <highlight>veryveryveryveryveryveryvery-<br>-longword</highlight>. 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 id="clone">This long word should break in a new line : <highlight>veryveryveryveryveryveryvery-<br>-longword</highlight>. 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>