mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-06-09 09:34:57 +09:00
LibWeb: Implement text-wrap CSS property
This resolves an issue introduced in 94f5a51 with the
tab-size-text-wrap test
This commit is contained in:
Callum Law
Sam Atkins
parent
9ba74316d2
commit
50cce72ab9
Notes:
github-actions[bot]
2025-06-04 11:49:35 +00:00
Author: https://github.com/Calme1709
Commit: 50cce72ab9
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4943
Reviewed-by: https://github.com/AtkinsSJ ✅
12 changed files with 248 additions and 17 deletions
|
|
@ -2943,6 +2943,14 @@
|
|||
"text-transform"
|
||||
]
|
||||
},
|
||||
"text-wrap": {
|
||||
"inherited": true,
|
||||
"initial": "wrap",
|
||||
"longhands": [
|
||||
"text-wrap-mode",
|
||||
"text-wrap-style"
|
||||
]
|
||||
},
|
||||
"text-wrap-mode": {
|
||||
"animation-type": "discrete",
|
||||
"inherited": true,
|
||||
|
|
|
|||
|
|
@ -432,7 +432,7 @@ bool pseudo_element_supports_property(PseudoElement pseudo_element, PropertyID p
|
|||
// FIXME: text-spacing
|
||||
// FIXME: text-spacing-trim
|
||||
append_property("text-transform"sv);
|
||||
// FIXME: text-wrap
|
||||
append_property("text-wrap"sv);
|
||||
append_property("text-wrap-mode"sv);
|
||||
append_property("text-wrap-style"sv);
|
||||
append_property("white-space"sv);
|
||||
|
|
|
|||
|
|
@ -1,33 +1,33 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x31 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x15 children: not-inline
|
||||
BlockContainer <div> at (8,8) content-size 100x15 children: inline
|
||||
BlockContainer <html> at (0,0) content-size 800x61 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x45 children: not-inline
|
||||
BlockContainer <div> at (8,8) content-size 100x45 children: inline
|
||||
frag 0 from BlockContainer start: 0, length: 0, rect: [8,8 111.59375x15] baseline: 11.390625
|
||||
frag 1 from BlockContainer start: 0, length: 0, rect: [119.59375,8 119.1875x15] baseline: 11.390625
|
||||
frag 2 from BlockContainer start: 0, length: 0, rect: [238.78125,8 127.5625x15] baseline: 11.390625
|
||||
frag 1 from BlockContainer start: 0, length: 0, rect: [8,23 119.1875x15] baseline: 11.390625
|
||||
frag 2 from BlockContainer start: 0, length: 0, rect: [8,38 127.5625x15] baseline: 11.390625
|
||||
BlockContainer <span> at (8,8) content-size 111.59375x15 inline-block [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 2, rect: [8,8 111.59375x15] baseline: 11.390625
|
||||
" A"
|
||||
TextNode <#text>
|
||||
BlockContainer <span> at (119.59375,8) content-size 119.1875x15 inline-block [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 3, rect: [119.59375,8 119.1875x15] baseline: 11.390625
|
||||
BlockContainer <span> at (8,23) content-size 119.1875x15 inline-block [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 3, rect: [8,23 119.1875x15] baseline: 11.390625
|
||||
" AB"
|
||||
TextNode <#text>
|
||||
BlockContainer <span> at (238.78125,8) content-size 127.5625x15 inline-block [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 4, rect: [238.78125,8 127.5625x15] baseline: 11.390625
|
||||
BlockContainer <span> at (8,38) content-size 127.5625x15 inline-block [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 4, rect: [8,38 127.5625x15] baseline: 11.390625
|
||||
" ABC"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,23) content-size 784x0 children: inline
|
||||
BlockContainer <(anonymous)> at (8,53) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x31]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x15]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,8 100x15] overflow: [8,8 358.34375x15]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x61]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x45]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,8 100x45] overflow: [8,8 127.5625x45]
|
||||
PaintableWithLines (BlockContainer<SPAN>) [8,8 111.59375x15]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<SPAN>) [119.59375,8 119.1875x15]
|
||||
PaintableWithLines (BlockContainer<SPAN>) [8,23 119.1875x15]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<SPAN>) [238.78125,8 127.5625x15]
|
||||
PaintableWithLines (BlockContainer<SPAN>) [8,38 127.5625x15]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,23 784x0]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,53 784x0]
|
||||
|
|
|
|||
|
|
@ -617,6 +617,8 @@ All supported properties and their default values exposed from CSSStylePropertie
|
|||
'text-shadow': 'none'
|
||||
'textTransform': 'none'
|
||||
'text-transform': 'none'
|
||||
'textWrap': 'wrap'
|
||||
'text-wrap': 'wrap'
|
||||
'textWrapMode': 'wrap'
|
||||
'text-wrap-mode': 'wrap'
|
||||
'textWrapStyle': 'auto'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 17 tests
|
||||
|
||||
17 Pass
|
||||
Pass Property text-wrap value 'wrap'
|
||||
Pass Property text-wrap value 'nowrap'
|
||||
Pass Property text-wrap value 'auto'
|
||||
Pass Property text-wrap value 'balance'
|
||||
Pass Property text-wrap value 'stable'
|
||||
Pass Property text-wrap value 'wrap auto'
|
||||
Pass Property text-wrap value 'wrap balance'
|
||||
Pass Property text-wrap value 'wrap stable'
|
||||
Pass Property text-wrap value 'auto wrap'
|
||||
Pass Property text-wrap value 'balance wrap'
|
||||
Pass Property text-wrap value 'stable wrap'
|
||||
Pass Property text-wrap value 'nowrap auto'
|
||||
Pass Property text-wrap value 'nowrap balance'
|
||||
Pass Property text-wrap value 'nowrap stable'
|
||||
Pass Property text-wrap value 'auto nowrap'
|
||||
Pass Property text-wrap value 'balance nowrap'
|
||||
Pass Property text-wrap value 'stable nowrap'
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 8 tests
|
||||
|
||||
8 Pass
|
||||
Pass e.style['text-wrap'] = "normal" should not set the property value
|
||||
Pass e.style['text-wrap'] = "none" should not set the property value
|
||||
Pass e.style['text-wrap'] = "wrap nowrap" should not set the property value
|
||||
Pass e.style['text-wrap'] = "pretty balance" should not set the property value
|
||||
Pass e.style['text-wrap'] = "balance stable" should not set the property value
|
||||
Pass e.style['text-wrap'] = "stable pretty" should not set the property value
|
||||
Pass e.style['text-wrap'] = "delicious wrap" should not set the property value
|
||||
Pass e.style['text-wrap'] = "5px" should not set the property value
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 14 tests
|
||||
|
||||
14 Pass
|
||||
Pass e.style['text-wrap'] = "pretty" should set the property value
|
||||
Pass e.style['text-wrap'] = "wrap pretty" should set the property value
|
||||
Pass e.style['text-wrap'] = "pretty wrap" should set the property value
|
||||
Pass e.style['text-wrap'] = "stable wrap" should set the property value
|
||||
Pass e.style['text-wrap'] = "nowrap pretty" should set the property value
|
||||
Pass e.style['text-wrap'] = "pretty nowrap" should set the property value
|
||||
Pass e.style['text-wrap-style'] = "pretty" should set the property value
|
||||
Pass Property text-wrap value 'pretty'
|
||||
Pass Property text-wrap value 'wrap pretty'
|
||||
Pass Property text-wrap value 'pretty wrap'
|
||||
Pass Property text-wrap value 'stable wrap'
|
||||
Pass Property text-wrap value 'nowrap pretty'
|
||||
Pass Property text-wrap value 'pretty nowrap'
|
||||
Pass Property text-wrap-style value 'pretty'
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 22 tests
|
||||
|
||||
22 Pass
|
||||
Pass e.style['text-wrap'] = "wrap" should set the property value
|
||||
Pass e.style['text-wrap'] = "nowrap" should set the property value
|
||||
Pass e.style['text-wrap'] = "auto" should set the property value
|
||||
Pass e.style['text-wrap'] = "balance" should set the property value
|
||||
Pass e.style['text-wrap'] = "stable" should set the property value
|
||||
Pass e.style['text-wrap'] = "wrap auto" should set the property value
|
||||
Pass e.style['text-wrap'] = "wrap balance" should set the property value
|
||||
Pass e.style['text-wrap'] = "wrap stable" should set the property value
|
||||
Pass e.style['text-wrap'] = "auto wrap" should set the property value
|
||||
Pass e.style['text-wrap'] = "balance wrap" should set the property value
|
||||
Pass e.style['text-wrap'] = "stable wrap" should set the property value
|
||||
Pass e.style['text-wrap'] = "nowrap auto" should set the property value
|
||||
Pass e.style['text-wrap'] = "nowrap balance" should set the property value
|
||||
Pass e.style['text-wrap'] = "nowrap stable" should set the property value
|
||||
Pass e.style['text-wrap'] = "auto nowrap" should set the property value
|
||||
Pass e.style['text-wrap'] = "balance nowrap" should set the property value
|
||||
Pass e.style['text-wrap'] = "stable nowrap" should set the property value
|
||||
Pass e.style['text-wrap'] = "initial" should set the property value
|
||||
Pass e.style['text-wrap'] = "inherit" should set the property value
|
||||
Pass e.style['text-wrap'] = "unset" should set the property value
|
||||
Pass e.style['text-wrap'] = "revert" should set the property value
|
||||
Pass e.style['text-wrap'] = "revert-layer" should set the property value
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text: getComputedStyle().textWrap</title>
|
||||
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap">
|
||||
<meta name="assert" content="text-wrap computed value is '<text-wrap-mode> || <text-wrap-style>'.">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("text-wrap", "wrap");
|
||||
test_computed_value("text-wrap", "nowrap");
|
||||
|
||||
test_computed_value("text-wrap", "auto", "wrap");
|
||||
test_computed_value("text-wrap", "balance");
|
||||
test_computed_value("text-wrap", "stable");
|
||||
|
||||
test_computed_value("text-wrap", "wrap auto", "wrap");
|
||||
test_computed_value("text-wrap", "wrap balance", "balance");
|
||||
test_computed_value("text-wrap", "wrap stable", "stable");
|
||||
test_computed_value("text-wrap", "auto wrap", "wrap");
|
||||
test_computed_value("text-wrap", "balance wrap", "balance");
|
||||
test_computed_value("text-wrap", "stable wrap", "stable");
|
||||
|
||||
test_computed_value("text-wrap", "nowrap auto", "nowrap");
|
||||
test_computed_value("text-wrap", "nowrap balance");
|
||||
test_computed_value("text-wrap", "nowrap stable");
|
||||
test_computed_value("text-wrap", "auto nowrap", "nowrap");
|
||||
test_computed_value("text-wrap", "balance nowrap", "nowrap balance");
|
||||
test_computed_value("text-wrap", "stable nowrap", "nowrap stable");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Module Test: parsing text-wrap with invalid values</title>
|
||||
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap">
|
||||
<meta name="assert" content="text-wrap supports only the grammar '<text-wrap-mode> || <text-wrap-style>'.">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_invalid_value("text-wrap", "normal");
|
||||
test_invalid_value("text-wrap", "none");
|
||||
test_invalid_value("text-wrap", "wrap nowrap");
|
||||
test_invalid_value("text-wrap", "pretty balance");
|
||||
test_invalid_value("text-wrap", "balance stable");
|
||||
test_invalid_value("text-wrap", "stable pretty");
|
||||
test_invalid_value("text-wrap", "delicious wrap");
|
||||
test_invalid_value("text-wrap", "5px");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Module Test: text-wrap: pretty parsing</title>
|
||||
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap">
|
||||
<meta name="assert" content="text-wrap: pretty parsing">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/parsing-testcommon.js"></script>
|
||||
<script src="../../../css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_valid_value("text-wrap", "pretty");
|
||||
test_valid_value("text-wrap", "wrap pretty", "pretty");
|
||||
test_valid_value("text-wrap", "pretty wrap", "pretty");
|
||||
test_valid_value("text-wrap", "stable wrap", "stable");
|
||||
test_valid_value("text-wrap", "nowrap pretty");
|
||||
test_valid_value("text-wrap", "pretty nowrap", "nowrap pretty");
|
||||
test_valid_value("text-wrap-style", "pretty");
|
||||
|
||||
test_computed_value("text-wrap", "pretty");
|
||||
test_computed_value("text-wrap", "wrap pretty", "pretty");
|
||||
test_computed_value("text-wrap", "pretty wrap", "pretty");
|
||||
test_computed_value("text-wrap", "stable wrap", "stable");
|
||||
test_computed_value("text-wrap", "nowrap pretty");
|
||||
test_computed_value("text-wrap", "pretty nowrap", "nowrap pretty");
|
||||
test_computed_value("text-wrap-style", "pretty");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Module Test: parsing text-wrap with valid values</title>
|
||||
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap">
|
||||
<meta name="assert" content="text-wrap supports the full grammar '<text-wrap-mode> || <text-wrap-style>'.">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_valid_value("text-wrap", "wrap");
|
||||
test_valid_value("text-wrap", "nowrap");
|
||||
|
||||
test_valid_value("text-wrap", "auto", "wrap");
|
||||
test_valid_value("text-wrap", "balance");
|
||||
test_valid_value("text-wrap", "stable");
|
||||
|
||||
test_valid_value("text-wrap", "wrap auto", "wrap");
|
||||
test_valid_value("text-wrap", "wrap balance", "balance");
|
||||
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", "stable wrap", "stable");
|
||||
|
||||
test_valid_value("text-wrap", "nowrap auto", "nowrap");
|
||||
test_valid_value("text-wrap", "nowrap balance");
|
||||
test_valid_value("text-wrap", "nowrap stable");
|
||||
test_valid_value("text-wrap", "auto nowrap", "nowrap");
|
||||
test_valid_value("text-wrap", "balance nowrap", "nowrap balance");
|
||||
test_valid_value("text-wrap", "stable nowrap", "nowrap stable");
|
||||
|
||||
test_valid_value("text-wrap", "initial");
|
||||
test_valid_value("text-wrap", "inherit");
|
||||
test_valid_value("text-wrap", "unset");
|
||||
test_valid_value("text-wrap", "revert");
|
||||
test_valid_value("text-wrap", "revert-layer");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue