0

Add customizable select descendant starting-style test

This didn't work properly until after the reland of the computed style
changes here:
https://chromium-review.googlesource.com/c/chromium/src/+/6257116

Change-Id: I17bebdce84f734199e2700d36803eaa4b76f812c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6258506
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Reviewed-by: Traian Captan <tcaptan@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1431026}
This commit is contained in:
Joey Arhar
2025-03-11 11:23:16 -07:00
committed by Chromium LUCI CQ
parent 168e2158f0
commit 1b644f55d1

@ -18,15 +18,24 @@ select, ::picker(select) {
::picker(select) {
color: white;
}
option {
background-color: black;
}
.animate::picker(select) {
transition: color 100s steps(2, start);
}
.animate option {
transition: background-color 100s steps(2, start);
}
@starting-style {
.animate::picker(select) {
color: black;
}
.animate option {
background-color: white;
}
}
</style>
@ -43,5 +52,7 @@ promise_test(async () => {
const style = getComputedStyle(option);
assert_equals(style.color, 'rgb(128, 128, 128)',
'color should transition based on @starting-style.');
assert_equals(style.backgroundColor, 'rgb(128, 128, 128)',
'background-color should transition based on @starting-style.');
}, '@starting-style should work on ::picker(select) just like a popover.');
</script>