diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-masking/clip-path/reference | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-masking/clip-path/reference')
38 files changed, 411 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-circle-2-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-circle-2-ref.html new file mode 100644 index 0000000000..7794d32b3f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-circle-2-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <style type="text/css"> + body, div { + padding: 0; + margin: 0; + } + </style> +</head> +<body> + <p>The test passes if there is a full green circle.</p> + <div style="width: 200px; height: 200px; border-radius: 100px; background-color: green; position: absolute; left: 100px;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-circle-3-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-circle-3-ref.html new file mode 100644 index 0000000000..4cffe8837d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-circle-3-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <style type="text/css"> + body, div { + padding: 0; + margin: 0; + } + </style> +</head> +<body> + <p>The test passes if there is a full green circle.</p> + <div style="width: 200px; height: 200px; border-radius: 100px; background-color: green; position: relative; top: 100px;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-circle-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-circle-ref.html new file mode 100644 index 0000000000..c427e696bf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-circle-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 full green circle.</p> + <div style="width: 200px; height: 200px; border-radius: 100px; background-color: green;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-columns-shape-001-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-columns-shape-001-ref.html new file mode 100644 index 0000000000..4337cdf637 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-columns-shape-001-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<body style="margin: 0"> + <div style="width: 90px; height: 90px; margin-left: 105px; margin-top: 5px; background-color: green"></div> +</body> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-columns-shape-002-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-columns-shape-002-ref.html new file mode 100644 index 0000000000..4337cdf637 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-columns-shape-002-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<body style="margin: 0"> + <div style="width: 90px; height: 90px; margin-left: 105px; margin-top: 5px; background-color: green"></div> +</body> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-descendant-text-mutated-001-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-descendant-text-mutated-001-ref.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-descendant-text-mutated-001-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-document-element-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-document-element-ref.html new file mode 100644 index 0000000000..4608e54b20 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-document-element-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<style> +div { + position: absolute; + width: 50px; + height: 50px; + background: green; +} +</style> +<div style="top: 50px; left: 50px"></div> +<div style="top: 100px; left: 50px"></div> +<div style="top: 100px; left: 100px"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-ellipse-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-ellipse-ref.html new file mode 100644 index 0000000000..5adc91a5c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-ellipse-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 full green ellipse.</p> + <div style="margin-top: 50px; margin-left: 50px; position: absolute; width: 150px; height: 100px; border-top-right-radius: 75px 50px; border-bottom-right-radius: 75px 50px; border-top-left-radius: 75px 50px; border-bottom-left-radius: 75px 50px; background-color: green;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-filter-radius-clips-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-filter-radius-clips-ref.html new file mode 100644 index 0000000000..72bdf2202d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-filter-radius-clips-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div style="padding: 10px"> + <div id="blur" style="will-change: filter; width: 100px; height: 100px; background: lime"></div> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-001-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-001-ref.html new file mode 100644 index 0000000000..afc1d18f20 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-001-ref.html @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reference for clip-path's path function with nonzero</title> + <style type="text/css"> + #rect { + width: 100px; + height: 100px; + background-color: green; + clip-path: url("#clip"); + } + </style> +</head> +<body> + <p>The test passes if there are a green filled rect.</p> + <div id="rect"></div> + <svg height="0" width="0"> + <defs> + <clipPath id="clip"> + <path clip-rule="nonzero" d="M10,10h80v80h-80zM25,25h50v50h-50z"/> + </clipPath> + </defs> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-002-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-002-ref.html new file mode 100644 index 0000000000..d9ea5183fb --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-002-ref.html @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reference for clip-path's path function with evenodd</title> + <style type="text/css"> + #rect { + width: 100px; + height: 100px; + background-color: green; + clip-path: url("#clip"); + } + </style> +</head> +<body> + <p>The test passes if there are a green hollow rect.</p> + <div id="rect"></div> + <svg height="0" width="0"> + <defs> + <clipPath id="clip"> + <path clip-rule="evenodd" d="M10,10h80v80h-80zM25,25h50v50h-50z"/> + </clipPath> + </defs> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-with-zoom-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-with-zoom-ref.html new file mode 100644 index 0000000000..ef91c619c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-with-zoom-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <title>CSS Masking: Test clip-path property when the page is zoomed</title> + <style> + #rect { + width: 200px; + height: 200px; + background: green; + clip-path: path(nonzero, 'M0 0, L200 0, L0 200'); + } + </style> + <div id="rect"></div> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-rectangle-border-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-rectangle-border-ref.html new file mode 100644 index 0000000000..9a61c76902 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-rectangle-border-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 box with a blue border.</p> + <div style="width: 150px; 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-path/reference/clip-path-rectangle-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-rectangle-ref.html new file mode 100644 index 0000000000..1d3810a778 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-rectangle-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 box.</p> + <div style="margin-top: 50px; margin-left: 50px; position: absolute; width: 150px; height: 100px; background-color: green;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-ref-bottom-green-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-ref-bottom-green-ref.html new file mode 100644 index 0000000000..ad6abc4f91 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-ref-bottom-green-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <style> + html, body { + width: 100%; + height: 100%; + margin: 0; + } + </style> +</head> +<body> + <div style="width: 100%; height: 50%; margin-top: 50%; background-color: green; position: absolute;"></div> + <p style="position: absolute;">The test passes if the top half of the site is white and the bottom half of the site is green.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-ref-right-green-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-ref-right-green-ref.html new file mode 100644 index 0000000000..a19be598ca --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-ref-right-green-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <style> + html, body { + width: 100%; + height: 100%; + margin: 0; + } + </style> +</head> +<body> + <div style="width: 50%; height: 100%; margin-left: 50%; background-color: green; position: absolute;"></div> + <p style="position: absolute;">The test passes if the left half of the site is white and the right half of the site is green.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-box-001-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-box-001-ref.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-box-001-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-box-002-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-box-002-ref.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-box-002-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-box-003-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-box-003-ref.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-box-003-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-box-004-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-box-004-ref.html new file mode 100644 index 0000000000..3464a4712a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-box-004-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 50px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-restore-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-restore-ref.html new file mode 100644 index 0000000000..683511fd80 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-restore-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green;"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-scroll-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-scroll-ref.html new file mode 100644 index 0000000000..a647e8a0c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-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-path/reference/clip-path-shape-003-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-003-ref.html new file mode 100644 index 0000000000..46e098c4eb --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-003-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title>Reference of CSS Masking: Test clip-path property and shape function with nonzero fill</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"> +</head> +<style> + div { + width: 100px; + height: 100px; + } + #ref { + background-color: green; + clip-path: path(nonzero, "M 10 10, Q 40 0 60 20, T 90 0, c 10 40 20 20 -20 60, s -10 70 -40 -10"); + position: absolute; + } +</style> +<body> + <p>You should see no red.</p> + <div id="ref"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-004-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-004-ref.html new file mode 100644 index 0000000000..ec8f941079 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-004-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title>Reference of CSS Masking: Test clip-path property and shape function with nonzero fill</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"> +</head> +<style> + div { + width: 100px; + height: 100px; + } + #ref { + background-color: green; + clip-path: path(nonzero, "M 20 20 A 25 12 0 0 1 80 20, a 33 33 120 1 1 -40 50, A 20 25 0 0 0 20 20"); + position: absolute; + } +</style> +<body> + <p>You should see no red.</p> + <div id="ref"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-square-001-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-square-001-ref.html new file mode 100644 index 0000000000..6bc5a16754 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-square-001-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: 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; background-color: green; margin: 75px;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-square-002-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-square-002-ref.html new file mode 100644 index 0000000000..5230b0f2ff --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-square-002-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: 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: 50px; height: 50px; background-color: green; margin: 75px;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-stripes-001-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-stripes-001-ref.html new file mode 100644 index 0000000000..75d08dc59e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-stripes-001-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reftest reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p> + <div style="width: 100px; height: 100px; margin: 75px 0 0 25px; background-color: green;"> + <div style="width: 50px; height: 100px; background-color: lime;"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-stripes-002-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-stripes-002-ref.html new file mode 100644 index 0000000000..8dd1c926cb --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-stripes-002-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reftest reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p> + <div style="width: 50px; height: 50px; margin: 50px 0 0 25px; background-color: green;"> + <div style="width: 25px; height: 50px; background-color: lime;"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-stripes-003-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-stripes-003-ref.html new file mode 100644 index 0000000000..f4b7fa10f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-stripes-003-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reftest reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <meta name="flags" content="ahem"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +body { + margin: 0; +} +div { + height: 20px; + background-color: green; + padding: 0; + margin: 0; + font: 20px/1 Ahem; +} +div:nth-child(odd) { + margin-bottom: 5px; + background-color: blue; +} +</style> +<body> + <p>The test passes if you see a multiple green and blue stripe pairs. For each pair, the blue and green stripe must be of same length.</p> + <div style="width: 50%"></div> + <div style="width: 50%"></div> + + <div style="width: 20em"></div> + <div style="width: 20em"></div> + + <div style="width: 50vw"></div> + <div style="width: 50vw"></div> + + <div style="width: 40vh"></div> + <div style="width: 40vh"></div> + + <div style="width: calc(30% + 15px)"></div> + <div style="width: calc(30% + 15px)"></div> + + <div style="width: 30ex"></div> + <div style="width: 30ex"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-svg-text-css-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-svg-text-css-ref.html new file mode 100644 index 0000000000..8cf2cd253a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-svg-text-css-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/fonts/ahem.css" /> +<style> +text { + font: 50px/1 Ahem; +} +</style> +<svg> + <defs> + <clipPath id="c"> + <text x="30" y="50">Hello</text> + </clipPath> + </defs> + <rect width="200" height="100" fill="green" clip-path="url(#c)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-transform-mutated-001-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-transform-mutated-001-ref.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-transform-mutated-001-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-transform-mutated-002-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-transform-mutated-002-ref.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-transform-mutated-002-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-xywh-003-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-xywh-003-ref.html new file mode 100644 index 0000000000..12f219eca6 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-xywh-003-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Reftest Reference for xywh()</title> +<style> +#box { + margin-left: 50px; + margin-top: 50px; + position: absolute; + width: 150px; + height: 100px; + background-color: green; + border-radius: 20px / 20px; +} +</style> +<body> + <p>The test passes if there is a green box with round.</p> + <div id="box"></div> +</body> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/green-100x100.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/green-100x100.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/green-100x100.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/green-circle-100x100.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/green-circle-100x100.html new file mode 100644 index 0000000000..e1bd7e5f2f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/green-circle-100x100.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green; border-radius: 50px;"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/reference-local-url-with-base-001-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/reference-local-url-with-base-001-ref.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/reference-local-url-with-base-001-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/reference-mutated-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/reference-mutated-ref.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/reference-mutated-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/reference-nonexisting-existing-local-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/reference-nonexisting-existing-local-ref.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/reference-nonexisting-existing-local-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> |