Add content to appearance:base-select fallback button [chromium/src : main]
Blink W3C Test Autoroller (Gerrit)
Message from Blink W3C Test Autoroller![]( "Open in Gerrit")
Exportable changes to web-platform-tests were detected in this CL and a pull request in the upstream repo has been made: https://github.com/web-platform-tests/wpt/pull/45774.
When this CL lands, the bot will automatically merge the PR on GitHub if the required GitHub checks pass; otherwise, ecosystem-infra@ team will triage the failures and may contact you.
WPT Export docs:
https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md#Automatic-export-process
Related details
Code-Coverage
Code-Review
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Joey Arhar (Gerrit)
Joey Arhar voted Commit-Queue+1![]( "Open in Gerrit")
| Commit-Queue | +1 |
Related details
Code-Coverage
Code-Review
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Joey Arhar (Gerrit)
Joey Arhar added 1 comment![]( "Open in Gerrit")
background-image: light-dark(This background-image property is the cause of a test failure which I don't fully understand: https://chromium-layout-test-archives.storage.googleapis.com/results.html?json=chromium/try/linux-rel/1790580/high_dpi_blink_wpt_tests%20%28with%20patch%29/full_results_jsonp.js
I'm inclined to wrap the whole value in an -internal-appearance-auto-base-select() to just make it not apply when not in appearance:base-select in order to make the test pass, but it will be a bunch of extra and kinda hacky code to try resolving the function on a pseudo element. Not even sure it would work since I would have to find the computed style of the appearance property of the pseudo element's parent select - but in this case the "pseudo element" resolves to a real element, so I don't even know what the state would look like StyleCascade::Resolve.
Anyway, I couldn't repro this tiny difference on my mac. Do you have any ideas what is causing this?
Related details
- David Baron
Code-Coverage
Code-Review
No-Unresolved-Comments
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
David Baron (Gerrit)
David Baron added 11 comments![]( "Open in Gerrit")
- ::select-fallback-selectedoption which targets the <span> inside theI'm a little concerned about the name for this one, since "selectedoption" makes it sound like it's an `<option>`, which it isn't. This could be `::select-fallback-button-text` which maybe says a little more about how it fits structurally rather than where the text comes from. Or it could be something else...
This patch also changes some tests to inerhit from PageTestBase. Addinginherit
kPseudoSelectButton,I wonder if these should also have the word `Fallback` in the names.
case CSSSelector::kPseudoSelectDatalist:add to this switch as well?
background-image: light-dark(This background-image property is the cause of a test failure which I don't fully understand: https://chromium-layout-test-archives.storage.googleapis.com/results.html?json=chromium/try/linux-rel/1790580/high_dpi_blink_wpt_tests%20%28with%20patch%29/full_results_jsonp.js
I'm inclined to wrap the whole value in an -internal-appearance-auto-base-select() to just make it not apply when not in appearance:base-select in order to make the test pass, but it will be a bunch of extra and kinda hacky code to try resolving the function on a pseudo element. Not even sure it would work since I would have to find the computed style of the appearance property of the pseudo element's parent select - but in this case the "pseudo element" resolves to a real element, so I don't even know what the state would look like StyleCascade::Resolve.
Anyway, I couldn't repro this tiny difference on my mac. Do you have any ideas what is causing this?
Is it really specifically *this* declaration? That seems really weird. It seems like a layout issue, and one that I think would be much more likely if it were the presence or layout styles of the pseudo-element and not the background.
(It also seems possible that there's something that subtly broke interoperable behavior of the `select` element here, particularly if it's not really the background.)
background-size: contain;Given that one of these is a div and the other is a span, maybe it would be helpful to put `display` values in for both of these to make it clearer what's going on?
outline: none;
padding-bottom: 2px;
padding-inline-start: 3px;
padding-inline-end: 3px;
padding-top: 2px;
width: 1.2em;
min-width: 1.2em;
max-width: 1.2em;The mix of physical and logical (particularly for padding) seems like it's going to go badly in vertical writing mode.
Maybe try writing it all logical, and add a testcase for vertical-writing-mode selects?
color: inherit;
min-width: 0px;
max-height: 100%;`min-inline-size` and `max-block-size`
flex-shrink: 1;
overflow-x: hidden;
overflow-y: hidden;`overflow-block` and `overflow-inline`
same comments on the real style sheet also apply here
<link rel=stylesheet href="resources/select-reset-non-interoperable-styles.css">Is there a reason that only this test and not the other two still needs this style sheet?
Related details
- Joey Arhar
Code-Coverage
Code-Review
No-Unresolved-Comments
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Joey Arhar (Gerrit)
Joey Arhar added 9 comments![]( "Open in Gerrit")
- ::select-fallback-selectedoption which targets the <span> inside theI'm a little concerned about the name for this one, since "selectedoption" makes it sound like it's an `<option>`, which it isn't. This could be `::select-fallback-button-text` which maybe says a little more about how it fits structurally rather than where the text comes from. Or it could be something else...
Yeah I think that the entire `<selectedoption>` name is not great because you can't verbally say it without conflating "selected `<option>`" and `<selectedoption>`, but it will certainly get bikeshedded more at some point.
I'll change this pseudo to ::select-fallback-button-text and put a comment on it saying that we should update it if the `<selectedoption>` element name changes.
This patch also changes some tests to inerhit from PageTestBase. AddingJoey Arharinherit
Done
I wonder if these should also have the word `Fallback` in the names.
Done
add to this switch as well?
Done
background-image: light-dark(David BaronThis background-image property is the cause of a test failure which I don't fully understand: https://chromium-layout-test-archives.storage.googleapis.com/results.html?json=chromium/try/linux-rel/1790580/high_dpi_blink_wpt_tests%20%28with%20patch%29/full_results_jsonp.js
I'm inclined to wrap the whole value in an -internal-appearance-auto-base-select() to just make it not apply when not in appearance:base-select in order to make the test pass, but it will be a bunch of extra and kinda hacky code to try resolving the function on a pseudo element. Not even sure it would work since I would have to find the computed style of the appearance property of the pseudo element's parent select - but in this case the "pseudo element" resolves to a real element, so I don't even know what the state would look like StyleCascade::Resolve.
Anyway, I couldn't repro this tiny difference on my mac. Do you have any ideas what is causing this?
Is it really specifically *this* declaration? That seems really weird. It seems like a layout issue, and one that I think would be much more likely if it were the presence or layout styles of the pseudo-element and not the background.
(It also seems possible that there's something that subtly broke interoperable behavior of the `select` element here, particularly if it's not really the background.)
Ok, I'm going to mark the test as failing and file a bug: https://issues.chromium.org/issues/337904202
Sound good?
background-size: contain;Given that one of these is a div and the other is a span, maybe it would be helpful to put `display` values in for both of these to make it clearer what's going on?
You mean put display:block on ::select-fallback-button-icon and display:inline on ::select-fallback-button-text?
color: inherit;
min-width: 0px;
max-height: 100%;Joey Arhar`min-inline-size` and `max-block-size`
Done
flex-shrink: 1;
overflow-x: hidden;
overflow-y: hidden;Joey Arhar`overflow-block` and `overflow-inline`
Done
<link rel=stylesheet href="resources/select-reset-non-interoperable-styles.css">Is there a reason that only this test and not the other two still needs this style sheet?
I already deleted this CSS file, I must have forgotten to remove this reference to it. I have deleted this line.
Related details
- David Baron
Code-Coverage
Code-Review
No-Unresolved-Comments
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
David Baron (Gerrit)
David Baron added 3 comments![]( "Open in Gerrit")
Since there are still some unaddressed comments from the previous review, I'm just going to answer the questions you asked (I hope I didn't miss any) but not re-review the whole CL right now. (Let me know if there was something you wanted me to re-review now.)
background-image: light-dark(David BaronThis background-image property is the cause of a test failure which I don't fully understand: https://chromium-layout-test-archives.storage.googleapis.com/results.html?json=chromium/try/linux-rel/1790580/high_dpi_blink_wpt_tests%20%28with%20patch%29/full_results_jsonp.js
I'm inclined to wrap the whole value in an -internal-appearance-auto-base-select() to just make it not apply when not in appearance:base-select in order to make the test pass, but it will be a bunch of extra and kinda hacky code to try resolving the function on a pseudo element. Not even sure it would work since I would have to find the computed style of the appearance property of the pseudo element's parent select - but in this case the "pseudo element" resolves to a real element, so I don't even know what the state would look like StyleCascade::Resolve.
Anyway, I couldn't repro this tiny difference on my mac. Do you have any ideas what is causing this?
Joey ArharIs it really specifically *this* declaration? That seems really weird. It seems like a layout issue, and one that I think would be much more likely if it were the presence or layout styles of the pseudo-element and not the background.
(It also seems possible that there's something that subtly broke interoperable behavior of the `select` element here, particularly if it's not really the background.)
Ok, I'm going to mark the test as failing and file a bug: https://issues.chromium.org/issues/337904202
Sound good?
Hmmm. I'm a little concerned about something actually being broken here.
Also... do you know if the test is only failing when the feature is enabled, or if it's failing even if the feature isn't enabled? (The latter is more concerning, the former might suggest it's ok to punt on this for now and make the bug you filed block the main bug... but also to add the failing test to a virtual test suite so we test it in the passing configuration too?)
background-size: contain;Joey ArharGiven that one of these is a div and the other is a span, maybe it would be helpful to put `display` values in for both of these to make it clearer what's going on?
You mean put display:block on ::select-fallback-button-icon and display:inline on ::select-fallback-button-text?
- Joey Arhar
Code-Coverage
Code-Review
No-Unresolved-Comments
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Joey Arhar (Gerrit)
Joey Arhar added 4 comments![]( "Open in Gerrit")
background-image: light-dark(David BaronThis background-image property is the cause of a test failure which I don't fully understand: https://chromium-layout-test-archives.storage.googleapis.com/results.html?json=chromium/try/linux-rel/1790580/high_dpi_blink_wpt_tests%20%28with%20patch%29/full_results_jsonp.js
I'm inclined to wrap the whole value in an -internal-appearance-auto-base-select() to just make it not apply when not in appearance:base-select in order to make the test pass, but it will be a bunch of extra and kinda hacky code to try resolving the function on a pseudo element. Not even sure it would work since I would have to find the computed style of the appearance property of the pseudo element's parent select - but in this case the "pseudo element" resolves to a real element, so I don't even know what the state would look like StyleCascade::Resolve.
Anyway, I couldn't repro this tiny difference on my mac. Do you have any ideas what is causing this?
Joey ArharIs it really specifically *this* declaration? That seems really weird. It seems like a layout issue, and one that I think would be much more likely if it were the presence or layout styles of the pseudo-element and not the background.
(It also seems possible that there's something that subtly broke interoperable behavior of the `select` element here, particularly if it's not really the background.)
David BaronOk, I'm going to mark the test as failing and file a bug: https://issues.chromium.org/issues/337904202
Sound good?
Hmmm. I'm a little concerned about something actually being broken here.
Also... do you know if the test is only failing when the feature is enabled, or if it's failing even if the feature isn't enabled? (The latter is more concerning, the former might suggest it's ok to punt on this for now and make the bug you filed block the main bug... but also to add the failing test to a virtual test suite so we test it in the passing configuration too?)
The test only fails when the feature is enabled because when the feature is disabled this stylesheet is not applied and the extra DOM contents are not added to the UA shadowroot. I manually verified that the test passes when disabling the StylableSelect flag.
background-size: contain;Joey ArharGiven that one of these is a div and the other is a span, maybe it would be helpful to put `display` values in for both of these to make it clearer what's going on?
David BaronYou mean put display:block on ::select-fallback-button-icon and display:inline on ::select-fallback-button-text?
yes
Done
outline: none;
padding-bottom: 2px;
padding-inline-start: 3px;
padding-inline-end: 3px;
padding-top: 2px;
width: 1.2em;
min-width: 1.2em;
max-width: 1.2em;The mix of physical and logical (particularly for padding) seems like it's going to go badly in vertical writing mode.
Maybe try writing it all logical, and add a testcase for vertical-writing-mode selects?
I changed the px values in this rule to em values, and i added reftests for vertical-rl and vertical-lr. They seem fine to me, but I suppose that in order to be on par with appearance:auto select then maybe we should rotate the icon or move it around.
same comments on the real style sheet also apply here
- David Baron
Code-Coverage
Code-Review
No-Unresolved-Comments
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
David Baron (Gerrit)
David Baron added 2 comments![]( "Open in Gerrit")
again just a comment reply and not a re-review:
outline: none;
padding-bottom: 2px;
padding-inline-start: 3px;
padding-inline-end: 3px;
padding-top: 2px;
width: 1.2em;
min-width: 1.2em;
max-width: 1.2em;Joey ArharThe mix of physical and logical (particularly for padding) seems like it's going to go badly in vertical writing mode.
Maybe try writing it all logical, and add a testcase for vertical-writing-mode selects?
I changed the px values in this rule to em values, and i added reftests for vertical-rl and vertical-lr. They seem fine to me, but I suppose that in order to be on par with appearance:auto select then maybe we should rotate the icon or move it around.
Sorry, by physical I meant `padding-bottom` and `padding-top` and `width` and `*-width`, whereas logical is `padding-inline-start` and `padding-inline-end`. I think the `padding-bottom` should be `padding-block-end`, the `padding-top` should be `padding-block-start`, and all the `*width` should be `*inline-size`.
Related details
- Joey Arhar
Code-Coverage
Code-Review
No-Unresolved-Comments
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Joey Arhar (Gerrit)
Joey Arhar added 1 comment![]( "Open in Gerrit")
outline: none;
padding-bottom: 2px;
padding-inline-start: 3px;
padding-inline-end: 3px;
padding-top: 2px;
width: 1.2em;
min-width: 1.2em;
max-width: 1.2em;Joey ArharThe mix of physical and logical (particularly for padding) seems like it's going to go badly in vertical writing mode.
Maybe try writing it all logical, and add a testcase for vertical-writing-mode selects?
David BaronI changed the px values in this rule to em values, and i added reftests for vertical-rl and vertical-lr. They seem fine to me, but I suppose that in order to be on par with appearance:auto select then maybe we should rotate the icon or move it around.
Sorry, by physical I meant `padding-bottom` and `padding-top` and `width` and `*-width`, whereas logical is `padding-inline-start` and `padding-inline-end`. I think the `padding-bottom` should be `padding-block-end`, the `padding-top` should be `padding-block-start`, and all the `*width` should be `*inline-size`.
- David Baron
Code-Coverage
Code-Review
No-Unresolved-Comments
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
David Baron (Gerrit)
David Baron added 22 comments![]( "Open in Gerrit")
New round of comments, mostly nits, but a bunch of real bugs in the style sheet.
case kPseudoSelectFallbackDatalist:sort alphabetically like the rest
case CSSSelector::PseudoType::kPseudoSelectFallbackButtonText:resort yours, even though the rest aren't fully sorted
case CSSSelector::kPseudoSelectFallbackButtonText:resort
case CSSSelector::kPseudoSelectFallbackButtonText:resort
case CSSSelector::kPseudoSelectFallbackButtonText:resort
case CSSSelector::kPseudoSelectFallbackButtonText:resort
case CSSSelector::kPseudoSelectFallbackButtonText:resort
type == CSSSelector::kPseudoSelectFallbackDatalist ||
type == CSSSelector::kPseudoSelectFallbackButtonIcon ||
type == CSSSelector::kPseudoSelectFallbackButton ||maybe sort in one of the two other normal ways these are sorted?
background-image: light-dark(David BaronThis background-image property is the cause of a test failure which I don't fully understand: https://chromium-layout-test-archives.storage.googleapis.com/results.html?json=chromium/try/linux-rel/1790580/high_dpi_blink_wpt_tests%20%28with%20patch%29/full_results_jsonp.js
I'm inclined to wrap the whole value in an -internal-appearance-auto-base-select() to just make it not apply when not in appearance:base-select in order to make the test pass, but it will be a bunch of extra and kinda hacky code to try resolving the function on a pseudo element. Not even sure it would work since I would have to find the computed style of the appearance property of the pseudo element's parent select - but in this case the "pseudo element" resolves to a real element, so I don't even know what the state would look like StyleCascade::Resolve.
Anyway, I couldn't repro this tiny difference on my mac. Do you have any ideas what is causing this?
Joey ArharIs it really specifically *this* declaration? That seems really weird. It seems like a layout issue, and one that I think would be much more likely if it were the presence or layout styles of the pseudo-element and not the background.
(It also seems possible that there's something that subtly broke interoperable behavior of the `select` element here, particularly if it's not really the background.)
David BaronOk, I'm going to mark the test as failing and file a bug: https://issues.chromium.org/issues/337904202
Sound good?
Joey ArharHmmm. I'm a little concerned about something actually being broken here.
Also... do you know if the test is only failing when the feature is enabled, or if it's failing even if the feature isn't enabled? (The latter is more concerning, the former might suggest it's ok to punt on this for now and make the bug you filed block the main bug... but also to add the failing test to a virtual test suite so we test it in the passing configuration too?)
The test only fails when the feature is enabled because when the feature is disabled this stylesheet is not applied and the extra DOM contents are not added to the UA shadowroot. I manually verified that the test passes when disabling the StylableSelect flag.
ok, seems like this needs at least a `TODO(crbug.com/NUM)` comment somewhere, since it still seems like there's *something* broken that could be an issue
margin-inline-start: 0.3em;I might prefer `0.25em` rather than `0.3em`, since it's an integer number of pixels (and what you had before) at the default font size.
outline: none;
padding-top: padding-block-start;
padding-bottom: padding-block-end;This should say:
```
padding-block-start: 2px;
padding-block-end: 2px;
```
(Do these styles... do something?)
min-inline-width: 0px;`min-inline-size`
overflow-block: hidden;
overflow-inline: hidden;now that I think about it this should just be `overflow: hidden`, no need for per-axis values
DEFINE_STRING_MAPPING(PseudoSelectFallbackButtonText)resort
crbug.com/1511354 [ Linux ] virtual/stylable-select-disabled/external/wpt/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist.tentative.html [ Failure ]why Linux-only?
Joey Arharsame comments on the real style sheet also apply here
Done
reopening for more open comments on the real style sheet
Please also look at these and make sure they're sensible visually. (Given my comments on the style sheet, I'm not so sure that's the case right now.)
Related details
- Joey Arhar
Code-Coverage
Code-Review
No-Unresolved-Comments
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Joey Arhar (Gerrit)
Joey Arhar added 23 comments![]( "Open in Gerrit")
kPseudoSelectFallbackButtonText,Joey Arharresort
Done
case kPseudoSelectFallbackButtonText:Joey Arharresort
Done
case kPseudoSelectFallbackButtonText:Joey Arharresort
Done
case kPseudoSelectFallbackDatalist:sort alphabetically like the rest
Done
case CSSSelector::PseudoType::kPseudoSelectFallbackButtonText:resort yours, even though the rest aren't fully sorted
Done
case CSSSelector::kPseudoSelectFallbackButtonText:Joey Arharresort
Done
case CSSSelector::kPseudoSelectFallbackButtonText:Joey Arharresort
Done
case CSSSelector::kPseudoSelectFallbackButtonText:Joey Arharresort
Done
case CSSSelector::kPseudoSelectFallbackButtonText:Joey Arharresort
Done
case CSSSelector::kPseudoSelectFallbackButtonText:Joey Arharresort
Done
type == CSSSelector::kPseudoSelectFallbackDatalist ||
type == CSSSelector::kPseudoSelectFallbackButtonIcon ||
type == CSSSelector::kPseudoSelectFallbackButton ||maybe sort in one of the two other normal ways these are sorted?
Done
background-image: light-dark(David BaronThis background-image property is the cause of a test failure which I don't fully understand: https://chromium-layout-test-archives.storage.googleapis.com/results.html?json=chromium/try/linux-rel/1790580/high_dpi_blink_wpt_tests%20%28with%20patch%29/full_results_jsonp.js
I'm inclined to wrap the whole value in an -internal-appearance-auto-base-select() to just make it not apply when not in appearance:base-select in order to make the test pass, but it will be a bunch of extra and kinda hacky code to try resolving the function on a pseudo element. Not even sure it would work since I would have to find the computed style of the appearance property of the pseudo element's parent select - but in this case the "pseudo element" resolves to a real element, so I don't even know what the state would look like StyleCascade::Resolve.
Anyway, I couldn't repro this tiny difference on my mac. Do you have any ideas what is causing this?
Joey ArharIs it really specifically *this* declaration? That seems really weird. It seems like a layout issue, and one that I think would be much more likely if it were the presence or layout styles of the pseudo-element and not the background.
(It also seems possible that there's something that subtly broke interoperable behavior of the `select` element here, particularly if it's not really the background.)
David BaronOk, I'm going to mark the test as failing and file a bug: https://issues.chromium.org/issues/337904202
Sound good?
Joey ArharHmmm. I'm a little concerned about something actually being broken here.
Also... do you know if the test is only failing when the feature is enabled, or if it's failing even if the feature isn't enabled? (The latter is more concerning, the former might suggest it's ok to punt on this for now and make the bug you filed block the main bug... but also to add the failing test to a virtual test suite so we test it in the passing configuration too?)
David BaronThe test only fails when the feature is enabled because when the feature is disabled this stylesheet is not applied and the extra DOM contents are not added to the UA shadowroot. I manually verified that the test passes when disabling the StylableSelect flag.
ok, seems like this needs at least a `TODO(crbug.com/NUM)` comment somewhere, since it still seems like there's *something* broken that could be an issue
Done
margin-inline-start: 0.3em;I might prefer `0.25em` rather than `0.3em`, since it's an integer number of pixels (and what you had before) at the default font size.
Done
margin-inline-start: 0.3em;I might prefer `0.25em` rather than `0.3em`, since it's an integer number of pixels (and what you had before) at the default font size.
Done
outline: none;
padding-top: padding-block-start;
padding-bottom: padding-block-end;This should say:
```
padding-block-start: 2px;
padding-block-end: 2px;
```(Do these styles... do something?)
Ah that makes a lot more sense, sorry I misunderstood 😅
I'm getting the hang of this now, so I also fixed the height property in this rule and the padding setting in the datalist rule.
min-inline-width: 0px;Joey Arhar`min-inline-size`
Done
overflow-block: hidden;
overflow-inline: hidden;now that I think about it this should just be `overflow: hidden`, no need for per-axis values
Done
overflow-block: hidden;
overflow-inline: hidden;now that I think about it this should just be `overflow: hidden`, no need for per-axis values
Done
name: "select-fallback-button-text",Joey Arharresort
Done
DEFINE_STRING_MAPPING(PseudoSelectFallbackButtonText)Joey Arharresort
Done
crbug.com/1511354 [ Linux ] virtual/stylable-select-disabled/external/wpt/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist.tentative.html [ Failure ]why Linux-only?
Only linux-rel failed. Maybe that's because highdpi tests are only run on linux, but I just ran it on my mac and it passed, so I guess it really is a linux-only issue. Or maybe the testing flag doesn't work on macos even though it seems to be running it properly.
I mentioned in the layout bug that this only is happening on linux.
Joey Arharsame comments on the real style sheet also apply here
David BaronDone
reopening for more open comments on the real style sheet
Done
Please also look at these and make sure they're sensible visually. (Given my comments on the style sheet, I'm not so sure that's the case right now.)
Here is what vertical-rl looks like. The arrow still needs to be rotated and the option elements have non-vertical-writing-mode-friendly rules from the old UA sheet that I will fix in a subsequent patch. Do you have any recommendation for rotating that SVG?
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAJYCAIAAAAVFBUnAAAAKXRFWHRjaGVja3N1bQBiMTNjYmEzNTUwNWI0NGRjNjM5ODczNTM4NmQ5YWIzY/cPt4EAABhNSURBVHic7d1bqFxX4cfxmZNTY0xL04aExgsVvCIliiZBpY1p6500prUKVTHFNqEiQWOqqVQFL/XWN8UaikYsUvUlorRFi20hogZ9s5ASBTFYSmnSc7QKx7Zm5v+wdTP/uezZe+Z30nPaz+dhmJkze86aty9rrVnT7na7rUUw2dtGBtNut8/YVQAAg9rxwKr5hsXLFinvehXlVLOfZBYAML1wYFW/W19UnYG6KpTZVCe2NBYAMKVYYNVJq06nM/bFU46nIo/KP83MzMgsAGDxZAKrOpgKo2awFnUeq2/Kqvdh+3+qrwUAaCoQWBXvUExZDW2ssXXVaGBjO6lsqcG6Kia0mr4tAMAos1NeX7+u+vRdHp/H6pu16o2q3mxqt9udTmdUY3W7XY0FADQ1VWCNqqLebCp1Op2+wOotrTpvO9bQGOqduyr1FlW7/d9pvKGXaywAoKmRgXXgwIHJ3nFwi1W32/3iF7/497///cknn/zPf/4z6VAzZmdnV65cuWbNmhUrVgxmlsYCAKZXNYP19a9/fdSfxs48FV11+vTpbrd78803z8/Pt9vtDRs2rFq1avDC+fn5+++//9FHH73gggsuvfTS888/v/4H6HQ65ZcTW63WBz/4wZ/85CcVr19YWJibm5ufn1+7dm2n02m32ytWrOj7CIM5pbEAgPomWSKsWVe9e7D+/e9/v+hFLxpaV0eOHHnPe96zdu3a9evXP/bYY6dOnfrZz372lre8pc5IPvShD/34xz8+ffp075NHjx696KKL7r777qGXrFq16vzzz3/kkUfKlir3YJUJNTSnNBYAUFPjwKqza2rwO4OdTmdoXbVarf379//oRz965zvfWTy85557PvWpT/3+97+vM5i77rrrt7/9be+M17vf/e577rmn+qpVq1YV814rVqwosmlw4kpjAQATm2QGq29F77zzzuv9a98erN71u6GeeOKJsq6KQtq3b1/NkXzpS1/asmVL7zNf/vKXX/7yl4+9sJxjKxtrsJ/kFAAwmWaB1e12jxw5snPnzt4VvZ/+9Kflil7f9weLbw6OGcHs7IkTJy688MLi4cMPP1xxMFWfvXv3Fnfm5+fvu+++e++99957733/+99f87MUI5yZmRnVWEOvUl0AQLXGM1g33njjnXfe2buid+DAgaNHj/adzN5XWhVv+IlPfGLTpk3bt29fv379qVOn7rrrrptuuqnmYH7zm98UUXX8+PEtW7Zs3br1hz/8Yc1rB4/jKpcLqzdjAQBUaxBYRYX0ruh1u913vetdn/zkJ/te2bu9fezb7t69+9WvfvXhw4dPnDixfv36O+644x3veEfNIV188cVbt279whe+cPnll/d+GbD+xykGWXHc6GBjqS4AoFrjGaxRK3pDD2fvO7d9qEcfffQVr3hF77FbDz/88Itf/OI6g7nzzjsfeOCBvXv3rl69+tJLL73sssu2bt16zjnn1Ll26LHyNRcKAQAq1A2sskI+/vGPb968efv27evWrTt16tTdd9994MCBip++GTuJtWHDhr5nzjrrrKeeeqrOqK655pprrrmmaLL77rvvK1/5ys6dO59++ummH2owraoXChUYAFCh8QxW34reD37wg7e97W19r2n0C4P//Oc/y/tzc3O33Xbb5s2baw7mqaee+sMf/nDkyJFf//rXDz300MaNG7/xjW/UvHZwr1hFRSkqAKC+WoHV20nFit6nP/3p8plyRW8wWeo01tlnn917/6tf/erGjRvf+9731hnYueeeu3nz5quuuuqWW2557WtfW//rh0NHOLjJvfpayQUADNV4BuuFL3xh3zNnnXXWwsLC4Fmjk/1s8+OPP/7YY4/VfPGuXbt++ctf3n777X/+85+3bdu2bdu2devWNfp3vd8f7H2yzkIhAMBQ4wOrL5KeeOKJ8pm5ubnvfOc7mzZt6nvx0Nga5eKLLy7vdzqd48eP1/8W4cGDB1ut1kMPPfSLX/ziu9/97q5du172spc9+OCDda4dHGT96aveS2q+GAB47mg8g3X22WeXabJ69epbbrnlda973ZVXXjmqq8ZOYl177bXl/RUrVrzkJS+57LLL6o9nfn7+2LFjz3ve8/bs2XPo0KE//vGP9a8dlYO9paWiAICmpv0twscff/zkyZODL6i/RHj99df/4x//uP/++x955JENGzZs2rSp/laqoT8U3eiDjDpidNQlYgsAGGtMYA0W0tatW8s/dTqdP/3pT29/+9uHFlXNxjp69GhxjPtf/vKXCy+8sDj64Y1vfGOd0U/zQ9EVI6w/iSW5AIBBjWewdu3aVdzpdrvFit62bdv6XtPoi4T79u37/ve/f8UVV7z0pS89fvz44cOH9+3b97vf/a7OYKb5oehpvkIIAFCh8bkG11133dVXX7127donn3zy3HPPff3rX1/8WPIEi4OFkydPXnHFFeXDq666am5urua1xbHy5cNGPxTda9T4h05uTfD+AMBzSuMZrKNHj+7YsaN3Re/nP//5li1bBl9Zs7S63e78/Px5551XPPzrX/+6cuXKmoOZ5oeiG7WgmS0AoL7G8z379+8/dOjQgw8+eMEFFxw7duzgwYP79+/ve02jk9x37dpVzmBde+21b3jDG3pPMa22e/fuw4cPr1mz5sSJE6tXr77jjjumWSKseSEAQLXGM1gnT57cvn17WSdXXnnlzTffXNErY8Plc5/73Fvf+tZWq/W+973v+c9//gMPPLBx48b647nkkksuueSSpp9icJC9+9kHbyd7fwDguakqsEadazU/P79mzZriyRMnTvSt6DVtrHa7/eY3v7nVat16662TfopJDB3nBD+So8AAgD6Nlwg//OEP79ixo7h/3XXXbdmy5cYbbyweTjB99YyrP+al/1kAgCWi8RLhZz/72csvv7zVal199dUrV6781a9+ddFFF1XEx1Lukuphm5cCACbTOLDa7fab3vSmVqv1ta99reJnB5dyVxX6zkQdeqaobVgAwAQmOTWq2jJqrMKyGzAAsMTFAmtonXS73aVcLaOGt5THDAAsfXUDq2KaZ+wzS7NXxg6y4pml+YkAgCUiuUQ4+EvPy8XyHTkAsARNFVjPhRZ5LnxGACBrwsCqc1jUEt+AVegbpEOwAIDp5b9F2Gcpp8lSHhsAsHxlAms57mGq3tXe6FMsl48MAJwZiz6DBQDwXDNJYH3mM5/53ve+1/vMoUOHPv/5z+dGBQCwjDX+qZxjx47deuutrVbr9OnTu3fvbrVat99++969e1ut1gc+8IFXvvKVy3TJzO/hAAApjQPrNa95zcGDB2+44YaPfexjMzMzrVarqKvbbrvtVa961XJMKwCArMaB1Wq1rr/++qeffnrv3r0f/ehHi2e++c1vfuQjH1FXAACTb3K/4YYbvv3tbxf3v/Wtb+3Zsyc6KgCAZWySGazCnj171q1b1263d+zYsSzOFK3PfiwAYBqTB1ar1dq5c2e5pb3d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JrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAICw/wMqhRhtLAYpDwAAAABJRU5ErkJggg==
Related details
- David Baron
Code-Coverage
Code-Review
No-Unresolved-Comments
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
David Baron (Gerrit)
David Baron voted and added 5 comments![]( "Open in Gerrit")
Votes added by David Baron
| Code-Review | +1 |
5 comments
outline: none;
padding-bottom: 2px;
padding-inline-start: 3px;
padding-inline-end: 3px;
padding-top: 2px;
width: 1.2em;
min-width: 1.2em;
max-width: 1.2em;Joey ArharThe mix of physical and logical (particularly for padding) seems like it's going to go badly in vertical writing mode.
Maybe try writing it all logical, and add a testcase for vertical-writing-mode selects?
David BaronI changed the px values in this rule to em values, and i added reftests for vertical-rl and vertical-lr. They seem fine to me, but I suppose that in order to be on par with appearance:auto select then maybe we should rotate the icon or move it around.
Joey ArharSorry, by physical I meant `padding-bottom` and `padding-top` and `width` and `*-width`, whereas logical is `padding-inline-start` and `padding-inline-end`. I think the `padding-bottom` should be `padding-block-end`, the `padding-top` should be `padding-block-start`, and all the `*width` should be `*inline-size`.
Thank! I gave it a shot, how does it look?
looks good (and you caught one that I missed)
crbug.com/1511354 [ Linux ] virtual/stylable-select-disabled/external/wpt/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist.tentative.html [ Failure ]Joey Arharwhy Linux-only?
Only linux-rel failed. Maybe that's because highdpi tests are only run on linux, but I just ran it on my mac and it passed, so I guess it really is a linux-only issue. Or maybe the testing flag doesn't work on macos even though it seems to be running it properly.
I mentioned in the layout bug that this only is happening on linux.
Flag-specific tests are (in general) only run on Linux. (That's why there's no directories with expectations that intersect `flag-specific` with `platform` -- `flag-specific` is an alternative to `platform`.)
So two things here:
- the bug number here should probably be the layout bug crbug.com/337904202, or both bugs
- this should go in `FlagExpectations/highdpi` instead of `TestExpectations`, and without `[ Linux ]`
Joey ArharPlease also look at these and make sure they're sensible visually. (Given my comments on the style sheet, I'm not so sure that's the case right now.)
Here is what vertical-rl looks like. The arrow still needs to be rotated and the option elements have non-vertical-writing-mode-friendly rules from the old UA sheet that I will fix in a subsequent patch. Do you have any recommendation for rotating that SVG?
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAJYCAIAAAAVFBUnAAAAKXRFWHRjaGVja3N1bQBiMTNjYmEzNTUwNWI0NGRjNjM5ODczNTM4NmQ5YWIzY/cPt4EAABhNSURBVHic7d1bqFxX4cfxmZNTY0xL04aExgsVvCIliiZBpY1p6500prUKVTHFNqEiQWOqqVQFL/XWN8UaikYsUvUlorRFi20hogZ9s5ASBTFYSmnSc7QKx7Zm5v+wdTP/uezZe+Z30nPaz+dhmJkze86aty9rrVnT7na7rUUw2dtGBtNut8/YVQAAg9rxwKr5hsXLFinvehXlVLOfZBYAML1wYFW/W19UnYG6KpTZVCe2NBYAMKVYYNVJq06nM/bFU46nIo/KP83MzMgsAGDxZAKrOpgKo2awFnUeq2/Kqvdh+3+qrwUAaCoQWBXvUExZDW2ssXXVaGBjO6lsqcG6Kia0mr4tAMAos1NeX7+u+vRdHp/H6pu16o2q3mxqt9udTmdUY3W7XY0FADQ1VWCNqqLebCp1Op2+wOotrTpvO9bQGOqduyr1FlW7/d9pvKGXaywAoKmRgXXgwIHJ3nFwi1W32/3iF7/497///cknn/zPf/4z6VAzZmdnV65cuWbNmhUrVgxmlsYCAKZXNYP19a9/fdSfxs48FV11+vTpbrd78803z8/Pt9vtDRs2rFq1avDC+fn5+++//9FHH73gggsuvfTS888/v/4H6HQ65ZcTW63WBz/4wZ/85CcVr19YWJibm5ufn1+7dm2n02m32ytWrOj7CIM5pbEAgPomWSKsWVe9e7D+/e9/v+hFLxpaV0eOHHnPe96zdu3a9evXP/bYY6dOnfrZz372lre8pc5IPvShD/34xz8+ffp075NHjx696KKL7r777qGXrFq16vzzz3/kkUfKlir3YJUJNTSnNBYAUFPjwKqza2rwO4OdTmdoXbVarf379//oRz965zvfWTy85557PvWpT/3+97+vM5i77rrrt7/9be+M17vf/e577rmn+qpVq1YV814rVqwosmlw4kpjAQATm2QGq29F77zzzuv9a98erN71u6GeeOKJsq6KQtq3b1/NkXzpS1/asmVL7zNf/vKXX/7yl4+9sJxjKxtrsJ/kFAAwmWaB1e12jxw5snPnzt4VvZ/+9Kflil7f9weLbw6OGcHs7IkTJy688MLi4cMPP1xxMFWfvXv3Fnfm5+fvu+++e++99957733/+99f87MUI5yZmRnVWEOvUl0AQLXGM1g33njjnXfe2buid+DAgaNHj/adzN5XWhVv+IlPfGLTpk3bt29fv379qVOn7rrrrptuuqnmYH7zm98UUXX8+PEtW7Zs3br1hz/8Yc1rB4/jKpcLqzdjAQBUaxBYRYX0ruh1u913vetdn/zkJ/te2bu9fezb7t69+9WvfvXhw4dPnDixfv36O+644x3veEfNIV188cVbt279whe+cPnll/d+GbD+xykGWXHc6GBjqS4AoFrjGaxRK3pDD2fvO7d9qEcfffQVr3hF77FbDz/88Itf/OI6g7nzzjsfeOCBvXv3rl69+tJLL73sssu2bt16zjnn1Ll26LHyNRcKAQAq1A2sskI+/vGPb968efv27evWrTt16tTdd9994MCBip++GTuJtWHDhr5nzjrrrKeeeqrOqK655pprrrmmaLL77rvvK1/5ys6dO59++ummH2owraoXChUYAFCh8QxW34reD37wg7e97W19r2n0C4P//Oc/y/tzc3O33Xbb5s2baw7mqaee+sMf/nDkyJFf//rXDz300MaNG7/xjW/UvHZwr1hFRSkqAKC+WoHV20nFit6nP/3p8plyRW8wWeo01tlnn917/6tf/erGjRvf+9731hnYueeeu3nz5quuuuqWW2557WtfW//rh0NHOLjJvfpayQUADNV4BuuFL3xh3zNnnXXWwsLC4Fmjk/1s8+OPP/7YY4/VfPGuXbt++ctf3n777X/+85+3bdu2bdu2devWNfp3vd8f7H2yzkIhAMBQ4wOrL5KeeOKJ8pm5ubnvfOc7mzZt6nvx0Nga5eKLLy7vdzqd48eP1/8W4cGDB1ut1kMPPfSLX/ziu9/97q5du172spc9+OCDda4dHGT96aveS2q+GAB47mg8g3X22WeXabJ69epbbrnlda973ZVXXjmqq8ZOYl177bXl/RUrVrzkJS+57LLL6o9nfn7+2LFjz3ve8/bs2XPo0KE//vGP9a8dlYO9paWiAICmpv0twscff/zkyZODL6i/RHj99df/4x//uP/++x955JENGzZs2rSp/laqoT8U3eiDjDpidNQlYgsAGGtMYA0W0tatW8s/dTqdP/3pT29/+9uHFlXNxjp69GhxjPtf/vKXCy+8sDj64Y1vfGOd0U/zQ9EVI6w/iSW5AIBBjWewdu3aVdzpdrvFit62bdv6XtPoi4T79u37/ve/f8UVV7z0pS89fvz44cOH9+3b97vf/a7OYKb5oehpvkIIAFCh8bkG11133dVXX7127donn3zy3HPPff3rX1/8WPIEi4OFkydPXnHFFeXDq666am5urua1xbHy5cNGPxTda9T4h05uTfD+AMBzSuMZrKNHj+7YsaN3Re/nP//5li1bBl9Zs7S63e78/Px5551XPPzrX/+6cuXKmoOZ5oeiG7WgmS0AoL7G8z379+8/dOjQgw8+eMEFFxw7duzgwYP79+/ve02jk9x37dpVzmBde+21b3jDG3pPMa22e/fuw4cPr1mz5sSJE6tXr77jjjumWSKseSEAQLXGM1gnT57cvn17WSdXXnnlzTffXNErY8Plc5/73Fvf+tZWq/W+973v+c9//gMPPLBx48b647nkkksuueSSpp9icJC9+9kHbyd7fwDguakqsEadazU/P79mzZriyRMnTvSt6DVtrHa7/eY3v7nVat16662TfopJDB3nBD+So8AAgD6Nlwg//OEP79ixo7h/3XXXbdmy5cYbbyweTjB99YyrP+al/1kAgCWi8RLhZz/72csvv7zVal199dUrV6781a9+ddFFF1XEx1Lukuphm5cCACbTOLDa7fab3vSmVqv1ta99reJnB5dyVxX6zkQdeqaobVgAwAQmOTWq2jJqrMKyGzAAsMTFAmtonXS73aVcLaOGt5THDAAsfXUDq2KaZ+wzS7NXxg6y4pml+YkAgCUiuUQ4+EvPy8XyHTkAsARNFVjPhRZ5LnxGACBrwsCqc1jUEt+AVegbpEOwAIDp5b9F2Gcpp8lSHhsAsHxlAms57mGq3tXe6FMsl48MAJwZiz6DBQDwXDNJYH3mM5/53ve+1/vMoUOHPv/5z+dGBQCwjDX+qZxjx47deuutrVbr9OnTu3fvbrVat99++969e1ut1gc+8IFXvvKVy3TJzO/hAAApjQPrNa95zcGDB2+44YaPfexjMzMzrVarqKvbbrvtVa961XJMKwCArMaB1Wq1rr/++qeffnrv3r0f/ehHi2e++c1vfuQjH1FXAACTb3K/4YYbvv3tbxf3v/Wtb+3Zsyc6KgCAZWySGazCnj171q1b1263d+zYsSzOFK3PfiwAYBqTB1ar1dq5c2e5pb3d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JrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAICw/wMqhRhtLAYpDwAAAABJRU5ErkJggg==
Not off the top of my head. Style queries plus `rotate: 90deg` / `rotate: -90deg` seems too heavyweight, as does style queries plus implementing the `<angle>` values of `image-orientation`.
(My biggest concern with your screenshot led to my comment on the vertical-rl test below.)
(Seems like this can be handled in a later CL.)
writing-mode: vertical-rl;In this, and the `vertical-lr` test, it's more realistic to put the `writing-mode` on the `html` element. I suggest doing that. Also, probably drop the `dir=rtl` on the `body`.
That said, it`s probably *also* good to put enough space around the `<select>` so that the popup could fit on any side of it. Then you'll test that the popup opens on the correct side.
(I noticed this because of your screenshot, where the popup is opening on the wrong side... hopefully because there isn't room to the left of the select.)
(It makes a bit of a difference since the popup gets constrained to go in the wrong direction.)
Related details
- Joey Arhar
Code-Coverage
Code-Review
No-Unresolved-Comments
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Joey Arhar (Gerrit)
Joey Arhar added 3 comments![]( "Open in Gerrit")
crbug.com/1511354 [ Linux ] virtual/stylable-select-disabled/external/wpt/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist.tentative.html [ Failure ]Joey Arharwhy Linux-only?
David BaronOnly linux-rel failed. Maybe that's because highdpi tests are only run on linux, but I just ran it on my mac and it passed, so I guess it really is a linux-only issue. Or maybe the testing flag doesn't work on macos even though it seems to be running it properly.
I mentioned in the layout bug that this only is happening on linux.
Flag-specific tests are (in general) only run on Linux. (That's why there's no directories with expectations that intersect `flag-specific` with `platform` -- `flag-specific` is an alternative to `platform`.)
So two things here:
- the bug number here should probably be the layout bug crbug.com/337904202, or both bugs
- this should go in `FlagExpectations/highdpi` instead of `TestExpectations`, and without `[ Linux ]`
Oh sorry, I misread which TestExpectations line this was. virtual/stylable-select-disabled/.../native-popup-with-datalist.tentative.html is only disabled on Linux because that test uses the appearance:auto native popup, and it seems that it only gets rendered in a way which is present in the screenshot on Linux. Not sure why it isn't also failing on Windows, but I'd expect it to not work properly on Mac since we can't capture the native popup on that platform.
The highdpi test which this patch disables is in the right place in FlagExpectations.
Joey ArharPlease also look at these and make sure they're sensible visually. (Given my comments on the style sheet, I'm not so sure that's the case right now.)
David BaronHere is what vertical-rl looks like. The arrow still needs to be rotated and the option elements have non-vertical-writing-mode-friendly rules from the old UA sheet that I will fix in a subsequent patch. Do you have any recommendation for rotating that SVG?
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAJYCAIAAAAVFBUnAAAAKXRFWHRjaGVja3N1bQBiMTNjYmEzNTUwNWI0NGRjNjM5ODczNTM4NmQ5YWIzY/cPt4EAABhNSURBVHic7d1bqFxX4cfxmZNTY0xL04aExgsVvCIliiZBpY1p6500prUKVTHFNqEiQWOqqVQFL/XWN8UaikYsUvUlorRFi20hogZ9s5ASBTFYSmnSc7QKx7Zm5v+wdTP/uezZe+Z30nPaz+dhmJkze86aty9rrVnT7na7rUUw2dtGBtNut8/YVQAAg9rxwKr5hsXLFinvehXlVLOfZBYAML1wYFW/W19UnYG6KpTZVCe2NBYAMKVYYNVJq06nM/bFU46nIo/KP83MzMgsAGDxZAKrOpgKo2awFnUeq2/Kqvdh+3+qrwUAaCoQWBXvUExZDW2ssXXVaGBjO6lsqcG6Kia0mr4tAMAos1NeX7+u+vRdHp/H6pu16o2q3mxqt9udTmdUY3W7XY0FADQ1VWCNqqLebCp1Op2+wOotrTpvO9bQGOqduyr1FlW7/d9pvKGXaywAoKmRgXXgwIHJ3nFwi1W32/3iF7/497///cknn/zPf/4z6VAzZmdnV65cuWbNmhUrVgxmlsYCAKZXNYP19a9/fdSfxs48FV11+vTpbrd78803z8/Pt9vtDRs2rFq1avDC+fn5+++//9FHH73gggsuvfTS888/v/4H6HQ65ZcTW63WBz/4wZ/85CcVr19YWJibm5ufn1+7dm2n02m32ytWrOj7CIM5pbEAgPomWSKsWVe9e7D+/e9/v+hFLxpaV0eOHHnPe96zdu3a9evXP/bYY6dOnfrZz372lre8pc5IPvShD/34xz8+ffp075NHjx696KKL7r777qGXrFq16vzzz3/kkUfKlir3YJUJNTSnNBYAUFPjwKqza2rwO4OdTmdoXbVarf379//oRz965zvfWTy85557PvWpT/3+97+vM5i77rrrt7/9be+M17vf/e577rmn+qpVq1YV814rVqwosmlw4kpjAQATm2QGq29F77zzzuv9a98erN71u6GeeOKJsq6KQtq3b1/NkXzpS1/asmVL7zNf/vKXX/7yl4+9sJxjKxtrsJ/kFAAwmWaB1e12jxw5snPnzt4VvZ/+9Kflil7f9weLbw6OGcHs7IkTJy688MLi4cMPP1xxMFWfvXv3Fnfm5+fvu+++e++99957733/+99f87MUI5yZmRnVWEOvUl0AQLXGM1g33njjnXfe2buid+DAgaNHj/adzN5XWhVv+IlPfGLTpk3bt29fv379qVOn7rrrrptuuqnmYH7zm98UUXX8+PEtW7Zs3br1hz/8Yc1rB4/jKpcLqzdjAQBUaxBYRYX0ruh1u913vetdn/zkJ/te2bu9fezb7t69+9WvfvXhw4dPnDixfv36O+644x3veEfNIV188cVbt279whe+cPnll/d+GbD+xykGWXHc6GBjqS4AoFrjGaxRK3pDD2fvO7d9qEcfffQVr3hF77FbDz/88Itf/OI6g7nzzjsfeOCBvXv3rl69+tJLL73sssu2bt16zjnn1Ll26LHyNRcKAQAq1A2sskI+/vGPb968efv27evWrTt16tTdd9994MCBip++GTuJtWHDhr5nzjrrrKeeeqrOqK655pprrrmmaLL77rvvK1/5ys6dO59++ummH2owraoXChUYAFCh8QxW34reD37wg7e97W19r2n0C4P//Oc/y/tzc3O33Xbb5s2baw7mqaee+sMf/nDkyJFf//rXDz300MaNG7/xjW/UvHZwr1hFRSkqAKC+WoHV20nFit6nP/3p8plyRW8wWeo01tlnn917/6tf/erGjRvf+9731hnYueeeu3nz5quuuuqWW2557WtfW//rh0NHOLjJvfpayQUADNV4BuuFL3xh3zNnnXXWwsLC4Fmjk/1s8+OPP/7YY4/VfPGuXbt++ctf3n777X/+85+3bdu2bdu2devWNfp3vd8f7H2yzkIhAMBQ4wOrL5KeeOKJ8pm5ubnvfOc7mzZt6nvx0Nga5eKLLy7vdzqd48eP1/8W4cGDB1ut1kMPPfSLX/ziu9/97q5du172spc9+OCDda4dHGT96aveS2q+GAB47mg8g3X22WeXabJ69epbbrnlda973ZVXXjmqq8ZOYl177bXl/RUrVrzkJS+57LLL6o9nfn7+2LFjz3ve8/bs2XPo0KE//vGP9a8dlYO9paWiAICmpv0twscff/zkyZODL6i/RHj99df/4x//uP/++x955JENGzZs2rSp/laqoT8U3eiDjDpidNQlYgsAGGtMYA0W0tatW8s/dTqdP/3pT29/+9uHFlXNxjp69GhxjPtf/vKXCy+8sDj64Y1vfGOd0U/zQ9EVI6w/iSW5AIBBjWewdu3aVdzpdrvFit62bdv6XtPoi4T79u37/ve/f8UVV7z0pS89fvz44cOH9+3b97vf/a7OYKb5oehpvkIIAFCh8bkG11133dVXX7127donn3zy3HPPff3rX1/8WPIEi4OFkydPXnHFFeXDq666am5urua1xbHy5cNGPxTda9T4h05uTfD+AMBzSuMZrKNHj+7YsaN3Re/nP//5li1bBl9Zs7S63e78/Px5551XPPzrX/+6cuXKmoOZ5oeiG7WgmS0AoL7G8z379+8/dOjQgw8+eMEFFxw7duzgwYP79+/ve02jk9x37dpVzmBde+21b3jDG3pPMa22e/fuw4cPr1mz5sSJE6tXr77jjjumWSKseSEAQLXGM1gnT57cvn17WSdXXnnlzTffXNErY8Plc5/73Fvf+tZWq/W+973v+c9//gMPPLBx48b647nkkksuueSSpp9icJC9+9kHbyd7fwDguakqsEadazU/P79mzZriyRMnTvSt6DVtrHa7/eY3v7nVat16662TfopJDB3nBD+So8AAgD6Nlwg//OEP79ixo7h/3XXXbdmy5cYbbyweTjB99YyrP+al/1kAgCWi8RLhZz/72csvv7zVal199dUrV6781a9+ddFFF1XEx1Lukuphm5cCACbTOLDa7fab3vSmVqv1ta99reJnB5dyVxX6zkQdeqaobVgAwAQmOTWq2jJqrMKyGzAAsMTFAmtonXS73aVcLaOGt5THDAAsfXUDq2KaZ+wzS7NXxg6y4pml+YkAgCUiuUQ4+EvPy8XyHTkAsARNFVjPhRZ5LnxGACBrwsCqc1jUEt+AVegbpEOwAIDp5b9F2Gcpp8lSHhsAsHxlAms57mGq3tXe6FMsl48MAJwZiz6DBQDwXDNJYH3mM5/53ve+1/vMoUOHPv/5z+dGBQCwjDX+qZxjx47deuutrVbr9OnTu3fvbrVat99++969e1ut1gc+8IFXvvKVy3TJzO/hAAApjQPrNa95zcGDB2+44YaPfexjMzMzrVarqKvbbrvtVa961XJMKwCArMaB1Wq1rr/++qeffnrv3r0f/ehHi2e++c1vfuQjH1FXAACTb3K/4YYbvv3tbxf3v/Wtb+3Zsyc6KgCAZWySGazCnj171q1b1263d+zYsSzOFK3PfiwAYBqTB1ar1dq5c2e5pb3d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JrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAICw/wMqhRhtLAYpDwAAAABJRU5ErkJggg==
Not off the top of my head. Style queries plus `rotate: 90deg` / `rotate: -90deg` seems too heavyweight, as does style queries plus implementing the `<angle>` values of `image-orientation`.
(My biggest concern with your screenshot led to my comment on the vertical-rl test below.)
(Seems like this can be handled in a later CL.)
So the only way is to use style queries? I'm not very familiar with that, what would it even look like?
writing-mode: vertical-rl;In this, and the `vertical-lr` test, it's more realistic to put the `writing-mode` on the `html` element. I suggest doing that. Also, probably drop the `dir=rtl` on the `body`.
That said, it`s probably *also* good to put enough space around the `<select>` so that the popup could fit on any side of it. Then you'll test that the popup opens on the correct side.
(I noticed this because of your screenshot, where the popup is opening on the wrong side... hopefully because there isn't room to the left of the select.)
(It makes a bit of a difference since the popup gets constrained to go in the wrong direction.)
In this, and the vertical-lr test, it's more realistic to put the writing-mode on the html element. I suggest doing that.
done
Also, probably drop the dir=rtl on the body.
That said, its probably *also* good to put enough space around the<select>` so that the popup could fit on any side of it. Then you'll test that the popup opens on the correct side.
Without the dir=rtl attribute, the select is rendered on the left side and then the popover opens on the left side and is occluded. Is it really better to add spacing on the left side with random spacer elements than use dir=rtl? Why?
Related details
- David Baron
Code-Coverage
Code-Review
No-Unresolved-Comments
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
David Baron (Gerrit)
David Baron voted and added 2 comments![]( "Open in Gerrit")
Votes added by David Baron
| Code-Review | +1 |
2 comments
Joey ArharPlease also look at these and make sure they're sensible visually. (Given my comments on the style sheet, I'm not so sure that's the case right now.)
David BaronHere is what vertical-rl looks like. The arrow still needs to be rotated and the option elements have non-vertical-writing-mode-friendly rules from the old UA sheet that I will fix in a subsequent patch. Do you have any recommendation for rotating that SVG?
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAJYCAIAAAAVFBUnAAAAKXRFWHRjaGVja3N1bQBiMTNjYmEzNTUwNWI0NGRjNjM5ODczNTM4NmQ5YWIzY/cPt4EAABhNSURBVHic7d1bqFxX4cfxmZNTY0xL04aExgsVvCIliiZBpY1p6500prUKVTHFNqEiQWOqqVQFL/XWN8UaikYsUvUlorRFi20hogZ9s5ASBTFYSmnSc7QKx7Zm5v+wdTP/uezZe+Z30nPaz+dhmJkze86aty9rrVnT7na7rUUw2dtGBtNut8/YVQAAg9rxwKr5hsXLFinvehXlVLOfZBYAML1wYFW/W19UnYG6KpTZVCe2NBYAMKVYYNVJq06nM/bFU46nIo/KP83MzMgsAGDxZAKrOpgKo2awFnUeq2/Kqvdh+3+qrwUAaCoQWBXvUExZDW2ssXXVaGBjO6lsqcG6Kia0mr4tAMAos1NeX7+u+vRdHp/H6pu16o2q3mxqt9udTmdUY3W7XY0FADQ1VWCNqqLebCp1Op2+wOotrTpvO9bQGOqduyr1FlW7/d9pvKGXaywAoKmRgXXgwIHJ3nFwi1W32/3iF7/497///cknn/zPf/4z6VAzZmdnV65cuWbNmhUrVgxmlsYCAKZXNYP19a9/fdSfxs48FV11+vTpbrd78803z8/Pt9vtDRs2rFq1avDC+fn5+++//9FHH73gggsuvfTS888/v/4H6HQ65ZcTW63WBz/4wZ/85CcVr19YWJibm5ufn1+7dm2n02m32ytWrOj7CIM5pbEAgPomWSKsWVe9e7D+/e9/v+hFLxpaV0eOHHnPe96zdu3a9evXP/bYY6dOnfrZz372lre8pc5IPvShD/34xz8+ffp075NHjx696KKL7r777qGXrFq16vzzz3/kkUfKlir3YJUJNTSnNBYAUFPjwKqza2rwO4OdTmdoXbVarf379//oRz965zvfWTy85557PvWpT/3+97+vM5i77rrrt7/9be+M17vf/e577rmn+qpVq1YV814rVqwosmlw4kpjAQATm2QGq29F77zzzuv9a98erN71u6GeeOKJsq6KQtq3b1/NkXzpS1/asmVL7zNf/vKXX/7yl4+9sJxjKxtrsJ/kFAAwmWaB1e12jxw5snPnzt4VvZ/+9Kflil7f9weLbw6OGcHs7IkTJy688MLi4cMPP1xxMFWfvXv3Fnfm5+fvu+++e++99957733/+99f87MUI5yZmRnVWEOvUl0AQLXGM1g33njjnXfe2buid+DAgaNHj/adzN5XWhVv+IlPfGLTpk3bt29fv379qVOn7rrrrptuuqnmYH7zm98UUXX8+PEtW7Zs3br1hz/8Yc1rB4/jKpcLqzdjAQBUaxBYRYX0ruh1u913vetdn/zkJ/te2bu9fezb7t69+9WvfvXhw4dPnDixfv36O+644x3veEfNIV188cVbt279whe+cPnll/d+GbD+xykGWXHc6GBjqS4AoFrjGaxRK3pDD2fvO7d9qEcfffQVr3hF77FbDz/88Itf/OI6g7nzzjsfeOCBvXv3rl69+tJLL73sssu2bt16zjnn1Ll26LHyNRcKAQAq1A2sskI+/vGPb968efv27evWrTt16tTdd9994MCBip++GTuJtWHDhr5nzjrrrKeeeqrOqK655pprrrmmaLL77rvvK1/5ys6dO59++ummH2owraoXChUYAFCh8QxW34reD37wg7e97W19r2n0C4P//Oc/y/tzc3O33Xbb5s2baw7mqaee+sMf/nDkyJFf//rXDz300MaNG7/xjW/UvHZwr1hFRSkqAKC+WoHV20nFit6nP/3p8plyRW8wWeo01tlnn917/6tf/erGjRvf+9731hnYueeeu3nz5quuuuqWW2557WtfW//rh0NHOLjJvfpayQUADNV4BuuFL3xh3zNnnXXWwsLC4Fmjk/1s8+OPP/7YY4/VfPGuXbt++ctf3n777X/+85+3bdu2bdu2devWNfp3vd8f7H2yzkIhAMBQ4wOrL5KeeOKJ8pm5ubnvfOc7mzZt6nvx0Nga5eKLLy7vdzqd48eP1/8W4cGDB1ut1kMPPfSLX/ziu9/97q5du172spc9+OCDda4dHGT96aveS2q+GAB47mg8g3X22WeXabJ69epbbrnlda973ZVXXjmqq8ZOYl177bXl/RUrVrzkJS+57LLL6o9nfn7+2LFjz3ve8/bs2XPo0KE//vGP9a8dlYO9paWiAICmpv0twscff/zkyZODL6i/RHj99df/4x//uP/++x955JENGzZs2rSp/laqoT8U3eiDjDpidNQlYgsAGGtMYA0W0tatW8s/dTqdP/3pT29/+9uHFlXNxjp69GhxjPtf/vKXCy+8sDj64Y1vfGOd0U/zQ9EVI6w/iSW5AIBBjWewdu3aVdzpdrvFit62bdv6XtPoi4T79u37/ve/f8UVV7z0pS89fvz44cOH9+3b97vf/a7OYKb5oehpvkIIAFCh8bkG11133dVXX7127donn3zy3HPPff3rX1/8WPIEi4OFkydPXnHFFeXDq666am5urua1xbHy5cNGPxTda9T4h05uTfD+AMBzSuMZrKNHj+7YsaN3Re/nP//5li1bBl9Zs7S63e78/Px5551XPPzrX/+6cuXKmoOZ5oeiG7WgmS0AoL7G8z379+8/dOjQgw8+eMEFFxw7duzgwYP79+/ve02jk9x37dpVzmBde+21b3jDG3pPMa22e/fuw4cPr1mz5sSJE6tXr77jjjumWSKseSEAQLXGM1gnT57cvn17WSdXXnnlzTffXNErY8Plc5/73Fvf+tZWq/W+973v+c9//gMPPLBx48b647nkkksuueSSpp9icJC9+9kHbyd7fwDguakqsEadazU/P79mzZriyRMnTvSt6DVtrHa7/eY3v7nVat16662TfopJDB3nBD+So8AAgD6Nlwg//OEP79ixo7h/3XXXbdmy5cYbbyweTjB99YyrP+al/1kAgCWi8RLhZz/72csvv7zVal199dUrV6781a9+ddFFF1XEx1Lukuphm5cCACbTOLDa7fab3vSmVqv1ta99reJnB5dyVxX6zkQdeqaobVgAwAQmOTWq2jJqrMKyGzAAsMTFAmtonXS73aVcLaOGt5THDAAsfXUDq2KaZ+wzS7NXxg6y4pml+YkAgCUiuUQ4+EvPy8XyHTkAsARNFVjPhRZ5LnxGACBrwsCqc1jUEt+AVegbpEOwAIDp5b9F2Gcpp8lSHhsAsHxlAms57mGq3tXe6FMsl48MAJwZiz6DBQDwXDNJYH3mM5/53ve+1/vMoUOHPv/5z+dGBQCwjDX+qZxjx47deuutrVbr9OnTu3fvbrVat99++969e1ut1gc+8IFXvvKVy3TJzO/hAAApjQPrNa95zcGDB2+44YaPfexjMzMzrVarqKvbbrvtVa961XJMKwCArMaB1Wq1rr/++qeffnrv3r0f/ehHi2e++c1vfuQjH1FXAACTb3K/4YYbvv3tbxf3v/Wtb+3Zsyc6KgCAZWySGazCnj171q1b1263d+zYsSzOFK3PfiwAYBqTB1ar1dq5c2e5pb3d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JrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAICw/wMqhRhtLAYpDwAAAABJRU5ErkJggg==
Joey ArharNot off the top of my head. Style queries plus `rotate: 90deg` / `rotate: -90deg` seems too heavyweight, as does style queries plus implementing the `<angle>` values of `image-orientation`.
(My biggest concern with your screenshot led to my comment on the vertical-rl test below.)
(Seems like this can be handled in a later CL.)
So the only way is to use style queries? I'm not very familiar with that, what would it even look like?
It's the only thing I could *think* of that's currently implemented in Chrome. But it's a bad idea and we should do something better. Possibly an extension to https://drafts.csswg.org/css-images-4/#bidi-images , or maybe something else.
writing-mode: vertical-rl;Joey ArharIn this, and the `vertical-lr` test, it's more realistic to put the `writing-mode` on the `html` element. I suggest doing that. Also, probably drop the `dir=rtl` on the `body`.
That said, it`s probably *also* good to put enough space around the `<select>` so that the popup could fit on any side of it. Then you'll test that the popup opens on the correct side.
(I noticed this because of your screenshot, where the popup is opening on the wrong side... hopefully because there isn't room to the left of the select.)
(It makes a bit of a difference since the popup gets constrained to go in the wrong direction.)
In this, and the vertical-lr test, it's more realistic to put the writing-mode on the html element. I suggest doing that.
done
Also, probably drop the dir=rtl on the body.
That said, its probably *also* good to put enough space around the<select>` so that the popup could fit on any side of it. Then you'll test that the popup opens on the correct side.
Without the dir=rtl attribute, the select is rendered on the left side and then the popover opens on the left side and is occluded. Is it really better to add spacing on the left side with random spacer elements than use dir=rtl? Why?
Hmmm. I thought your screenshot showed it on the left side -- maybe the screenshot was of the `vertical-lr` testcase?
In any case, the effect you describe shouldn't be an issue any longer with `writing-mode` on `html`, since that should make the entire document layout `vertical-rl`, which should mean the content starts at the top right instead of the top left.
And I'm suggesting having spacing because the occlusion behavior is something that you should eventually fix -- the popup should go on the "wrong" side when there isn't room on the right side. So a test that tests which side is the "right" one needs to have enough space on both sides, so that a failure of the test isn't obscured by the occlusion fixup code that I think you'll need to write in the future.
Related details
- Joey Arhar
Code-Coverage
Code-Review
No-Unresolved-Comments
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Joey Arhar (Gerrit)
Joey Arhar added 2 comments![]( "Open in Gerrit")
Joey ArharPlease also look at these and make sure they're sensible visually. (Given my comments on the style sheet, I'm not so sure that's the case right now.)
David BaronHere is what vertical-rl looks like. The arrow still needs to be rotated and the option elements have non-vertical-writing-mode-friendly rules from the old UA sheet that I will fix in a subsequent patch. Do you have any recommendation for rotating that SVG?
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAJYCAIAAAAVFBUnAAAAKXRFWHRjaGVja3N1bQBiMTNjYmEzNTUwNWI0NGRjNjM5ODczNTM4NmQ5YWIzY/cPt4EAABhNSURBVHic7d1bqFxX4cfxmZNTY0xL04aExgsVvCIliiZBpY1p6500prUKVTHFNqEiQWOqqVQFL/XWN8UaikYsUvUlorRFi20hogZ9s5ASBTFYSmnSc7QKx7Zm5v+wdTP/uezZe+Z30nPaz+dhmJkze86aty9rrVnT7na7rUUw2dtGBtNut8/YVQAAg9rxwKr5hsXLFinvehXlVLOfZBYAML1wYFW/W19UnYG6KpTZVCe2NBYAMKVYYNVJq06nM/bFU46nIo/KP83MzMgsAGDxZAKrOpgKo2awFnUeq2/Kqvdh+3+qrwUAaCoQWBXvUExZDW2ssXXVaGBjO6lsqcG6Kia0mr4tAMAos1NeX7+u+vRdHp/H6pu16o2q3mxqt9udTmdUY3W7XY0FADQ1VWCNqqLebCp1Op2+wOotrTpvO9bQGOqduyr1FlW7/d9pvKGXaywAoKmRgXXgwIHJ3nFwi1W32/3iF7/497///cknn/zPf/4z6VAzZmdnV65cuWbNmhUrVgxmlsYCAKZXNYP19a9/fdSfxs48FV11+vTpbrd78803z8/Pt9vtDRs2rFq1avDC+fn5+++//9FHH73gggsuvfTS888/v/4H6HQ65ZcTW63WBz/4wZ/85CcVr19YWJibm5ufn1+7dm2n02m32ytWrOj7CIM5pbEAgPomWSKsWVe9e7D+/e9/v+hFLxpaV0eOHHnPe96zdu3a9evXP/bYY6dOnfrZz372lre8pc5IPvShD/34xz8+ffp075NHjx696KKL7r777qGXrFq16vzzz3/kkUfKlir3YJUJNTSnNBYAUFPjwKqza2rwO4OdTmdoXbVarf379//oRz965zvfWTy85557PvWpT/3+97+vM5i77rrrt7/9be+M17vf/e577rmn+qpVq1YV814rVqwosmlw4kpjAQATm2QGq29F77zzzuv9a98erN71u6GeeOKJsq6KQtq3b1/NkXzpS1/asmVL7zNf/vKXX/7yl4+9sJxjKxtrsJ/kFAAwmWaB1e12jxw5snPnzt4VvZ/+9Kflil7f9weLbw6OGcHs7IkTJy688MLi4cMPP1xxMFWfvXv3Fnfm5+fvu+++e++99957733/+99f87MUI5yZmRnVWEOvUl0AQLXGM1g33njjnXfe2buid+DAgaNHj/adzN5XWhVv+IlPfGLTpk3bt29fv379qVOn7rrrrptuuqnmYH7zm98UUXX8+PEtW7Zs3br1hz/8Yc1rB4/jKpcLqzdjAQBUaxBYRYX0ruh1u913vetdn/zkJ/te2bu9fezb7t69+9WvfvXhw4dPnDixfv36O+644x3veEfNIV188cVbt279whe+cPnll/d+GbD+xykGWXHc6GBjqS4AoFrjGaxRK3pDD2fvO7d9qEcfffQVr3hF77FbDz/88Itf/OI6g7nzzjsfeOCBvXv3rl69+tJLL73sssu2bt16zjnn1Ll26LHyNRcKAQAq1A2sskI+/vGPb968efv27evWrTt16tTdd9994MCBip++GTuJtWHDhr5nzjrrrKeeeqrOqK655pprrrmmaLL77rvvK1/5ys6dO59++ummH2owraoXChUYAFCh8QxW34reD37wg7e97W19r2n0C4P//Oc/y/tzc3O33Xbb5s2baw7mqaee+sMf/nDkyJFf//rXDz300MaNG7/xjW/UvHZwr1hFRSkqAKC+WoHV20nFit6nP/3p8plyRW8wWeo01tlnn917/6tf/erGjRvf+9731hnYueeeu3nz5quuuuqWW2557WtfW//rh0NHOLjJvfpayQUADNV4BuuFL3xh3zNnnXXWwsLC4Fmjk/1s8+OPP/7YY4/VfPGuXbt++ctf3n777X/+85+3bdu2bdu2devWNfp3vd8f7H2yzkIhAMBQ4wOrL5KeeOKJ8pm5ubnvfOc7mzZt6nvx0Nga5eKLLy7vdzqd48eP1/8W4cGDB1ut1kMPPfSLX/ziu9/97q5du172spc9+OCDda4dHGT96aveS2q+GAB47mg8g3X22WeXabJ69epbbrnlda973ZVXXjmqq8ZOYl177bXl/RUrVrzkJS+57LLL6o9nfn7+2LFjz3ve8/bs2XPo0KE//vGP9a8dlYO9paWiAICmpv0twscff/zkyZODL6i/RHj99df/4x//uP/++x955JENGzZs2rSp/laqoT8U3eiDjDpidNQlYgsAGGtMYA0W0tatW8s/dTqdP/3pT29/+9uHFlXNxjp69GhxjPtf/vKXCy+8sDj64Y1vfGOd0U/zQ9EVI6w/iSW5AIBBjWewdu3aVdzpdrvFit62bdv6XtPoi4T79u37/ve/f8UVV7z0pS89fvz44cOH9+3b97vf/a7OYKb5oehpvkIIAFCh8bkG11133dVXX7127donn3zy3HPPff3rX1/8WPIEi4OFkydPXnHFFeXDq666am5urua1xbHy5cNGPxTda9T4h05uTfD+AMBzSuMZrKNHj+7YsaN3Re/nP//5li1bBl9Zs7S63e78/Px5551XPPzrX/+6cuXKmoOZ5oeiG7WgmS0AoL7G8z379+8/dOjQgw8+eMEFFxw7duzgwYP79+/ve02jk9x37dpVzmBde+21b3jDG3pPMa22e/fuw4cPr1mz5sSJE6tXr77jjjumWSKseSEAQLXGM1gnT57cvn17WSdXXnnlzTffXNErY8Plc5/73Fvf+tZWq/W+973v+c9//gMPPLBx48b647nkkksuueSSpp9icJC9+9kHbyd7fwDguakqsEadazU/P79mzZriyRMnTvSt6DVtrHa7/eY3v7nVat16662TfopJDB3nBD+So8AAgD6Nlwg//OEP79ixo7h/3XXXbdmy5cYbbyweTjB99YyrP+al/1kAgCWi8RLhZz/72csvv7zVal199dUrV6781a9+ddFFF1XEx1Lukuphm5cCACbTOLDa7fab3vSmVqv1ta99reJnB5dyVxX6zkQdeqaobVgAwAQmOTWq2jJqrMKyGzAAsMTFAmtonXS73aVcLaOGt5THDAAsfXUDq2KaZ+wzS7NXxg6y4pml+YkAgCUiuUQ4+EvPy8XyHTkAsARNFVjPhRZ5LnxGACBrwsCqc1jUEt+AVegbpEOwAIDp5b9F2Gcpp8lSHhsAsHxlAms57mGq3tXe6FMsl48MAJwZiz6DBQDwXDNJYH3mM5/53ve+1/vMoUOHPv/5z+dGBQCwjDX+qZxjx47deuutrVbr9OnTu3fvbrVat99++969e1ut1gc+8IFXvvKVy3TJzO/hAAApjQPrNa95zcGDB2+44YaPfexjMzMzrVarqKvbbrvtVa961XJMKwCArMaB1Wq1rr/++qeffnrv3r0f/ehHi2e++c1vfuQjH1FXAACTb3K/4YYbvv3tbxf3v/Wtb+3Zsyc6KgCAZWySGazCnj171q1b1263d+zYsSzOFK3PfiwAYBqTB1ar1dq5c2e5pb3d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JrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAICw/wMqhRhtLAYpDwAAAABJRU5ErkJggg==
Joey ArharNot off the top of my head. Style queries plus `rotate: 90deg` / `rotate: -90deg` seems too heavyweight, as does style queries plus implementing the `<angle>` values of `image-orientation`.
(My biggest concern with your screenshot led to my comment on the vertical-rl test below.)
(Seems like this can be handled in a later CL.)
David BaronSo the only way is to use style queries? I'm not very familiar with that, what would it even look like?
It's the only thing I could *think* of that's currently implemented in Chrome. But it's a bad idea and we should do something better. Possibly an extension to https://drafts.csswg.org/css-images-4/#bidi-images , or maybe something else.
Ok, I mentioned that we should fix this here: https://issues.chromium.org/issues/338332443
writing-mode: vertical-rl;Joey ArharIn this, and the `vertical-lr` test, it's more realistic to put the `writing-mode` on the `html` element. I suggest doing that. Also, probably drop the `dir=rtl` on the `body`.
That said, it`s probably *also* good to put enough space around the `<select>` so that the popup could fit on any side of it. Then you'll test that the popup opens on the correct side.
(I noticed this because of your screenshot, where the popup is opening on the wrong side... hopefully because there isn't room to the left of the select.)
(It makes a bit of a difference since the popup gets constrained to go in the wrong direction.)
David BaronIn this, and the vertical-lr test, it's more realistic to put the writing-mode on the html element. I suggest doing that.
done
Also, probably drop the dir=rtl on the body.
That said, its probably *also* good to put enough space around the<select>` so that the popup could fit on any side of it. Then you'll test that the popup opens on the correct side.
Without the dir=rtl attribute, the select is rendered on the left side and then the popover opens on the left side and is occluded. Is it really better to add spacing on the left side with random spacer elements than use dir=rtl? Why?
Hmmm. I thought your screenshot showed it on the left side -- maybe the screenshot was of the `vertical-lr` testcase?
In any case, the effect you describe shouldn't be an issue any longer with `writing-mode` on `html`, since that should make the entire document layout `vertical-rl`, which should mean the content starts at the top right instead of the top left.
And I'm suggesting having spacing because the occlusion behavior is something that you should eventually fix -- the popup should go on the "wrong" side when there isn't room on the right side. So a test that tests which side is the "right" one needs to have enough space on both sides, so that a failure of the test isn't obscured by the occlusion fixup code that I think you'll need to write in the future.
This is what vertical-rl looks like without dir=rtl. It still doesn't quite seem right since it is at the bottom instead of the top, but perhaps we should follow up on this. I am filing a followup: https://issues.chromium.org/issues/338332443
I am removing the dir attribute from the tests
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAJYCAIAAAAVFBUnAAAAKXRFWHRjaGVja3N1bQAwMmNjMTBmNTU3Y2I2YmFlYTZmYWRmYWVjNjVlZGI2Y8b49PwAABbMSURBVHic7d1djFxl4cfxme0WXLVBt3EsCVqDmDQm1kQLqIHKi0GsEqGkGhJIVUAbtQmk1IUQTYj1lSsvIMUSTYiWxIvGl4pKRKRKNXpjYoBUGnWxJqXdFyjGWl5mvTj//3GY2Zk9O/Pr7lY/n4vJzHTOmWd79c3zPHNOfWZmpgYAQM7QYg8AAOC/jcACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhw4s9AACAWq1Wm5mZ6e/Aer2eHsug6n3/MQAA/VmA/Fjc6hJYAMBJt7i9sfCxJbAAgJNlCWbGwsSWwAIAwk6JujippSWwAICY/roiUiP9BdNJyiyBBQAEVCyK4mMLtsm9Yj/FM0tgAQCD6p0TbVG1YO1RZlOV2Mo2lsACAPpXJa2azeacHx4wSHrkUflPQ0NDC5ZZAgsA6FPvYCp0m8E6qQXSNmXV+rL+/3ofO+gABBYA0IceCVFMWc3aWHPW1bzKZM5OKluqs66KCa35nrYit8oBAOatel21aTs8PtHTNmvVGlWt2VSv15vNZrfGmpmZGbCxBBYAMD/dqqg1m0rNZrMtsFpLq8pp5zRrDLXOXZVai6pe/791vFkPH7CxBBYAMA+966otrV566aVnnnnmxIkTL7744oKP9GWGh4dPP/3017zmNV/4whfa1g0HWRP82te+NvvXDTBUAOB/S8WZp3LWanp6ul6vn3nmmSMjIws1xtkdP358ampqenq6Vqvt2LGjXq8vW7asc92w88Ae7TU2Ntbtn7pu7wIAaDVnXZUTV+Xzf/3rX6Ojo4teV7VabWRkZHR09MSJE+UCZVmB5WeCC5cCCwCYW5X4aPuRYLPZbDabS6GuCiMjI0VUdf6qsZRqLIEFAPSjW5q0zg8t0tC6ar3wabdfMkaGLbAAgDnM2Rxtvx/sXH1bUjpHWP0PrEhgAQDz1rl1qfNy7UszsDq7qvPap4OPXGABAL101ka3/mjd3r6QN3XuQ+tW924fmPOdHgQWANC/WS/O3nbd9iVlYS4rL7AAgK56T+T0aJSlWVeFisMeZBJLYAEAVVXsj1NiibDtSa1Wu+222+69997Wd3bt2nX77bf3cX5XcgcAZlexkDq3t58SddU64Hq9/thjj9155521Wu2ll17asmVLrVa75557Pv3pT9dqteuuu27NmjWtH57zKwQWAFBJ78XB1pdLua4K5TjLWnrrW9+6c+fOLVu2fOYznynuolPU1T333FPWVXUCCwCYxbwiadauWpqZ1TnIer1ePF5//fUvvPDC1q1bixmsWq1211133XDDDZ1nmHMSyx4sAGB+eq8GLv1JrB7D3rJly1133VW8c/fdd5elNV9msACAuVW81nm3S3cuNa1LhG0zUp/61KcajUa9Xr/qqqvKD1fZd9VKYAEA7Xq0UcXLoJ8SddX5ftFbRVr16Ko5k8sSIQCQcUr8kHBhfvMosACAOXS75NWptSzYqfpf4WbPAMDJUqUzln5pVR9h33+FwAIAMk6JJcLCyb6lj8ACAOanx5raKX0vwuBap8ACAF6mv+uFniqN1fc45/XfIrAAgEq6JcWpklatqo+5v79FYAEAfapyuawlaAGGLbAAgHnofdvBWW8IvWSdvFtWCywAIOAUWh8snNQBCywAoH+z1snMzMxSzqxuwwuOWWABAF31mOaZ852l2VhzDrLHO9X/IoEFAAzk1Np31erkjXw4eC4A4H/BqVVR1U1PTz/yyCNPP/30qlWr3vve965cubLvUwksAKCqKheLWuIbsAptg5yZmXn00Uc3bdo0OjraaDSOHDkyOTm5Z8+e9evX1+v1Ps4vsACAvAVorOnp6V/84heHDx9etWrVxRdfPDo6WvHAWcc2NjZ23333vf/976/VavV6/Sc/+cnY2NhvfvOb/sZmDxYA8B/zCqPee5iqnKrZbL7Y4qMf/WjFr963b9/ZZ589Njb23e9+d2xs7Oyzz37kkUeqj7xznM8999xll11WjvkDH/jAs88+298JBRYAsGiuvfba0047bXmL733ve6tXr/7gBz8457Hbtm27//77Dx48uH///oMHD+7evXv79u2DDGZ4ePipp54qX/79738fGuo/kywRAgCLY+/evfv3729d2tuwYcMDDzxQ5dhjx45dfvnlrQfefPPNgwzms5/97Lvf/e4NGzY0Go3JyckHHnjgc5/7XN9nE1gAQMZ891198YtfPO+881rf2bFjxznnnFPl2OHh4fHx8dWrVxcvDx061N+E08zMTLGN/ROf+MSaNWu+//3vP/XUU41G41vf+laxH6s/AgsAWBxbt24tnkxPTz/00EMPPvjggw8++JGPfKTKsTfddNO6des+9KEPNRqNiYmJvXv33nrrrYMM5umnnz7nnHNuueWW8meDhw4dOuuss/o7m8ACABbHo48+WkTVgQMHzjvvvPXr13/nO9+peOyNN964Zs2aPXv2jI+PNxqN8geAfXvTm97U9s7y5cv/+c9/9nc2gQUALI4LLrhg/fr1d9xxx6WXXrps2bJ5HXv48OG3vOUtY2Nj5TuDTDjVarWjR48Wc1f1ev2ZZ57ZuXPnunXr+j6bwAIA+jfI9a5279798MMPb9269VWvetXFF198ySWXrF+/fsWKFVWOPfPMM9veWb58+fPPP9/3YF796lcXdVWv11esWLFjx453vOMdGzdu7O9sAgsA6F+9Xu+7sa655pprrrmmmHx66KGHvvzlL1955ZUvvPBClWOfe+658vnU1NTdd9997rnn9jeMUutF2ycnJ48ePdr3qQQWALA4nn/++d///vf79u371a9+9cQTT6xdu/brX/96xWOLCafy+Ve+8pW1a9deffXVfQ/mkksuKZ7U6/Vms/mnP/3psssu6/tsAgsAWBxnnHHGueeeu3Hjxi996Utvf/vbB7mw5+Tk5JEjRwYZzHXXXVfOYA0PD5911lllcvVBYAEAi2Pz5s0/+9nPvvnNbz755JMXXXTRRRdd9LrXva7isRdccEH5vNlsHjhwYMBfEX784x8/duzYL3/5y8OHD69cufKd73ynK7kDAItvvvuxdu7cWavVnnjiiZ/+9Kf33nvv5s2b3/zmN//xj3+scuzHPvax8vmyZcve8IY39DfhVM5a/e53v7vqqqsajcZf/vKXN77xjZOTkz/84Q/PP//8Ps7pXoQAwGKanp5+/PHHTzvttE9+8pNPPvlk9T1YN9xww6ZNm1auXHnixIkzzjhj3bp1g0w41Wq17du379q16w9/+MPrX//6xx57bOfOndu2bev7bGawAID/GORXga0nKfT+2L59+z784Q+vXLmy0WgcOXJkYmLiBz/4QcWv+O1vf1tcxv3Pf/7z6tWrJyYmfvzjH7/rXe+qPry2NycmJlpvMn3llVfefvvtFQfTyQwWANCn1kwpq6V8nDOwtm3bdv/99x88eHD//v0HDx7cvXv39u3bK371zTff/O1vf/vxxx9ftWrVgQMHdu3aVfFmz93GOTMzMz09XY55fHz89NNPrziYTgILAAiYM6c6HTt27PLLLy9fbtiw4dlnn6147NGjR6+44ory5caNG6empuY7gEIx8muvvba8rOj1119//vnn33LLLf2d0BIhADAPxQJi5zJi+U4xITQ0NFR8rPfZhoeHx8fHV69eXbw8dOhQ9X1UxYTTa1/72uLlX//61+oTTsUIW+fY6vX6bbfddumll9ZqtauvvnpkZOTnP//52972tj6qsSCwAICBtPZW6wLcnHVy0003rVu3rthKNTExsXfv3ltvvbXil27evPmKK6749a9/Xfyi8Ec/+tE3vvGNiqOddYRDQ0PFFq6vfvWrVQbfm8ACAOY2r83vRZ0MDQ0NDQ0dP358ZGRk1o/deOONa9as2bNnz/j4eKPRuO+++6pfy+rzn//8+973vlqttmnTple84hUPP/zw2rVrex9y/PjxYuJqvguafcSWwAIAuurRVZ3/NDQ01Gw2y7pqNpvDw8NTU1Ojo6PdGuvCCy+88MIL+xvYe97znlqtduedd1b5/PHjx6empoaHh4uxta5mdp65x5dWHJ7AAgD6N2uBlaX1yle+8h//+Mff/va3RRrdywwPD69YsaJer99xxx2dq4SdTzqLqnpgBa51AQD8N2lrg/Jl8aTH48zMTLPZLO5dUyjeaXtSKA/p9kVz6pZErfFUzFEVK4NtT4q5q9bd7r0f59VbZrAAgHlo/SFhj1XCIl/K520h1ZZZxWN5PaoyXGYtrVlnmDovbVVmU9lVbb1VrhV2nryPfVptBBYAMJDWazS05lHrJRuazeayZcvKTxYTXW2NNa9JrG5Le61dVV6RoXWmqi2/us1ODUhgAQCV9P4hYWtmFYVUlE1ZV8Vj+bLbUmPfS4Sdj60zVa0zWN12X/X+lnkRWADAy7SFVI/LivZQrhWWvVU0Vq1Wq15XfS8R9pjKmnVlsPe3zPrOHFlmkzsA0Kb3Pvcem9xnfVkuCBaLg4PUVaF6Y5V11Tqh1e12hL03ts8rsMxgAQAZs059td45p1g3LNqrbbN85/b26it3Vba6d2666jxPkBksAKBdtxmsildt6P2yx+Os395NZ2PN+Vhx4mrwa2L9G24bacRHCCxQAAAAAElFTkSuQmCC
Related details
Code-Coverage
Code-Review
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Chromium LUCI CQ (Gerrit)
Chromium LUCI CQ submitted the change with unreviewed changes![]( "Open in Gerrit")
Unreviewed changes
11 is the latest approved patch-set.
The change was submitted with unreviewed changes in the following files:
```
The name of the file: third_party/blink/web_tests/external/wpt/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl-ref.html
Insertions: 0, Deletions: 1.
@@ -7,7 +7,6 @@
}
</style>
-<body dir=rtl>
<div id=container class=stylable-select-container>
<button class=stylable-select-button popovertarget=popover id=button>
<span class=stylable-select-selectedoption>one</span>
```
```
The name of the file: third_party/blink/web_tests/external/wpt/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl.tentative.html
Insertions: 0, Deletions: 1.
@@ -15,7 +15,6 @@
}
</style>
-<body dir=rtl>
<select>
<option>one</option>
<option>two</option>
```
Change information
Add content to appearance:base-select fallback button
This patch adds extra content and styling to the fallback button in the
UA shadowroot of <select> which gets rendered when it is
appearance:base-select and the author does not provide a <button>
element to replace it with.
In order to do this, this patch also adds 3 pseudo-elements to the
<select> element:
- ::select-fallback-button which targets the fallback <button>
- ::select-fallback-button-icon which targets the <div> inside the
fallback <button> which renders an svg as its background-image
- ::select-fallback-selectedoption which targets the <span> inside the
fallback <button> which gets the selected <option>'s text content
copied into it.
The CSS and contents are all exactly the same as they are in
<selectlist>. <selectlist> also has the same pseudo elements.
This patch also changes some tests to inherit from PageTestBase. Adding
the svg background-image caused a scheduling crash in v8 with something
about microtask queues. I don't know what PageTestBase does differently
from these tests which are making their own TaskEnvironment, but
PageTestBase does it in a way which doesn't make the test crash.
- M third_party/blink/renderer/core/css/css_selector.cc
- M third_party/blink/renderer/core/css/css_selector.h
- M third_party/blink/renderer/core/css/parser/css_selector_parser.cc
- M third_party/blink/renderer/core/css/rule_feature_set.cc
- M third_party/blink/renderer/core/css/rule_set.cc
- M third_party/blink/renderer/core/css/selector_checker.cc
- M third_party/blink/renderer/core/dom/element.cc
- M third_party/blink/renderer/core/editing/surrounding_text_test.cc
- M third_party/blink/renderer/core/editing/text_offset_mapping_test.cc
- M third_party/blink/renderer/core/frame/web_frame_test.cc
- M third_party/blink/renderer/core/html/forms/external_popup_menu_test.cc
- M third_party/blink/renderer/core/html/forms/internal_popup_menu_test.cc
- M third_party/blink/renderer/core/html/forms/select_type.cc
- M third_party/blink/renderer/core/html/resources/stylable_select.css
- M third_party/blink/renderer/core/html/shadow/shadow_element_names.json5
- M third_party/blink/renderer/core/inspector/inspector_trace_events.cc
- M third_party/blink/web_tests/FlagExpectations/highdpi
- M third_party/blink/web_tests/TestExpectations
- M third_party/blink/web_tests/external/wpt/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-styles.css
- R third_party/blink/web_tests/external/wpt/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist-ref.html
- M third_party/blink/web_tests/external/wpt/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist.tentative.html
- M third_party/blink/web_tests/external/wpt/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist.tentative.html
- C third_party/blink/web_tests/external/wpt/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist-ref.html
- M third_party/blink/web_tests/external/wpt/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist.tentative.html
- C third_party/blink/web_tests/external/wpt/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr-ref.html
- A third_party/blink/web_tests/external/wpt/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr.tentative.html
- C third_party/blink/web_tests/external/wpt/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl-ref.html
- A third_party/blink/web_tests/external/wpt/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl.tentative.html
- M third_party/blink/web_tests/fast/forms/suggested-value-after-empty-suggested-value-expected.txt
- M third_party/blink/web_tests/fast/forms/suggested-value-expected.txt
- M third_party/blink/web_tests/inspector-protocol/dom-snapshot/dom-snapshot-getSnapshot-input-value-expected.txt
- M third_party/blink/web_tests/platform/linux/virtual/date-input-inline-block-disabled/fast/forms/suggested-value-expected.txt
Code-Review: +1 by David Baron
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Blink W3C Test Autoroller (Gerrit)
Message from Blink W3C Test Autoroller![]( "Open in Gerrit")
The WPT PR for this CL has been merged upstream! https://github.com/web-platform-tests/wpt/pull/45774
Related details
Code-Coverage
Code-Review
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |