Skip to content

Commit cf7b570

Browse files
nt1mnt1m
authored
Add tests for chaining ::picker(select) with pseudo-elements (#58215)
WebKit export of https://bugs.webkit.org/show_bug.cgi?id=309052
1 parent decd439 commit cf7b570

12 files changed

Lines changed: 397 additions & 0 deletions

‎html/semantics/forms/the-select-element/customizable-select/select-picker-pseudo-backdrop-ref.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<link rel=stylesheet href="resources/customizable-select-styles.css">
4+
5+
<style>
6+
body {
7+
background: green;
8+
color: green;
9+
}
10+
</style>
11+
12+
<button class="customizable-select-button" popovertarget="popover" id="button">
13+
<span class="customizable-select-selectedcontent">one</span>
14+
</button>
15+
<div id="popover" popover="auto" class="customizable-select-popover">
16+
<div class="customizable-select-option selected">one</div>
17+
<div class="customizable-select-option">two</div>
18+
</div>
19+
20+
<script>
21+
document.getElementById("popover").showPopover({ source: button });
22+
</script>

‎html/semantics/forms/the-select-element/customizable-select/select-picker-pseudo-backdrop.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html class="reftest-wait">
3+
<meta charset="utf-8">
4+
<title>CSS ::backdrop pseudo-element on select::picker(select)</title>
5+
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
6+
<link rel="help" href="https://drafts.csswg.org/css-forms/#the-picker-pseudo-element">
7+
<link rel="help" href="https://drafts.csswg.org/css-position-4/#backdrop">
8+
<link rel="match" href="select-picker-pseudo-backdrop-ref.html">
9+
<script src="/resources/testdriver.js"></script>
10+
<script src="/resources/testdriver-vendor.js"></script>
11+
<style>
12+
select, select::picker(select) {
13+
appearance: base-select;
14+
}
15+
16+
/*
17+
* Make the select button invisible against the backdrop color so that
18+
* the select button being covered by the backdrop (in this test) vs.
19+
* being on the green body (in the reference) produces the same visual.
20+
*/
21+
body {
22+
background: red;
23+
color: green;
24+
}
25+
26+
select::picker(select)::backdrop {
27+
background: green;
28+
}
29+
</style>
30+
31+
<select>
32+
<option>one</option>
33+
<option>two</option>
34+
</select>
35+
36+
<script>
37+
(async () => {
38+
await test_driver.bless();
39+
document.querySelector("select").showPicker();
40+
document.documentElement.classList.remove("reftest-wait");
41+
})();
42+
</script>

‎html/semantics/forms/the-select-element/customizable-select/select-picker-pseudo-before-after-ref.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<link rel=stylesheet href="resources/customizable-select-styles.css">
4+
5+
<style>
6+
.before-placeholder {
7+
height: 20px;
8+
background: lime;
9+
}
10+
11+
.after-placeholder {
12+
height: 20px;
13+
background: blue;
14+
}
15+
</style>
16+
17+
<button class="customizable-select-button" popovertarget="popover" id="button">
18+
<span class="customizable-select-selectedcontent">one</span>
19+
</button>
20+
<div id="popover" popover="auto" class="customizable-select-popover">
21+
<div class="before-placeholder"></div>
22+
<div class="customizable-select-option selected">one</div>
23+
<div class="customizable-select-option">two</div>
24+
<div class="after-placeholder"></div>
25+
</div>
26+
27+
<script>
28+
document.getElementById("popover").showPopover({ source: button });
29+
</script>

‎html/semantics/forms/the-select-element/customizable-select/select-picker-pseudo-before-after.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html class="reftest-wait">
3+
<meta charset="utf-8">
4+
<title>CSS ::before and ::after pseudo-elements on select::picker(select)</title>
5+
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
6+
<link rel="help" href="https://drafts.csswg.org/css-forms/#the-picker-pseudo-element">
7+
<link rel="match" href="select-picker-pseudo-before-after-ref.html">
8+
<script src="/resources/testdriver.js"></script>
9+
<script src="/resources/testdriver-vendor.js"></script>
10+
<style>
11+
select, select::picker(select) {
12+
appearance: base-select;
13+
}
14+
15+
select::picker(select)::before {
16+
content: "";
17+
display: block;
18+
height: 20px;
19+
background: lime;
20+
}
21+
22+
select::picker(select)::after {
23+
content: "";
24+
display: block;
25+
height: 20px;
26+
background: blue;
27+
}
28+
</style>
29+
30+
<select>
31+
<option>one</option>
32+
<option>two</option>
33+
</select>
34+
35+
<script>
36+
(async () => {
37+
await test_driver.bless();
38+
document.querySelector("select").showPicker();
39+
document.documentElement.classList.remove("reftest-wait");
40+
})();
41+
</script>

‎html/semantics/forms/the-select-element/customizable-select/select-picker-pseudo-first-letter-first-line-ref.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<link rel=stylesheet href="resources/customizable-select-styles.css">
4+
5+
<style>
6+
.picker-first-letter {
7+
color: red;
8+
font-size: 20px;
9+
}
10+
11+
.picker-first-line {
12+
color: navy;
13+
}
14+
</style>
15+
16+
<button class="customizable-select-button" popovertarget="popover" id="button">
17+
<span class="customizable-select-selectedcontent">one</span>
18+
</button>
19+
<div id="popover" popover="auto" class="customizable-select-popover">
20+
<div><span class="picker-first-line"><span class="picker-first-letter">H</span>ello World</span></div>
21+
<div class="customizable-select-option selected">one</div>
22+
<div class="customizable-select-option">two</div>
23+
</div>
24+
25+
<script>
26+
document.getElementById("popover").showPopover({ source: button });
27+
</script>

‎html/semantics/forms/the-select-element/customizable-select/select-picker-pseudo-first-letter-first-line.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html class="reftest-wait">
3+
<meta charset="utf-8">
4+
<title>CSS ::first-letter and ::first-line pseudo-elements on select::picker(select)</title>
5+
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
6+
<link rel="help" href="https://drafts.csswg.org/css-forms/#the-picker-pseudo-element">
7+
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#first-line-pseudo">
8+
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#first-letter-pseudo">
9+
<link rel="match" href="select-picker-pseudo-first-letter-first-line-ref.html">
10+
<script src="/resources/testdriver.js"></script>
11+
<script src="/resources/testdriver-vendor.js"></script>
12+
<style>
13+
select, select::picker(select) {
14+
appearance: base-select;
15+
}
16+
17+
select::picker(select)::first-letter {
18+
color: red;
19+
font-size: 20px;
20+
}
21+
22+
select::picker(select)::first-line {
23+
color: navy;
24+
}
25+
</style>
26+
27+
<select>
28+
<div>Hello World</div>
29+
<option>one</option>
30+
<option>two</option>
31+
</select>
32+
33+
<script>
34+
(async () => {
35+
await test_driver.bless();
36+
document.querySelector("select").showPicker();
37+
document.documentElement.classList.remove("reftest-wait");
38+
})();
39+
</script>

‎html/semantics/forms/the-select-element/customizable-select/select-picker-pseudo-highlight-ref.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<link rel=stylesheet href="resources/customizable-select-styles.css">
4+
5+
<style>
6+
.highlight {
7+
background-color: green;
8+
color: white;
9+
}
10+
</style>
11+
12+
<button class="customizable-select-button" popovertarget="popover" id="button">
13+
<span class="customizable-select-selectedcontent"></span>
14+
</button>
15+
<div id="popover" popover="auto" class="customizable-select-popover">
16+
<span class="highlight">Hello</span> World
17+
</div>
18+
19+
<script>
20+
document.getElementById("popover").showPopover({ source: button });
21+
</script>

‎html/semantics/forms/the-select-element/customizable-select/select-picker-pseudo-highlight.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html class="reftest-wait">
3+
<meta charset="utf-8">
4+
<title>CSS ::highlight() pseudo-element on select::picker(select)</title>
5+
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
6+
<link rel="help" href="https://drafts.csswg.org/css-forms/#the-picker-pseudo-element">
7+
<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/#custom-highlight-pseudo">
8+
<link rel="match" href="select-picker-pseudo-highlight-ref.html">
9+
<script src="/resources/testdriver.js"></script>
10+
<script src="/resources/testdriver-vendor.js"></script>
11+
<style>
12+
select, select::picker(select) {
13+
appearance: base-select;
14+
}
15+
16+
select::picker(select)::highlight(example) {
17+
background-color: green;
18+
color: white;
19+
}
20+
</style>
21+
22+
<select>
23+
Hello World
24+
</select>
25+
26+
<script>
27+
(async () => {
28+
await test_driver.bless();
29+
document.querySelector("select").showPicker();
30+
31+
const select = document.querySelector("select");
32+
const textNode = [...select.childNodes].find(n => n.nodeType === Node.TEXT_NODE && n.nodeValue.includes("Hello"));
33+
const start = textNode.nodeValue.indexOf("Hello");
34+
const range = new Range();
35+
range.setStart(textNode, start);
36+
range.setEnd(textNode, start + 5); // "Hello"
37+
const highlight = new Highlight(range);
38+
CSS.highlights.set("example", highlight);
39+
40+
document.documentElement.classList.remove("reftest-wait");
41+
})();
42+
</script>

‎html/semantics/forms/the-select-element/customizable-select/select-picker-pseudo-selection-ref.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<link rel=stylesheet href="resources/customizable-select-styles.css">
4+
5+
<style>
6+
::selection {
7+
background-color: green;
8+
color: white;
9+
}
10+
</style>
11+
12+
<button class="customizable-select-button" popovertarget="popover" id="button">
13+
<span class="customizable-select-selectedcontent">one</span>
14+
</button>
15+
<div id="popover" popover="auto" class="customizable-select-popover">
16+
Hello World
17+
<div class="customizable-select-option selected">one</div>
18+
<div class="customizable-select-option">two</div>
19+
</div>
20+
21+
<script>
22+
document.getElementById("popover").showPopover({ source: button });
23+
24+
const popover = document.getElementById("popover");
25+
const textNode = [...popover.childNodes].find(n => n.nodeType === Node.TEXT_NODE && n.nodeValue.includes("Hello"));
26+
const start = textNode.nodeValue.indexOf("Hello");
27+
const range = document.createRange();
28+
range.setStart(textNode, start);
29+
range.setEnd(textNode, start + 5); // "Hello"
30+
window.getSelection().addRange(range);
31+
</script>

‎html/semantics/forms/the-select-element/customizable-select/select-picker-pseudo-selection.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html class="reftest-wait">
3+
<meta charset="utf-8">
4+
<title>CSS ::selection pseudo-element on select::picker(select)</title>
5+
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
6+
<link rel="help" href="https://drafts.csswg.org/css-forms/#the-picker-pseudo-element">
7+
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#selectordef-selection">
8+
<link rel="match" href="select-picker-pseudo-selection-ref.html">
9+
<script src="/resources/testdriver.js"></script>
10+
<script src="/resources/testdriver-vendor.js"></script>
11+
<style>
12+
select, select::picker(select) {
13+
appearance: base-select;
14+
}
15+
16+
select::picker(select)::selection {
17+
background-color: green;
18+
color: white;
19+
}
20+
</style>
21+
22+
<select>
23+
Hello World
24+
<option>one</option>
25+
<option>two</option>
26+
</select>
27+
28+
<script>
29+
(async () => {
30+
await test_driver.bless();
31+
document.querySelector("select").showPicker();
32+
33+
const select = document.querySelector("select");
34+
const textNode = [...select.childNodes].find(n => n.nodeType === Node.TEXT_NODE && n.nodeValue.includes("Hello"));
35+
const start = textNode.nodeValue.indexOf("Hello");
36+
const range = document.createRange();
37+
range.setStart(textNode, start);
38+
range.setEnd(textNode, start + 5); // "Hello"
39+
window.getSelection().addRange(range);
40+
41+
document.documentElement.classList.remove("reftest-wait");
42+
})();
43+
</script>

0 commit comments

Comments
 (0)