LibWeb: Use String::to_fullwidth() when applying text-transform
Some checks are pending
CI / Lagom (false, FUZZ, ubuntu-24.04, Linux, Clang) (push) Waiting to run
CI / Lagom (false, NO_FUZZ, macos-14, macOS, Clang) (push) Waiting to run
CI / Lagom (false, NO_FUZZ, ubuntu-24.04, Linux, GNU) (push) Waiting to run
CI / Lagom (true, NO_FUZZ, ubuntu-24.04, Linux, Clang) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (macos-14, macOS, macOS-universal2) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (ubuntu-24.04, Linux, Linux-x86_64) (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Push notes / build (push) Waiting to run

Before, we just returned the input string. Now the property is applied
using the `String::to_fullwidth()` function.

fixes:
https://wpt.fyi/results/css/css-text/text-transform/text-transform-fullwidth-001.xht
This commit is contained in:
Grubre 2024-11-01 08:01:48 +01:00 committed by Tim Flynn
parent a8a81342bb
commit 8703ca0c7d
Notes: github-actions[bot] 2024-11-01 11:49:12 +00:00
3 changed files with 564 additions and 3 deletions

View file

@ -0,0 +1,243 @@
[ ]
[ ]
_
_
⦅ ⦆
⦆ 。
。 「
「 」
」 、
、 ・
・ ヲ
ヲ ァ
ァ ィ
ィ ゥ
ゥ ェ
ェ ォ
ォ ャ
ャ ュ
ュ ョ
ョ ッ
ッ ー
ー ア
ア イ
イ ウ
ウ エ
エ オ
オ カ
カ キ
キ ク
ク ケ
ケ コ
コ サ
サ シ
シ ス
ス セ
セ ソ
ソ タ
タ チ
チ ツ
ツ テ
テ ト
ト ナ
ナ ニ
ニ ヌ
ヌ ネ
ハ ヒ
ヒ フ
フ ヘ
ヘ ホ
ホ マ
マ ミ
ミ ム
ム メ
メ モ
モ ヤ
ヤ ユ
ユ ヨ
ヨ ラ
ラ リ
リ ル
ル レ
レ ロ
ロ ワ
ワ ン
ン  ゙
 ゙  ゚
 ゚ []
[] ᆨ
ᄀ ㄲ
ᄁ ᆪ
ᆪ ᆫ
ᄂ ᆬ
ᆬ ᆭ
ᆭ ᆮ
ᄃ ᄄ
ᄄ ᆯ
ᄅ ᆰ
ᆰ ᆱ
ᆱ ᆲ
ᆲ ᆳ
ᆳ ᆴ
ᆴ ᆵ
ᆵ ㅀ
ᄚ ᄆ
ᄆ ᄇ
ᄇ ᄈ
ᄈ ᆹ
ᄡ ᄉ
ᄉ ᆻ
ᄊ ᄋ
ᄋ ᆽ
ᄌ ᄍ
ᄍ ᆾ
ᄎ ᄏ
ᄏ ᇀ
ᄐ ᄑ
ᄑ ᇂ
ᄒ ᅡ
ᅡ ᅢ
ᅢ ᅣ
ᅣ ᅤ
ᅤ ᅥ
ᅥ ᅦ
ᅦ ᅧ
ᅧ ᅨ
ᅨ ᅩ
ᅩ ᅪ
ᅪ ᅫ
ᅫ ᅬ
ᅬ ᅭ
ᅭ ᅮ
ᅮ ᅯ
ᅯ ᅰ
ᅰ ᅱ
ᅱ ᅲ
ᅲ ᅳ
ᅳ ᅴ
ᅴ ᅵ
ᅵ ¢
¢ £
£ ¬
¬  ̄
 ̄ ¦
¦ ¥
¥ ₩
₩ │
│ ←
← ↑
↑ →
→ ↓
↓ ■
■ ○
あ い
い う
う え
え お
お ア
ア イ
イ ウ
ウ エ
エ オ

View file

@ -0,0 +1,315 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<style type="text/css">
@font-face {
font-family: 'mplus-1p-regular';
src: url('/fonts/mplus-1p-regular.woff') format('woff');
}
.test span {
text-transform: full-width;
}
span {
font-family: 'mplus-1p-regular';
background-color: cyan;
}
.test {
color: Blue;
line-height: 1.1;
}
.test div {
display: inline-block;
margin-bottom: .5em;
text-align: center;
white-space: nowrap;
}
</style>
</head>
<script src="../include.js"></script>
<body>
<div class="test">
<!-- FULLWIDTH LATIN -->
<div>[<span> </span>]<br />[<span> </span>]</div>
<div><span></span><br /><span>!</span></div>
<div><span></span><br /><span>&quot;</span></div>
<div><span></span><br /><span>#</span></div>
<div><span></span><br /><span>$</span></div>
<div><span></span><br /><span>%</span></div>
<div><span></span><br /><span>&amp;</span></div>
<div><span></span><br /><span>'</span></div>
<div><span></span><br /><span>(</span></div>
<div><span></span><br /><span>)</span></div>
<div><span></span><br /><span>*</span></div>
<div><span></span><br /><span>+</span></div>
<div><span></span><br /><span>,</span></div>
<div><span></span><br /><span>-</span></div>
<div><span></span><br /><span>.</span></div>
<div><span></span><br /><span>/</span></div>
<div><span></span><br /><span>0</span></div>
<div><span></span><br /><span>1</span></div>
<div><span></span><br /><span>2</span></div>
<div><span></span><br /><span>3</span></div>
<div><span></span><br /><span>4</span></div>
<div><span></span><br /><span>5</span></div>
<div><span></span><br /><span>6</span></div>
<div><span></span><br /><span>7</span></div>
<div><span></span><br /><span>8</span></div>
<div><span></span><br /><span>9</span></div>
<div><span></span><br /><span>:</span></div>
<div><span></span><br /><span>;</span></div>
<div><span></span><br /><span>&lt;</span></div>
<div><span></span><br /><span>=</span></div>
<div><span></span><br /><span>&gt;</span></div>
<div><span></span><br /><span>?</span></div>
<div><span></span><br /><span>@</span></div>
<div><span></span><br /><span>A</span></div>
<div><span></span><br /><span>B</span></div>
<div><span></span><br /><span>C</span></div>
<div><span></span><br /><span>D</span></div>
<div><span></span><br /><span>E</span></div>
<div><span></span><br /><span>F</span></div>
<div><span></span><br /><span>G</span></div>
<div><span></span><br /><span>H</span></div>
<div><span></span><br /><span>I</span></div>
<div><span></span><br /><span>J</span></div>
<div><span></span><br /><span>K</span></div>
<div><span></span><br /><span>L</span></div>
<div><span></span><br /><span>M</span></div>
<div><span></span><br /><span>N</span></div>
<div><span></span><br /><span>O</span></div>
<div><span></span><br /><span>P</span></div>
<div><span></span><br /><span>Q</span></div>
<div><span></span><br /><span>R</span></div>
<div><span></span><br /><span>S</span></div>
<div><span></span><br /><span>T</span></div>
<div><span></span><br /><span>U</span></div>
<div><span></span><br /><span>V</span></div>
<div><span></span><br /><span>W</span></div>
<div><span></span><br /><span>X</span></div>
<div><span></span><br /><span>Y</span></div>
<div><span></span><br /><span>Z</span></div>
<div><span></span><br /><span>[</span></div>
<div><span></span><br /><span>\</span></div>
<div><span></span><br /><span>]</span></div>
<div><span></span><br /><span>^</span></div>
<div><span>_</span><br /><span>_</span></div>
<div><span></span><br /><span>`</span></div>
<div><span></span><br /><span>a</span></div>
<div><span></span><br /><span>b</span></div>
<div><span></span><br /><span>c</span></div>
<div><span></span><br /><span>d</span></div>
<div><span></span><br /><span>e</span></div>
<div><span></span><br /><span>f</span></div>
<div><span></span><br /><span>g</span></div>
<div><span></span><br /><span>h</span></div>
<div><span></span><br /><span>i</span></div>
<div><span></span><br /><span>j</span></div>
<div><span></span><br /><span>k</span></div>
<div><span></span><br /><span>l</span></div>
<div><span></span><br /><span>m</span></div>
<div><span></span><br /><span>n</span></div>
<div><span></span><br /><span>o</span></div>
<div><span></span><br /><span>p</span></div>
<div><span></span><br /><span>q</span></div>
<div><span></span><br /><span>r</span></div>
<div><span></span><br /><span>s</span></div>
<div><span></span><br /><span>t</span></div>
<div><span></span><br /><span>u</span></div>
<div><span></span><br /><span>v</span></div>
<div><span></span><br /><span>w</span></div>
<div><span></span><br /><span>x</span></div>
<div><span></span><br /><span>y</span></div>
<div><span></span><br /><span>z</span></div>
<div><span></span><br /><span>{</span></div>
<div><span></span><br /><span>|</span></div>
<div><span></span><br /><span>}</span></div>
<div><span></span><br /><span>~</span></div>
<div><span></span><br /><span></span></div> <!-- LEFT WHITE PARENTHESIS -->
<div><span></span><br /><span></span></div> <!-- RIGHT WHITE PARENTHESIS -->
<!-- HALFWIDTH KATAKANA -->
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span>ソ</span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span>&nbsp;&#x3099;</span><br /><span>&nbsp;</span></div>
<div><span>&nbsp;&#x309A;</span><br /><span>&nbsp;</span></div>
<!-- HALFWIDTH HANGUL -->
<div>[<span>&#x115F;</span>]<br />[<span>&#xFFA0;</span>]</div> <!-- HANGUL FILLER -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER KIYEOK -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER SSANGKIYEOK -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER KIYEOK-SIOS -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER NIEUN -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER NIEUN-CIEUC -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER NIEUN-HIEUH -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER TIKEUT -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER SSANGTIKEUT -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER RIEUL -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER RIEUL-KIYEOK -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER RIEUL-MIEUM -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER RIEUL-PIEUP -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER RIEUL-SIOS -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER RIEUL-THIEUTH -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER RIEUL-PHIEUPH -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER RIEUL-HIEUH -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER MIEUM -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER PIEUP -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER SSANGPIEUP -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER PIEUP-SIOS -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER SIOS -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER SSANGSIOS -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER IEUNG -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER CIEUC -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER SSANGCIEUC -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER CHIEUCH -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER KHIEUKH -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER THIEUTH -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER PHIEUPH -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER HIEUH -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER A -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER AE -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER YA -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER YAE -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER EO -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER E -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER YEO -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER YE -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER O -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER WA -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER WAE -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER OE -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER YO -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER U -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER WEO -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER WE -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER WI -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER YU -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER EU -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER YI -->
<div><span></span><br /><span></span></div> <!-- HANGUL LETTER I -->
<!-- FULLWIDTH SIGN -->
<div><span></span><br /><span>¢</span></div> <!-- CENT SIGN -->
<div><span></span><br /><span>£</span></div> <!-- POUND SIGN -->
<div><span></span><br /><span>¬</span></div> <!-- NOT SIGN -->
<div><span></span><br /><span>¯</span></div> <!-- MACRON -->
<div><span></span><br /><span>¦</span></div> <!-- BROKEN BAR -->
<div><span></span><br /><span>¥</span></div> <!-- YEN SIGN -->
<div><span></span><br /><span></span></div> <!-- WON SIGN -->
<!-- HALFWIDTH SIGN -->
<div><span></span><br /><span></span></div> <!-- FORMS LIGHT VERTICAL -->
<div><span></span><br /><span></span></div> <!-- LEFTWARDS ARROW -->
<div><span></span><br /><span></span></div> <!-- UPWARDS ARROW -->
<div><span></span><br /><span></span></div> <!-- RIGHTWARDS ARROW -->
<div><span></span><br /><span></span></div> <!-- DOWNWARDS ARROW -->
<div><span></span><br /><span></span></div> <!-- BLACK SQUARE -->
<div><span></span><br /><span></span></div> <!-- WHITE CIRCLE -->
<!-- HALFWIDTH LATIN -->
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<!-- FULLWIDTH KANA -->
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
<div><span></span><br /><span></span></div>
</div>
<script>
test(() => {
var elements = document.getElementsByClassName('test');
for (var i = 0; i < elements.length; i++) {
println(elements[i].innerText);
}
});
</script>
</body>
</html>

View file

@ -293,11 +293,14 @@ static ErrorOr<String> apply_text_transform(String const& string, CSS::TextTrans
case CSS::TextTransform::Capitalize: {
return string.to_titlecase(locale, TrailingCodePointTransformation::PreserveExisting);
}
case CSS::TextTransform::FullSizeKana:
case CSS::TextTransform::FullWidth:
// FIXME: Implement these!
case CSS::TextTransform::FullSizeKana: {
// FIXME: Implement this!
return string;
}
case CSS::TextTransform::FullWidth: {
return string.to_fullwidth();
}
}
VERIFY_NOT_REACHED();
}