diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-masking/clip | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-masking/clip')
42 files changed, 743 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-absolute-positioned-001.html b/testing/web-platform/tests/css/css-masking/clip/clip-absolute-positioned-001.html new file mode 100644 index 0000000000..c5b0d9001c --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-absolute-positioned-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property and rect function on div with position: absolute</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-absolute-positioned-ref.html"> + <meta name="assert" content="The clip property should clip elements whose + layout are governed by the CSS box model and that are abolutely positioned + with 'position: absolute;'. On pass you should see a green square and no + red."> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div style="width: 100px; height: 100px; border: solid red 50px; position: absolute; background-color: green; clip: rect(50px, 150px, 150px, 50px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-absolute-positioned-002.html b/testing/web-platform/tests/css/css-masking/clip/clip-absolute-positioned-002.html new file mode 100644 index 0000000000..53b2517a27 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-absolute-positioned-002.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property and rect function on div with position: fixed</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-absolute-positioned-ref.html"> + <meta name="assert" content="The clip property should clip elements whose + layout are governed by the CSS box model and that are abolutely positioned + with 'position: fixed;'. On pass you should see a green square and no + red."> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div style="width: 100px; height: 100px; border: solid red 50px; position: fixed; background-color: green; clip: rect(50px, 150px, 150px, 50px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-filter-order-ref.html b/testing/web-platform/tests/css/css-masking/clip/clip-filter-order-ref.html new file mode 100644 index 0000000000..fe9511a8df --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-filter-order-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Clip should be applied after filtering</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> + +<style> + body { margin: 0 } + #testcase { + position: absolute; + left: 10px; + width: 200px; + height: 200px; + background: green; + will-change: transform; + } +</style> + +<div> + <p>Expected: A green box.<br> + There should be no red visible.<br> + There should be a crisp, clipped edge around the green box (no blurring).</p> +</div> + +<div id="testcase"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-filter-order.html b/testing/web-platform/tests/css/css-masking/clip/clip-filter-order.html new file mode 100644 index 0000000000..0570d02b85 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-filter-order.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Clip should be applied after filtering</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#placement"> +<link rel="match" href="clip-filter-order-ref.html"> + +<style> + body { margin: 0 } + #testcase { + position: absolute; + left: 10px; + width: 400px; + height: 400px; + background: green; + will-change: transform; + filter: drop-shadow(16px 16px 20px red); + clip: rect(0px, 200px, 200px, 0px); + } +</style> + +<div> + <p>Expected: A green box.<br> + There should be no red visible.<br> + There should be a crisp, clipped edge around the green box (no blurring).</p> +</div> + +<div id="testcase"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-fixed-pos-transform-descendant-001-ref.html b/testing/web-platform/tests/css/css-masking/clip/clip-fixed-pos-transform-descendant-001-ref.html new file mode 100644 index 0000000000..ed78cb7338 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-fixed-pos-transform-descendant-001-ref.html @@ -0,0 +1,11 @@ +<!doctype html> +<title>CSS Test Reference</title> +<style> + html, body { margin: 0 } + div { + width: 100px; + height: 100px; + background: lime; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-fixed-pos-transform-descendant-001.html b/testing/web-platform/tests/css/css-masking/clip/clip-fixed-pos-transform-descendant-001.html new file mode 100644 index 0000000000..395b0bc964 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-fixed-pos-transform-descendant-001.html @@ -0,0 +1,38 @@ +<!doctype html> +<title>CSS Masking: Transformed descendants of a fixed pos element under a clipped element get properly clipped</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="match" href="clip-fixed-pos-transform-descendant-001-ref.html"> +<link rel="help" href="https://drafts.fxtf.org/css-masking/#clip-property"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1495791"> +<style> +html, body { margin: 0; } + +#clip { + height: 100px; + width: 100px; + background: lime; + clip: rect(0, auto, auto, 0); + position: absolute; +} + +#fixed { + position: fixed; + top: 0; + left: 0; + width: 100px; + height: 100px; +} + +#clipped { + height: 100px; + width: 100px; + background: red; + transform: translateY(100px); +} +</style> +<div id="clip"> + <div id="fixed"> + <div id="clipped"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-001.html b/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-001.html new file mode 100644 index 0000000000..b295c89ba3 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-001.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property does not clip on with negative values - 1</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-full-ref.html"> + <meta name="assert" content="Negative values are permitted on rect function + for clip. Test that whole element is clipped if bottom edge is before top + edge. On pass you should see a green square and no red."> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div style="background-color: green; width: 200px; height: 200px;"> + <div style="width: 200px; height: 200px; background-color: red; position: absolute; clip: rect(0, -50px, 200px, 50px);"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-002.html b/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-002.html new file mode 100644 index 0000000000..dd92e5b774 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-002.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property does not clip on with negative values - 2</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-full-ref.html"> + <meta name="assert" content="Negative values are permitted on rect function + for clip. Test that whole element is clipped if right edge is before left + edge. On pass you should see a green square and no red."> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div style="background-color: green; width: 200px; height: 200px;"> + <div style="width: 200px; height: 200px; background-color: red; position: absolute; clip: rect(50px, 200px, -50px, 0);"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-003.html b/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-003.html new file mode 100644 index 0000000000..5118135345 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-003.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property does not clip on with negative values - 3</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-vertical-stripe-ref.html"> + <meta name="assert" content="Negative values are permited on rect function + for clip. Test that left edge can be negative. On pass you should see a + vertical blue stripe."> +</head> +<body> + <p>The test passes if there is only a vertical blue stripe.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(0, 50px, 200px, -50px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-004.html b/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-004.html new file mode 100644 index 0000000000..1fb5add9da --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-004.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property does not clip on with negative values - 4</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-horizontal-stripe-ref.html"> + <meta name="assert" content="Negative values are permited on rect function + for clip. Test that top edge can be negative. On pass you should see a + horizontal blue stripe."> +</head> +<body> + <p>The test passes if there is only a horizontal blue stripe.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(-50px, 200px, 50px, 0);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-no-clipping-001.html b/testing/web-platform/tests/css/css-masking/clip/clip-no-clipping-001.html new file mode 100644 index 0000000000..3a63c2ca71 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-no-clipping-001.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property does not clip on 'auto'</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-no-clipping-ref.html"> + <meta name="assert" content="The clip property should on 'auto'. On pass + you should see a green box with a blue border."> +</head> +<body> + <p>The test passes if there is a green square with a blue border.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: auto"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-no-clipping-002.html b/testing/web-platform/tests/css/css-masking/clip/clip-no-clipping-002.html new file mode 100644 index 0000000000..a09e6a0a85 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-no-clipping-002.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property does not clip overflowing content on 'auto'.</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-no-clipping-ref.html"> + <meta name="assert" content="The clip property should not clip overflowing + content of elements whose layout are governed by the CSS box model, the + position is absolute and the clip value is 'auto'. On pass you should see a + a green square with a blue border."> +</head> +<body> + <p>The test passes if there is a green square with a blue border.</p> + <div style="width: 100px; height: 100px; position: absolute; clip: auto;"> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green;"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-no-stacking-context-ref.html b/testing/web-platform/tests/css/css-masking/clip/clip-no-stacking-context-ref.html new file mode 100644 index 0000000000..056af22375 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-no-stacking-context-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<p>Expected: A green box with no red visible.</p> +<div style="width: 100px; height: 100px; background: green;"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-no-stacking-context.html b/testing/web-platform/tests/css/css-masking/clip/clip-no-stacking-context.html new file mode 100644 index 0000000000..cbd07ee638 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-no-stacking-context.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Clip does not create a stacking context</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#propdef-clip"> +<link rel="match" href="clip-no-stacking-context-ref.html"> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> + +<style> + #bottom { + position: absolute; + width: 100px; + height: 100px; + background: red; + z-index: 1; + } + #clip { + position: absolute; + clip: rect(0px, 100px, 100px, 0px); + } + #top { + position: absolute; + width: 100px; + height: 100px; + background: green; + z-index: 3; + } +</style> + +<p>Expected: A green box with no red visible.</p> +<div id="bottom"></div> +<!-- If #clip creates a stacking context, it will be below #bottom (which has a + higher z-index) which will force #top to be below #bottom as well. This + should not happen because #clip should not create a stacking context. --> +<div id="clip"> + <div id="top"></div> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-001.html b/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-001.html new file mode 100644 index 0000000000..613f6afebc --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property and rect function on not absolutely positioned div - 1</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-no-clipping-ref.html"> + <meta name="assert" content="The clip property should be ignored on + elements whose layout are governed by the CSS box model and are not + abolutely positioned. On pass you should see a green square with a blue + border."> +</head> +<body> + <p>The test passes if there is a green square with a blue border.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; clip: rect(50px, 150px, 150px, 50px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-002.html b/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-002.html new file mode 100644 index 0000000000..4d071323f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-002.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property and rect function on not absolutely positioned div - 2</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-no-clipping-ref.html"> + <meta name="assert" content="The clip property should be ignored on + elements whose layout are governed by the CSS box model and are not + abolutely positioned. Creating a stacking context with z-index does not + influence clipping behavior. On pass you should see a green box square with + a blue border."> +</head> +<body> + <p>The test passes if there is a green square with a blue border.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; z-index: 10; clip: rect(50px, 150px, 150px, 50px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-003.html b/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-003.html new file mode 100644 index 0000000000..ee3765db7a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-003.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property and rect function on not absolutely positioned div - 3</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-no-clipping-ref.html"> + <meta name="assert" content="The clip property should be ignored on + elements whose layout are governed by the CSS box model and are not + abolutely positioned. Creating a 3d rednering context does not influence + clipping behavior. On pass you should see a green square with a blue + border."> +</head> +<body style="perspective: 400px;"> + <p>The test passes if there is a green square with a blue border.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; transform-style: preserve-3d; transform: translate3d(0, 0, 0); clip: rect(50px, 150px, 150px, 50px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-004.html b/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-004.html new file mode 100644 index 0000000000..56825d10f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-004.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property and rect function on not absolutely positioned div - 4</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-no-clipping-ref.html"> + <meta name="assert" content="The clip property should be ignored on + elements whose layout are governed by the CSS box model and are not + abolutely positioned. position: relative does not influence clipping + behavior. On pass you should see a green square with a blue border."> +</head> +<body> + <p>The test passes if there is a green square with a blue border.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: relative; clip: rect(50px, 150px, 150px, 50px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-001.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-001.html new file mode 100644 index 0000000000..6a1a064059 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-001.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property with rect function and auto values clip to border box - 1</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-overflow-hidden-ref.html"> + <meta name="assert" content="A value of 'auto' in the rect function is + equal to the certain edge of the border box. The content should be clipped + to the border box. On pass you see a blue square and a smaller green square + in the bottom right corner of the blue square."> +</head> +<body> + <p>The test passes if there is a blue square and a smaller green square in the bottom right corner of the blue square.</p> + <div style="position: absolute; clip: rect(auto, auto, auto, auto); width: 100px; height: 100px;"> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green;"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-002.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-002.html new file mode 100644 index 0000000000..0ee45183b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-002.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property with rect function and auto values clip to border box - 2</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-no-clipping-ref.html"> + <meta name="assert" content="A value of 'auto' in the rect function is + equal to the certain 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 green square with a blue border."> +</head> +<body> + <p>The test passes if there is a green square with a blue border.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(auto, auto, auto, auto); box-shadow: 0 0 10px red;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-003.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-003.html new file mode 100644 index 0000000000..5f12ae4863 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-003.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property with rect function and auto value for top 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-top-ref.html"> + <meta name="assert" content="A value of 'auto' for 'top' 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 horizontal green stripe under a horizontal blue stripe."> +</head> +<body> + <p>The test passes if there is a horizontal green stripe under a horizontal blue stripe.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(auto, 150px, 100px, 50px); box-shadow: 0 0 10px red;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-004.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-004.html new file mode 100644 index 0000000000..d5d5ce9b31 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-004.html @@ -0,0 +1,18 @@ +<!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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-005.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-005.html new file mode 100644 index 0000000000..b2b3b13a49 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-005.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property with rect function and auto value for bottom 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-bottom-ref.html"> + <meta name="assert" content="A value of 'auto' for 'bottom' 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 horizontal blue stripe under a horizontal green stripe."> +</head> +<body> + <p>The test passes if there is a horizontal blue stripe under a horizontal green stripe.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(100px, 150px, auto, 50px); box-shadow: 0 0 10px red;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-006.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-006.html new file mode 100644 index 0000000000..410b93d28b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-006.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property with rect function and auto value for left 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-left-ref.html"> + <meta name="assert" content="A value of 'auto' for 'left' 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 green stripe on the right side of a vertical blue stripe."> +</head> +<body> + <p>The test passes if there is a vertical green stripe on the right side of a vertical blue stripe.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(50px, 100px, 150px, auto); box-shadow: 0 0 10px red;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-001.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-001.html new file mode 100644 index 0000000000..d15b324a4f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test comma separation of rect function on clip - no commas</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property"> + <link rel="match" href="reference/clip-absolute-positioned-ref.html"> + <meta name="assert" content="Values for rect function on clip can be white + space or comma separated, but not both. Otherwise the property setting gets + ignored. Testing rect function with white space separation. On pass you + should see a green square and no red."> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div style="width: 100px; height: 100px; border: solid red 50px; background-color: green; position: absolute; clip: rect(50px 150px 150px 50px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-002.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-002.html new file mode 100644 index 0000000000..aad2aebe67 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-002.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test comma separation of rect function on clip - no comma between 1st and 2nd 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/#clip-property"> + <link rel="match" href="reference/clip-no-clipping-ref.html"> + <meta name="assert" content="Values for rect function on clip can be white + space or comma separated, but not both. Otherwise the property setting gets + ignored. Testing rect function without comma separation between 1st and 2nd + value. On pass you should see a green square with a blue border."> +</head> +<body> + <p>The test passes if there is a green square with a blue border.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(50px 150px, 150px, 50px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-003.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-003.html new file mode 100644 index 0000000000..875e97173e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-003.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test comma separation of rect function on clip - no comma between 2nd and 3rd 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/#clip-property"> + <link rel="match" href="reference/clip-no-clipping-ref.html"> + <meta name="assert" content="Values for rect function on clip can be white + space or comma separated, but not both. Otherwise the property setting gets + ignored. Testing rect function without comma separation between 2nd and 3rd + value. On pass you should see a green square with a blue border."> +</head> +<body> + <p>The test passes if there is a green square with a blue border.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(50px, 150px 150px, 50px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-004.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-004.html new file mode 100644 index 0000000000..2a8b9305df --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-004.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test comma separation of rect function on clip - no comma between 3rd and 4th 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/#clip-property"> + <link rel="match" href="reference/clip-no-clipping-ref.html"> + <meta name="assert" content="Values for rect function on clip can be white + space or comma separated, but not both. Otherwise the property setting gets + ignored. Testing rect function without comma separation between 3rd and 4th + value. On pass you should see a green square with a blue border."> +</head> +<body> + <p>The test passes if there is a green square with a blue border.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(50px, 150px, 150px 50px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-scroll.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-scroll.html new file mode 100644 index 0000000000..0c84ee299a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-scroll.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>CSS Masking: Test clip property with rect function with overflow:scroll</title> +<link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property"> +<link rel="match" href="reference/clip-rect-scroll-ref.html"> +<html class="reftest-wait"> +<p>The test passes if there is a green square containing text (which can be scrolled +with mouse wheel or touch). No scrollbars should be seen.</p> +<div id="target" style="position: absolute; clip: rect(10px,100px,100px,10px); + width: 200px; height: 200px; overflow: scroll; background: red"> + <div style="position: relative; top: 100px; + width: 100px; height: 100px; background: green"> + </div> + <div style="height: 1000px"></div> +</div> +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + target.scrollTop = 100; + document.documentElement.classList.remove("reftest-wait"); + }); +}); +</script> +</html> + diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-transform-order-2.html b/testing/web-platform/tests/css/css-masking/clip/clip-transform-order-2.html new file mode 100644 index 0000000000..bd8e909d76 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-transform-order-2.html @@ -0,0 +1,30 @@ +<!doctype html> +<title>Clips should be applied before transforms (when fixed positioned too)</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#placement"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1524966"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="match" href="clip-filter-order-ref.html"> + +<style> + body { margin: 0; overflow: hidden; } + #testcase { + position: fixed; + left: -100px; + width: 400px; + height: 400px; + background: green; + transform: translateX(110px); + clip: rect(0px, 200px, 200px, 0px); + } +</style> + +<div> + <p>Expected: A green box.<br> + There should be no red visible.<br> + There should be a crisp, clipped edge around the green box (no blurring).</p> +</div> + +<div id="testcase"><div></div></div> + +<div id="padding" style="height: 100vh"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-transform-order.html b/testing/web-platform/tests/css/css-masking/clip/clip-transform-order.html new file mode 100644 index 0000000000..1f24864bc9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-transform-order.html @@ -0,0 +1,28 @@ +<!doctype html> +<title>Clips should be applied before transforms</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#placement"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1524966"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="match" href="clip-filter-order-ref.html"> + +<style> + body { margin: 0 } + #testcase { + position: absolute; + left: -100px; + width: 400px; + height: 400px; + background: green; + transform: translateX(110px); + clip: rect(0px, 200px, 200px, 0px); + } +</style> + +<div> + <p>Expected: A green box.<br> + There should be no red visible.<br> + There should be a crisp, clipped edge around the green box (no blurring).</p> +</div> + +<div id="testcase"><div></div></div> diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-absolute-positioned-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-absolute-positioned-ref.html new file mode 100644 index 0000000000..2a9a49fd3a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-absolute-positioned-ref.html @@ -0,0 +1,11 @@ +<!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 green square and no red.</p> + <div style="width: 100px; height: 100px; border: 50px solid white; background-color: green;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-full-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-full-ref.html new file mode 100644 index 0000000000..f556d5f12a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-full-ref.html @@ -0,0 +1,11 @@ +<!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 green square and no red.</p> + <div style="width: 200px; height: 200px; background-color: green;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-horizontal-stripe-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-horizontal-stripe-ref.html new file mode 100644 index 0000000000..fccb18318d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-horizontal-stripe-ref.html @@ -0,0 +1,11 @@ +<!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 only a horizontal blue stripe.</p> + <div style="width: 200px; height: 50px; background-color: blue;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-no-clipping-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-no-clipping-ref.html new file mode 100644 index 0000000000..724f8c5194 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-no-clipping-ref.html @@ -0,0 +1,11 @@ +<!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 green square with a blue border.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-overflow-hidden-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-overflow-hidden-ref.html new file mode 100644 index 0000000000..e6a6e125e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-overflow-hidden-ref.html @@ -0,0 +1,13 @@ +<!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 blue square and a smaller green square in the bottom right corner of the blue square.</p> + <div style="overflow: hidden; width: 100px; height: 100px;"> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green;"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-bottom-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-bottom-ref.html new file mode 100644 index 0000000000..9642435bf1 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-bottom-ref.html @@ -0,0 +1,13 @@ +<!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 horizontal blue stripe under a horizontal green stripe.</p> + <div style="background-color: blue; width: 100px; height: 100px; border-left: 50px solid white; border-top: 100px solid white"> + <div style="width: 100px; height: 50px; background-color: green;"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-left-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-left-ref.html new file mode 100644 index 0000000000..b6dd6e0a48 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-left-ref.html @@ -0,0 +1,13 @@ +<!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 green stripe on the right side of a vertical blue stripe.</p> + <div style="background-color: green; width: 100px; height: 100px; border-top: 50px solid white;"> + <div style="width: 50px; height: 100px; background-color: blue;"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-right-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-right-ref.html new file mode 100644 index 0000000000..09b90e7614 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-right-ref.html @@ -0,0 +1,13 @@ +<!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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-scroll-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-scroll-ref.html new file mode 100644 index 0000000000..a647e8a0c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-scroll-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<p>The test passes if there is a green square containing text (which can be scrolled +with mouse wheel or touch). No scrollbars should be seen.</p> +<div style="position: relative; top: 10px; left: 10px; width: 90px; height: 90px; background: green"> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-top-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-top-ref.html new file mode 100644 index 0000000000..5ec30181f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-top-ref.html @@ -0,0 +1,13 @@ +<!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 horizontal green stripe under a horizontal blue stripe.</p> + <div style="background-color: green; width: 100px; height: 100px; margin-left: 50px;"> + <div style="width: 100px; height: 50px; background-color: blue;"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-vertical-stripe-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-vertical-stripe-ref.html new file mode 100644 index 0000000000..96ccc2c19c --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-vertical-stripe-ref.html @@ -0,0 +1,11 @@ +<!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 only a vertical blue stripe.</p> + <div style="width: 50px; height: 200px; background-color: blue;"></div> +</body> +</html>
\ No newline at end of file |