diff options
Diffstat (limited to 'devtools/client/inspector/rules/test/doc_pseudoelement.html')
-rw-r--r-- | devtools/client/inspector/rules/test/doc_pseudoelement.html | 188 |
1 files changed, 188 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/doc_pseudoelement.html b/devtools/client/inspector/rules/test/doc_pseudoelement.html new file mode 100644 index 0000000000..a6251c613c --- /dev/null +++ b/devtools/client/inspector/rules/test/doc_pseudoelement.html @@ -0,0 +1,188 @@ +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <style> + +body { + color: #333; +} + +.box { + float:left; + width: 128px; + height: 128px; + background: #ddd; + padding: 32px; + margin: 32px; + position:relative; +} + +.box:first-line { + color: orange; + background: red; +} + +.box:first-letter { + color: green; +} + +* { + cursor: default; +} + +nothing { + cursor: pointer; +} + +p::-moz-selection { + color: white; + background: black; +} +p::selection { + color: white; + background: black; +} + +p:first-line { + background: blue; +} +p:first-letter { + color: red; + font-size: 130%; +} + +.box:before { + background: green; + content: " "; + position: absolute; + height:32px; + width:32px; +} + +.box:after { + background: red; + content: " "; + position: absolute; + border-radius: 50%; + height:32px; + width:32px; + top: 50%; + left: 50%; + margin-top: -16px; + margin-left: -16px; +} + +.topleft:before { + top:0; + left:0; +} + +.topleft:first-line { + color: orange; +} +.topleft::selection { + color: orange; +} + +.topright:before { + top:0; + right:0; +} + +.bottomright:before { + bottom:10px; + right:10px; + color: red; +} + +.bottomright:before { + bottom:0; + right:0; +} + +.bottomleft:before { + bottom:0; + left:0; +} + +#list::marker { + color: purple; +} + +dialog::backdrop { + background-color: transparent; +} + +.highlights-container { + &::highlight(search) { + background-color: tomato; + color: gold; + } + + &::highlight(search) { + color: white; + } + + &::highlight(filter) { + background-color: purple; + } + + &::highlight(unused) { + background-color: cyan; + } +} + + + </style> + </head> + <body> + <h1>ruleview pseudoelement($("test"));</h1> + + <div id="topleft" class="box topleft"> + <p>Top Left<br />Position</p> + </div> + + <div id="topright" class="box topright"> + <p>Top Right<br />Position</p> + </div> + + <div id="bottomright" class="box bottomright"> + <p>Bottom Right<br />Position</p> + </div> + + <div id="bottomleft" class="box bottomleft"> + <p>Bottom Left<br />Position</p> + </div> + + <ol> + <li id="list" class="box">List element</li> + </ol> + + <dialog>In dialog</dialog> + + <section class="highlights-container"> + Firefox Developer Tools is a set of web developer tools built into Firefox. + You can use them to examine, edit, and debug HTML, CSS, and JavaScript. + </section> + + <script> + "use strict"; + // This is the only way to have the ::backdrop style to be applied + document.querySelector("dialog").showModal() + + // Register highlights for ::highlight pseudo elements + const highlightsContainer = document.querySelector(".highlights-container"); + + const searchRange = new Range(); + searchRange.setStart(highlightsContainer.firstChild, 0); + searchRange.setEnd(highlightsContainer.firstChild, 10); + CSS.highlights.set("search", new globalThis.Highlight(searchRange)); + + const filterRange = new Range(); + filterRange.setStart(highlightsContainer.firstChild, 20); + filterRange.setEnd(highlightsContainer.firstChild, 100); + CSS.highlights.set("filter", new globalThis.Highlight(filterRange)); + </script> + </body> +</html> |