Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-11 08:25:32 +01:00
Code Issues Projects Releases Packages Wiki Activity

Support single-value <select> elements (#35684)

Browse source 
https://github.com/user-attachments/assets/9aba75ff-4190-4a85-89ed-d3f3aa53d3b0



Among other things this adds a new `EmbedderMsg::ShowSelectElementMenu`
to tell the embedder to display a select popup at the given location.

This is a draft because some small style adjustments need to be made:
* the select element should always have the width of the largest option
* the border should be part of the shadow tree

Apart from that, it's mostly ready for review.

<details><summary>HTML for demo video</summary>

```html
<html>

<body>
<select id="c" name="choice">
  <option value="first">First Value</option>
  <option value="second">Second Value</option>
  <option value="third">Third Value</option>
</select>
</body>
</html>
```
</details>

---

<!-- Thank you for contributing to Servo! Please replace each `[ ]` by
`[X]` when the step is complete, and replace `___` with appropriate
data: -->
- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors
- [X] Part of https://github.com/servo/servo/issues/3551
- [ ] There are tests for these changes OR
- [ ] These changes do not require tests because ___

<!-- Also, please make sure that "Allow edits from maintainers" checkbox
is checked, so that we can help you if you get stuck somewhere along the
way.-->

<!-- Pull requests that do not address these steps are welcome, but they
will require additional verification as part of the review process. -->

---------

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
This commit is contained in:
Simon Wülker 2025-04-03 14:11:55 +02:00 • committed by GitHub
parent 6e9d01b908
commit 0e99539dab
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
32 changed files with 633 additions and 151 deletions
Download patch file Download diff file Expand all files Collapse all files

33
resources/servo.css
View file

@ -87,30 +87,6 @@ input[type="file"] {
border-style: none;
}
select {
border-style: solid;
border-width: 1px;
background: white;
}
select[multiple] { padding: 0em 0.25em; }
select:not([multiple]) { padding: 0.25em 0.5em; border-radius: 6px; }
select:not([multiple])::after {
content: "";
display: inline-block;
border-width: 5.2px 3px 0 3px;
border-style: solid;
border-color: currentcolor transparent transparent transparent;
margin-left: 0.5em;
}
select:not([multiple]) option { display: none !important; }
select:not([multiple]) option[selected] { display: inline !important; }
select[multiple] option { display: block !important; }
select[multiple] option[selected] { background-color: grey; color: white; }
select[multiple]:focus option[selected] { background-color: darkblue; }
td[align="left"] { text-align: left; }
td[align="center"] { text-align: center; }
td[align="right"] { text-align: right; }
@ -358,3 +334,12 @@ progress #-servo-progress-bar {
height: 100%;
background-color: #7a3;
}
select {
background-color: lightgrey;
border-radius: 5px;
border: 1px solid gray;
padding: 0 0.25em;
/* Don't show a text cursor when hovering selected option */
cursor: default;
}