227 lines
4.2 KiB
HTML
227 lines
4.2 KiB
HTML
<!-- 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;
|
|
}
|
|
|
|
:is(
|
|
dialog,
|
|
[popover],
|
|
:fullscreen
|
|
)::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;
|
|
}
|
|
}
|
|
|
|
input::slider-fill {
|
|
background: tomato;
|
|
}
|
|
input::slider-thumb {
|
|
background: gold;
|
|
}
|
|
input::slider-track {
|
|
background: seagreen;
|
|
}
|
|
|
|
.url-fragment-text-directives::target-text {
|
|
background-color: salmon;
|
|
}
|
|
|
|
details[open]::details-content {
|
|
color: hotpink;
|
|
border: 4px solid darkmagenta;
|
|
}
|
|
|
|
</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
|
|
<div id="in-dialog" popover>hello</div>
|
|
</dialog>
|
|
|
|
<label>Range <input type="range" class="slider"></label>
|
|
<label>Not range <input type="text" class="slider"></label>
|
|
|
|
<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>
|
|
|
|
<section class="url-fragment-text-directives">May the fox be with you</section>
|
|
|
|
<canvas></canvas>
|
|
|
|
<details open>
|
|
<summary>Summary</summary>
|
|
<h2>::details-content</h2>
|
|
<p>In details</p>
|
|
</details>
|
|
|
|
<script>
|
|
"use strict";
|
|
// This is the only way to have the ::backdrop style to be applied
|
|
document.querySelector("dialog").showModal()
|
|
document.querySelector("#in-dialog").showPopover()
|
|
|
|
// 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>
|