-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[macOS] <input type=color> swatch is too narrow in vertical writing mode
https://bugs.webkit.org/show_bug.cgi?id=264298 rdar://118023600 Reviewed by Wenson Hsieh. On macOS, color inputs have native styling similar to buttons. Add `StyleAppearance::ColorWell` to the allowlist of button-like controls that have transposed metrics for vertical writing modes. * LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/color-input-appearance-native-computed-style-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/color-input-appearance-native-computed-style.html: Added. * LayoutTests/platform/wpe/TestExpectations: * Source/WebCore/rendering/RenderTheme.cpp: (WebCore::RenderTheme::adjustStyle): Canonical link: https://commits.webkit.org/270314@main
- Loading branch information
Showing
4 changed files
with
50 additions
and
0 deletions.
There are no files selected for viewing
6 changes: 6 additions & 0 deletions
6
...sts/css/css-writing-modes/forms/color-input-appearance-native-computed-style-expected.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
|
||
|
||
PASS input[type="color"][style="writing-mode: horizontal-tb"] block size should match height and inline size should match width | ||
PASS input[type="color"][style="writing-mode: vertical-lr"] block size should match width and inline size should match height | ||
PASS input[type="color"][style="writing-mode: vertical-rl"] block size should match width and inline size should match height | ||
|
39 changes: 39 additions & 0 deletions
39
...tform-tests/css/css-writing-modes/forms/color-input-appearance-native-computed-style.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
<!doctype html> | ||
<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder"> | ||
<link rel="help" href="https://html.spec.whatwg.org/#color-state-(type=color)"> | ||
<link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow"> | ||
<title>Color input appearance native writing mode computed style</title> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
|
||
<input type="color" style="writing-mode: horizontal-tb"> | ||
<input type="color" style="writing-mode: vertical-lr"> | ||
<input type="color" style="writing-mode: vertical-rl"> | ||
|
||
<script> | ||
test(() => { | ||
const input = document.querySelector(`input[type="color"][style="writing-mode: horizontal-tb"]`); | ||
const style = getComputedStyle(input); | ||
const blockSize = parseInt(style.blockSize, 10); | ||
const inlineSize = parseInt(style.inlineSize, 10); | ||
assert_not_equals(blockSize, 0); | ||
assert_not_equals(inlineSize, 0); | ||
assert_greater_than_equal(inlineSize, blockSize); | ||
assert_equals(style.blockSize, style.height); | ||
assert_equals(style.inlineSize, style.width); | ||
}, `input[type="color"][style="writing-mode: horizontal-tb"] block size should match height and inline size should match width`); | ||
|
||
for (const writingMode of ["vertical-lr", "vertical-rl"]) { | ||
test(() => { | ||
const input = document.querySelector(`input[type="color"][style="writing-mode: ${writingMode}"]`); | ||
const style = getComputedStyle(input); | ||
const blockSize = parseInt(style.blockSize, 10); | ||
const inlineSize = parseInt(style.inlineSize, 10); | ||
assert_not_equals(blockSize, 0); | ||
assert_not_equals(inlineSize, 0); | ||
assert_greater_than_equal(inlineSize, blockSize); | ||
assert_equals(style.blockSize, style.width); | ||
assert_equals(style.inlineSize, style.height); | ||
}, `input[type="color"][style="writing-mode: ${writingMode}"] block size should match width and inline size should match height`); | ||
}; | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters