Blitz - WPT: clip-rect-auto-004.html

wpt / css / css-masking / clip / clip-rect-auto-004.html

/css/css-masking/clip/clip-rect-auto-004.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Masking: Test clip property with rect function and auto value for right value</title>
    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property">
    <link rel="match" href="reference/clip-rect-right-ref.html">
    <meta name="assert" content="A value of 'auto' for 'right' in the rect
    function is equal to the top edge of the border box. The box shadow should
    be clipped, since it is painted outside the border box. On pass you should
    see a vertical blue stripe on the right side of a vertical green stripe.">
</head>
<body>
    <p>The test passes if there is a vertical blue stripe on the right side of a vertical green stripe.</p>
    <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(50px, auto, 150px, 100px); box-shadow: 0 0 10px red;"></div>
</body>
</html>

/css/css-masking/clip/reference/clip-rect-right-ref.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Reftest Reference</title>
    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
</head>
<body>
    <p>The test passes if there is a vertical blue stripe on the right side of a vertical green stripe.</p>
    <div style="background-color: blue; width: 100px; height: 100px; border-left: 100px solid white; border-top: 50px solid white;">
    	<div style="width: 50px; height: 100px; background-color: green;"></div>
    </div>
</body>
</html>