mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-05 08:35:26 +00:00
dc6e2e7d01
--HG-- rename : browser/devtools/styleinspector/test/browser_ruleview_pseudo-element.js => browser/devtools/styleinspector/test/browser_ruleview_pseudo-element_01.js
132 lines
1.8 KiB
HTML
132 lines
1.8 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;
|
|
}
|
|
|
|
</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>
|
|
|
|
</body>
|
|
</html>
|