WebKit export: [css-text-4] Update text-wrap properties to latest spec (#42673)
https://bugs.webkit.org/show_bug.cgi?id=263432
diff --git a/css/css-cascade/all-prop-revert-layer.html b/css/css-cascade/all-prop-revert-layer.html
index cd76a64..868267b 100644
--- a/css/css-cascade/all-prop-revert-layer.html
+++ b/css/css-cascade/all-prop-revert-layer.html
@@ -336,6 +336,7 @@
text-transform: lowercase;
text-underline-offset: 123px;
text-underline-position: under;
+ text-wrap-style: balance;
timeline-scope: --foo;
top: 123px;
touch-action: none;
diff --git a/css/css-text/parsing/text-wrap-valid.html b/css/css-text/parsing/text-wrap-valid.html
index d9ff34e..a2eed8c 100644
--- a/css/css-text/parsing/text-wrap-valid.html
+++ b/css/css-text/parsing/text-wrap-valid.html
@@ -15,28 +15,28 @@
test_valid_value("text-wrap", "wrap");
test_valid_value("text-wrap", "nowrap");
-test_valid_value("text-wrap", "auto");
+test_valid_value("text-wrap", "auto", "wrap");
test_valid_value("text-wrap", "balance");
test_valid_value("text-wrap", "stable");
test_valid_value("text-wrap", "pretty");
-test_valid_value("text-wrap", "wrap auto");
-test_valid_value("text-wrap", "wrap balance");
-test_valid_value("text-wrap", "wrap pretty");
-test_valid_value("text-wrap", "wrap stable");
-test_valid_value("text-wrap", "auto wrap");
-test_valid_value("text-wrap", "balance wrap");
-test_valid_value("text-wrap", "pretty wrap");
-test_valid_value("text-wrap", "stable wrap");
+test_valid_value("text-wrap", "wrap auto", "wrap");
+test_valid_value("text-wrap", "wrap balance", "balance");
+test_valid_value("text-wrap", "wrap pretty", "pretty");
+test_valid_value("text-wrap", "wrap stable", "stable");
+test_valid_value("text-wrap", "auto wrap", "wrap");
+test_valid_value("text-wrap", "balance wrap", "balance");
+test_valid_value("text-wrap", "pretty wrap", "pretty");
+test_valid_value("text-wrap", "stable wrap", "stable");
-test_valid_value("text-wrap", "nowrap auto");
+test_valid_value("text-wrap", "nowrap auto", "nowrap");
test_valid_value("text-wrap", "nowrap balance");
test_valid_value("text-wrap", "nowrap pretty");
test_valid_value("text-wrap", "nowrap stable");
-test_valid_value("text-wrap", "auto nowrap");
-test_valid_value("text-wrap", "balance nowrap");
-test_valid_value("text-wrap", "pretty nowrap");
-test_valid_value("text-wrap", "stable nowrap");
+test_valid_value("text-wrap", "auto nowrap", "nowrap");
+test_valid_value("text-wrap", "balance nowrap", "nowrap balance");
+test_valid_value("text-wrap", "pretty nowrap", "nowrap pretty");
+test_valid_value("text-wrap", "stable nowrap", "nowrap stable");
test_valid_value("text-wrap", "initial");
test_valid_value("text-wrap", "inherit");
diff --git a/css/css-text/parsing/white-space-shorthand-text-wrap.html b/css/css-text/parsing/white-space-shorthand-text-wrap.html
index de6d9f5..b99dd19 100644
--- a/css/css-text/parsing/white-space-shorthand-text-wrap.html
+++ b/css/css-text/parsing/white-space-shorthand-text-wrap.html
@@ -31,17 +31,31 @@
</script>
<style>
-#white-space-after-text-wrap {
+#white-space-after-text-wrap-balance {
text-wrap: balance;
white-space: normal;
}
</style>
-<div id="white-space-after-text-wrap"></div>
+<div id="white-space-after-text-wrap-balance"></div>
<script>
test(() => {
- const target = document.getElementById('white-space-after-text-wrap');
- assert_equals(getComputedStyle(target).textWrap, 'wrap');
-}, "`white-space` should overwrite previous `text-wrap`");
+ const target = document.getElementById('white-space-after-text-wrap-balance');
+ assert_equals(getComputedStyle(target).textWrap, 'balance');
+}, "`white-space` should not overwrite previous `text-wrap-style: balance`");
+</script>
+
+<style>
+#white-space-after-text-wrap-nowrap {
+ text-wrap: nowrap balance;
+ white-space: normal;
+}
+</style>
+<div id="white-space-after-text-wrap-nowrap"></div>
+<script>
+test(() => {
+ const target = document.getElementById('white-space-after-text-wrap-nowrap');
+ assert_equals(getComputedStyle(target).textWrap, 'balance');
+}, "`white-space` should overwrite previous `text-wrap-mode: nowrap`");
</script>
<style>
@@ -59,12 +73,12 @@
}, "`text-wrap` should not be affected by `white-space` on the parent");
</script>
-<div class="balance">
+<div style="text-wrap: balance nowrap;">
<div id="parent-text-wrap" class="normal"></div>
</div>
<script>
test(() => {
const target = document.getElementById('parent-text-wrap');
- assert_equals(getComputedStyle(target).textWrap, 'wrap');
-}, "`white-space` should overwrite `text-wrap` on the parent");
+ assert_equals(getComputedStyle(target).textWrap, 'balance');
+}, "`white-space` should overwrite `text-wrap-mode` on the parent");
</script>
diff --git a/css/css-text/parsing/white-space-shorthand.html b/css/css-text/parsing/white-space-shorthand.html
index 01c409a..9cd4bdb 100644
--- a/css/css-text/parsing/white-space-shorthand.html
+++ b/css/css-text/parsing/white-space-shorthand.html
@@ -40,7 +40,7 @@
test_valid_and_computed_value("white-space", "preserve-breaks nowrap", "preserve-breaks nowrap");
test_valid_and_computed_value("white-space", "nowrap preserve-breaks", "preserve-breaks nowrap");
-// Values not availabe through the shorthand.
+// Values not available through the shorthand.
test_invalid_value("white-space", "balance");
test_invalid_value("white-space", "collapse balance");
test_invalid_value("white-space", "balance collapse");
diff --git a/css/css-typed-om/the-stylepropertymap/properties/white-space.html b/css/css-typed-om/the-stylepropertymap/properties/white-space.html
index dfb6e08..87fb9ef 100644
--- a/css/css-typed-om/the-stylepropertymap/properties/white-space.html
+++ b/css/css-typed-om/the-stylepropertymap/properties/white-space.html
@@ -22,9 +22,13 @@
{ syntax: 'break-spaces' },
]);
-runPropertyTests('text-wrap', [
+runPropertyTests('text-wrap-mode', [
{ syntax: 'wrap'},
{ syntax: 'nowrap' },
+]);
+
+runPropertyTests('text-wrap-style', [
+ { syntax: 'auto' },
{ syntax: 'balance' },
{ syntax: 'stable' },
{ syntax: 'pretty' },
@@ -42,6 +46,6 @@
'discard-before discard-inner',
'discard-after discard-inner',
'discard-before discard-after discard-inner'
-])
+]);
</script>
