Nicolas Chevobbe
c9eff182af
When the currently selected element is a pseudo element (::after, ::before, …), the call to selectorMatchesElement would always return false as it doesn't handle anonymous element. To fix this, we retrieve the eventual bindingElement and pseudo of the selected element, that we pass together to selectorMatchesElement. Some test cases are added to make sure this works properly now. We also move `checkMatchedSelectorForProperty` to head.js so we can easily reuse it in different tests. Differential Revision: https://phabricator.services.mozilla.com/D272458
139 lines
1.9 KiB
HTML
139 lines
1.9 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 {
|
|
color: blue;
|
|
}
|
|
.topleft:before {
|
|
top:0;
|
|
left:0;
|
|
}
|
|
:where(.topleft)::before {
|
|
top:10px;
|
|
left:20px;
|
|
color: lime;
|
|
}
|
|
.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>
|