haikuwebkit/LayoutTests/fast/forms/select-non-native-rendering...

117 lines
2.8 KiB
HTML
Raw Permalink Normal View History

RTL non-native <select> buttons should have arrows on the left https://bugs.webkit.org/show_bug.cgi?id=157112 <rdar://problem/25894441> Reviewed by Simon Fraser. Source/WebCore: The <select> elements that are completely rendered by WebCore (i.e. not the native controls) always assumed that they were left-to-right. This change allows the button to handle both directions, swapping the side the little arrows are rendered on, as well as the padding of the text label. Test: fast/forms/select-non-native-rendering-direction.html * rendering/RenderMenuList.cpp: (RenderMenuList::clientPaddingLeft): This must take into account the direction of the element. (RenderMenuList::clientPaddingRight): Ditto. * rendering/RenderThemeMac.mm: Change the left and right constants to use the terms before and after. (WebCore::RenderThemeMac::paintMenuListButtonDecorations): The left and right positions must take the direction into account, which means different calculations. (WebCore::RenderThemeMac::popupInternalPaddingBox): Similarly for the padding that is used to position the text label. LayoutTests: New test that checks the layout of WebCore-drawn <select> elements in right-to-left mode. * fast/forms/select-non-native-rendering-direction.html: Added. * platform/mac/fast/forms/select-non-native-rendering-direction-expected.png: Added. * platform/mac/fast/forms/select-non-native-rendering-direction-expected.txt: Added. Canonical link: https://commits.webkit.org/175218@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@200165 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2016-04-28 01:53:31 +00:00
<style>
select {
border: 1px solid black;
}
</style>
<div>
Left to right select:
<select>
<option>Alabama</option>
<option>Alaska</option>
<option>Arizona</option>
<option>Arkansas</option>
<option>California</option>
<option>Colorado</option>
<option>Connecticut</option>
<option>Delaware</option>
<option>Florida</option>
<option>Georgia</option>
<option>Hawaii</option>
<option>Idaho</option>
<option>Illinois</option>
<option>Indiana</option>
<option>Iowa</option>
<option>Kansas</option>
<option>Kentucky</option>
<option>Louisiana</option>
<option>Maine</option>
<option>Maryland</option>
<option>Massachusetts</option>
<option>Michigan</option>
<option>Minnesota</option>
<option>Mississippi</option>
<option>Missouri</option>
<option>Montana</option>
<option>Nebraska</option>
<option>Nevada</option>
<option>New Hampshire</option>
<option>New Jersey</option>
<option>New Mexico</option>
<option>New York</option>
<option>North Carolina</option>
<option>North Dakota</option>
<option>Ohio</option>
<option>Oklahoma</option>
<option>Oregon</option>
<option>Pennsylvania</option>
<option>Rhode Island</option>
<option>South Carolina</option>
<option>South Dakota</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Utah</option>
<option>Vermont</option>
<option>Virginia</option>
<option>Washington</option>
<option>West Virginia</option>
<option>Wisconsin</option>
<option>Wyoming</option>
</select>
</div>
<div dir="rtl">
Right to left select:
<select>
<option>Alabama</option>
<option>Alaska</option>
<option>Arizona</option>
<option>Arkansas</option>
<option>California</option>
<option>Colorado</option>
<option>Connecticut</option>
<option>Delaware</option>
<option>Florida</option>
<option>Georgia</option>
<option>Hawaii</option>
<option>Idaho</option>
<option>Illinois</option>
<option>Indiana</option>
<option>Iowa</option>
<option>Kansas</option>
<option>Kentucky</option>
<option>Louisiana</option>
<option>Maine</option>
<option>Maryland</option>
<option>Massachusetts</option>
<option>Michigan</option>
<option>Minnesota</option>
<option>Mississippi</option>
<option>Missouri</option>
<option>Montana</option>
<option>Nebraska</option>
<option>Nevada</option>
<option>New Hampshire</option>
<option>New Jersey</option>
<option>New Mexico</option>
<option>New York</option>
<option>North Carolina</option>
<option>North Dakota</option>
<option>Ohio</option>
<option>Oklahoma</option>
<option>Oregon</option>
<option>Pennsylvania</option>
<option>Rhode Island</option>
<option>South Carolina</option>
<option>South Dakota</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Utah</option>
<option>Vermont</option>
<option>Virginia</option>
<option>Washington</option>
<option>West Virginia</option>
<option>Wisconsin</option>
<option>Wyoming</option>
</select>
</div>