Blitz - WPT: clip-border-area-box-decoration-break.html

wpt / css / css-backgrounds / background-clip / clip-border-area-box-decoration-break.html

/css/css-backgrounds/background-clip/clip-border-area-box-decoration-break.html

<!DOCTYPE html>
<html>
<head>
<title>CSS Backgrounds Test:  background-clip:border-area</title>
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#background-clip">
<link rel="match" href="clip-border-area-box-decoration-break-ref.html">
<meta name="fuzzy" content="maxDifference=0-255; totalPixels=0-480" />
<meta name="assert" content="background-clip: border-area respects box-decoration-break">
<style>
    div {
        margin: 20px;
        font-size: 24pt;
        line-height: 1.5em;
    }

    .test {
        border: 10px solid transparent;
        background-clip: border-area;
        background-image: url(../resources/blue-100.png);
    }

    .clone {
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }

    .slice {
        -webkit-box-decoration-break: slice;
        box-decoration-break: slice;
    }
</style>
</head>
<body>
<div>AAA<span class="test clone">AAA<br>AA</span>AA</div>
<div>AAA<span class="test slice">AAA<br>AA</span>AA</div>
</body>
</html>

/css/css-backgrounds/background-clip/clip-border-area-box-decoration-break-ref.html

<style>
    div {
        margin: 20px;
        font-size: 24pt;
        line-height: 1.5em;
    }

    .test {
        border: 10px solid blue;
    }

    .clone {
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }

    .slice {
        -webkit-box-decoration-break: slice;
        box-decoration-break: slice;
    }
</style>
</head>
<body>
<div>AAA<span class="test clone">AAA<br>AA</span>AA</div>
<div>AAA<span class="test slice">AAA<br>AA</span>AA</div>
</body>
</html>