Skip to content

Commit 93fc243

Browse files
josepharharchromium-wpt-export-bot
josepharhar
authored and
chromium-wpt-export-bot
committed
Remove special layout code for customizable select
Now that we can control the rendering of everything in customizable select in the UA stylesheet with -internal-appearance-base-select(), we don't need code in layout to specially construct the layout tree anymore. This adds some logic to the UA stylesheet and removes everything in LayoutFlexibleBox::IsChildAllowed in the case that the CustomizableSelect flag is disabled. Bug: 364348901, 427778335 Fixed: 452087739 Change-Id: Ia18b10714cf437e971f7dc265565835a3fbf84e9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6208372 Reviewed-by: Kent Tamura <[email protected]> Reviewed-by: Joey Arhar <[email protected]> Commit-Queue: Joey Arhar <[email protected]> Cr-Commit-Position: refs/heads/main@{#1564394}
1 parent 8d423fc commit 93fc243

File tree

7 files changed

+154
-1
lines changed

7 files changed

+154
-1
lines changed

‎html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,6 @@
6060
border-radius: 0.5em;
6161
cursor: default;
6262
text-align: inherit;
63-
/* TODO(crbug.com/41483940): Make display match the UA stylesheet. */
6463
display: inline-flex;
6564
gap: 0.5em;
6665
overflow-x: hidden;

‎html/semantics/forms/the-select-element/customizable-select/select-appearance-sizing-in-flex-ref.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@
1313
select {
1414
appearance: base-select;
1515
}
16+
17+
::picker-icon {
18+
display: none;
19+
}
1620
</style>
1721

1822
<div class="container">

‎html/semantics/forms/the-select-element/customizable-select/select-appearance-sizing-in-flex.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,13 @@
2020
select, .after {
2121
white-space: nowrap;
2222
}
23+
24+
/* ::picker-icon will render inline in this test but on a new line in the
25+
* reference because the select's inner element is display:block and can't be
26+
* changed. */
27+
::picker-icon {
28+
display: none;
29+
}
2330
</style>
2431

2532
<div class="container">

‎html/semantics/forms/the-select-element/customizable-select/select-display-block-ref.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<link rel=stylesheet href="resources/customizable-select-styles.css">
3+
4+
<style>
5+
.customizable-select-button {
6+
display: block;
7+
width: 100px;
8+
}
9+
.customizable-select-button::after {
10+
display: block;
11+
}
12+
</style>
13+
14+
<div class=customizable-select-button popovertarget=popover id=button>
15+
<span class=customizable-select-selectedcontent>one</span>
16+
</div>

‎html/semantics/forms/the-select-element/customizable-select/select-display-block.tentative.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html class=reftest-wait>
3+
<meta name=fuzzy content="maxDifference=0-3;totalPixels=0-1">
4+
<link rel=author href="mailto:[email protected]">
5+
<link rel=help href="https://github.com/whatwg/html/issues/9799">
6+
<link rel=match href="select-display-block-ref.html">
7+
<script src="/resources/testdriver.js"></script>
8+
<script src="/resources/testdriver-vendor.js"></script>
9+
10+
<style>
11+
select, ::picker(select) {
12+
appearance: base-select;
13+
}
14+
select {
15+
width: 100px;
16+
}
17+
.block {
18+
display: block;
19+
}
20+
</style>
21+
22+
<select>
23+
<option>one</option>
24+
<option>two</option>
25+
</select>
26+
27+
<script>
28+
(async () => {
29+
await new Promise(requestAnimationFrame);
30+
await new Promise(requestAnimationFrame);
31+
document.querySelector('select').classList.add('block');
32+
await new Promise(requestAnimationFrame);
33+
await new Promise(requestAnimationFrame);
34+
document.documentElement.classList.remove('reftest-wait');
35+
})();
36+
</script>

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
3+
<style>
4+
div {
5+
display: inline-grid;
6+
width: 200px;
7+
height: 200px;
8+
box-sizing: border-box;
9+
vertical-align: top;
10+
place-items: center;
11+
background: orange;
12+
padding: 8px;
13+
margin: 0;
14+
border: none;
15+
border-radius: 0;
16+
grid-template-rows: 1fr 1fr;
17+
grid-template-columns: 1fr 1fr;
18+
gap: 0;
19+
20+
&::before {
21+
content: 'before';
22+
grid-row: 1;
23+
grid-column: 1;
24+
background: yellow;
25+
padding: 8px;
26+
}
27+
28+
&::after {
29+
content: 'after';
30+
grid-row: 2;
31+
grid-column: 2;
32+
background: yellow;
33+
padding: 8px;
34+
}
35+
}
36+
</style>
37+
38+
<div>
39+
<template shadowrootmode="open">
40+
<div></div>
41+
</template>
42+
</div>

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

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<link rel=author href="mailto:[email protected]">
3+
<link rel=help href="https://issues.chromium.org/issues/452087739">
4+
<link rel=match href="select-grid-before-after-ref.html">
5+
6+
<style>
7+
select {
8+
appearance: base-select;
9+
10+
&::picker-icon {
11+
display: none;
12+
}
13+
}
14+
15+
select {
16+
display: inline-grid;
17+
width: 200px;
18+
height: 200px;
19+
box-sizing: border-box;
20+
vertical-align: top;
21+
place-items: center;
22+
background: orange;
23+
padding: 8px;
24+
margin: 0;
25+
border: none;
26+
border-radius: 0;
27+
grid-template-rows: 1fr 1fr;
28+
grid-template-columns: 1fr 1fr;
29+
gap: 0;
30+
31+
&::before {
32+
content: 'before';
33+
grid-row: 1;
34+
grid-column: 1;
35+
background: yellow;
36+
padding: 8px;
37+
}
38+
39+
&::after {
40+
content: 'after';
41+
grid-row: 2;
42+
grid-column: 2;
43+
background: yellow;
44+
padding: 8px;
45+
}
46+
}
47+
</style>
48+
49+
<select></select>

0 commit comments

Comments
 (0)