box-decoration-break-rendering-expected.html

<!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;
    }
    span {
        display: block;
        width: 350px;
    }
    .shadowObscurer {
        display: inline;
        position: absolute;
        width: 7px;
        height: 40px;
        background: white;
    }
    #rightCutHighlight {
        display: inline;
        padding-right: 3px;
        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;
        margin-left: -3px;
        padding: 0px;
        padding-left: 3px;
        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>
    <div style="position:relative; line-height:40px;">
      <span>
        This long word should break in a new line :
        <span id="rightCutHighlight">veryveryveryveryveryveryvery-</span>
        <div class="shadowObscurer" style="top:40px; margin-left:-3px;"></div><br>
        <div class="shadowObscurer" style="top:80px; margin-left:-7px;"></div>
        <span id="leftCutHighlight">-longword</span>. box-decoration-break is set to sliced,
        so the right edge of the previous line is cut, and the left edge of the highlight in this line is cut too.
      </span>
    </div>
    <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>
chromium/third_party/blink/web_tests/fast/box-decoration-break/box-decoration-break-rendering-expected.html
