[phrase-line-break] Add a test for overflow fallback
This patch adds a wpt test for when a phrase overflows the
line. This was discussed and resolved at:
https://github.com/w3c/csswg-drafts/issues/9033
and implemented in crrev.com/c/4726301 with pixel tests.
Bug: 1443291
Change-Id: Id1ed253410b6d40cb78d1a8a3dc114d806c5672f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4750599
Auto-Submit: Koji Ishii <kojii@chromium.org>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Commit-Queue: Kent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1179437}
diff --git a/css/css-text/word-break/auto-phrase/word-break-auto-phrase-overflow-001-ref.html b/css/css-text/word-break/auto-phrase/word-break-auto-phrase-overflow-001-ref.html
new file mode 100644
index 0000000..d75b50d
--- /dev/null
+++ b/css/css-text/word-break/auto-phrase/word-break-auto-phrase-overflow-001-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+.container > div {
+ white-space: nowrap;
+ font-size: 10px;
+ border: 1px solid;
+}
+</style>
+<div class="container" lang="ja">
+ <div style="width: 7em">
+ 楽しい<br>ドライブ。</div>
+ <div style="width: 4em">
+ 楽しい<br>ドライ<br>ブ。</div>
+ <div style="width: 1em">
+ 楽<br>し<br>い<br>ド<br>ラ<br>イ<br>ブ。</div>
+ <div style="width: 1em; overflow-wrap: anywhere">
+ 楽<br>し<br>い<br>ド<br>ラ<br>イ<br>ブ<br>。</div>
+</div>
diff --git a/css/css-text/word-break/auto-phrase/word-break-auto-phrase-overflow-001.html b/css/css-text/word-break/auto-phrase/word-break-auto-phrase-overflow-001.html
new file mode 100644
index 0000000..7677441
--- /dev/null
+++ b/css/css-text/word-break/auto-phrase/word-break-auto-phrase-overflow-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property">
+<link rel="match" href="word-break-auto-phrase-overflow-001-ref.html">
+<!--
+ This test assumes that all engines segment a Japanese text:
+ 楽しいドライブ
+ to the following phrases:
+ 楽しい / ドライブ
+
+ While assuming all engines segment this way looks fairly reasonable,
+ segmenting differently doesn't necessarily mean a failure because the
+ algorithm is UA dependent. Please add references if different.
+-->
+<style>
+.container > div {
+ word-break: auto-phrase;
+ font-size: 10px;
+ border: 1px solid;
+}
+</style>
+<div class="container" lang="ja">
+ <!-- Both phrases can fit to 7em, but the whole sentence doesn't. -->
+ <div style="width: 7em">
+ 楽しいドライブ。</div>
+ <!-- The 2nd phrase doesn't fit to `4em`, hence fallback to normal. -->
+ <div style="width: 4em">
+ 楽しいドライブ。</div>
+ <!-- Only one character can fit to `1em`, but no break before the period. -->
+ <div style="width: 1em">
+ 楽しいドライブ。</div>
+ <!-- Breaks even before the period if `overflow-wrap`. -->
+ <div style="width: 1em; overflow-wrap: anywhere">
+ 楽しいドライブ。</div>
+</div>
