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 /devtools/client/inspector/test/doc_inspector_highlighter_cssshapes.html | |
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 'devtools/client/inspector/test/doc_inspector_highlighter_cssshapes.html')
-rw-r--r-- | devtools/client/inspector/test/doc_inspector_highlighter_cssshapes.html | 93 |
1 files changed, 93 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/doc_inspector_highlighter_cssshapes.html b/devtools/client/inspector/test/doc_inspector_highlighter_cssshapes.html new file mode 100644 index 0000000000..0c38b8e636 --- /dev/null +++ b/devtools/client/inspector/test/doc_inspector_highlighter_cssshapes.html @@ -0,0 +1,93 @@ +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + html, body { + height: 100%; + margin: 0; + } + .wrapper { + width: 800px; + height: 800px; + background: #f06; + } + #polygon { + clip-path: polygon(0 0%, + 100px 50%, + 200px 0, + 300px 50%, + 400px 0, + 500px 50%, + 600px 0, + 700px 50%, + 800px 0, + 90% 100%, + 50% 60%, + 10% 100%); + } + #circle { + clip-path: circle(25% at 30% 40%); + } + #circle-without-position { + clip-path: circle(25%); + } + #ellipse { + clip-path: ellipse(40% 30% at 25% 30%) content-box; + padding: 20px; + } + #ellipse-padding-box { + clip-path: ellipse(40% 30% at 25% 30%) padding-box; + padding: 20px; + } + #inset { + clip-path: inset(200px 100px 30% 15%); + } + .svg { + width: 800px; + height: 800px; + } + #rect { + clip-path: polygon(0 0, + 100px 50%, + 200px 0, + 300px 50%, + 400px 0, + 500px 50%, + 600px 0, + 700px 50%, + 800px 0, + 90% 100%, + 50% 60%, + 10% 100%); + stroke: red; + stroke-width: 20px; + fill: blue; + } + #polygon-transform { + width: 600px; + height: 600px; + clip-path: polygon(0 0, + 100px 50%, + 200px 0, + 300px 50%, + 400px 0, + 500px 50%, + 600px 0, + 700px 50%, + 800px 0, + 90% 100%, + 50% 60%, + 10% 100%); + } +</style> +<div class="wrapper" id="polygon"></div> +<div class="wrapper" id="circle"></div> +<div class="wrapper" id="circle-without-position"></div> +<div class="wrapper" id="ellipse"></div> +<div class="wrapper" id="ellipse-padding-box"></div> +<div class="wrapper" id="inset"></div> +<div class="wrapper" id="polygon-transform"></div> +<svg class="svg"> + <rect id="rect" x="10" y="10" width="700" height="700"></rect> +</svg> |