LibWeb: Parse orphans CSS property

This commit is contained in:
Callum Law 2025-09-27 02:43:23 +12:00 committed by Sam Atkins
parent 937f598de5
commit 3d85532752
14 changed files with 320 additions and 8 deletions

View File

@ -2724,6 +2724,15 @@
"integer [-∞,∞]"
]
},
"orphans": {
"animation-type": "by-computed-value",
"inherited": true,
"initial": "2",
"valid-types": [
"integer [1,∞]"
],
"__comment": "FIXME: We don't implement this property any further than compute time"
},
"outline": {
"affects-layout": false,
"inherited": false,

View File

@ -41,6 +41,7 @@ All properties associated with getComputedStyle(document.body):
"math-depth",
"math-shift",
"math-style",
"orphans",
"paint-order",
"pointer-events",
"quotes",

View File

@ -579,6 +579,7 @@ All supported properties and their default values exposed from CSSStylePropertie
'object-position': '50% 50%'
'opacity': '1'
'order': '0'
'orphans': '2'
'outline': 'rgb(0, 0, 0) 0px'
'outlineColor': 'rgb(0, 0, 0)'
'outline-color': 'rgb(0, 0, 0)'

View File

@ -39,6 +39,7 @@ list-style-type: disc
math-depth: 0
math-shift: normal
math-style: normal
orphans: 2
paint-order: normal
pointer-events: auto
quotes: auto
@ -95,7 +96,7 @@ background-position-x: 0%
background-position-y: 0%
background-repeat: repeat
background-size: auto
block-size: 1455px
block-size: 1470px
border-block-end-color: rgb(0, 0, 0)
border-block-end-style: none
border-block-end-width: 0px
@ -172,7 +173,7 @@ grid-row-start: auto
grid-template-areas: none
grid-template-columns: none
grid-template-rows: none
height: 2610px
height: 2625px
inline-size: 784px
inset-block-end: auto
inset-block-start: auto

View File

@ -0,0 +1,125 @@
Harness status: OK
Found 120 tests
120 Pass
Pass CSS Transitions: property <orphans> from neutral to [20] at (-0.5) should be [5]
Pass CSS Transitions: property <orphans> from neutral to [20] at (0) should be [10]
Pass CSS Transitions: property <orphans> from neutral to [20] at (0.3) should be [13]
Pass CSS Transitions: property <orphans> from neutral to [20] at (0.7) should be [17]
Pass CSS Transitions: property <orphans> from neutral to [20] at (1) should be [20]
Pass CSS Transitions: property <orphans> from neutral to [20] at (1.5) should be [25]
Pass CSS Transitions with transition: all: property <orphans> from neutral to [20] at (-0.5) should be [5]
Pass CSS Transitions with transition: all: property <orphans> from neutral to [20] at (0) should be [10]
Pass CSS Transitions with transition: all: property <orphans> from neutral to [20] at (0.3) should be [13]
Pass CSS Transitions with transition: all: property <orphans> from neutral to [20] at (0.7) should be [17]
Pass CSS Transitions with transition: all: property <orphans> from neutral to [20] at (1) should be [20]
Pass CSS Transitions with transition: all: property <orphans> from neutral to [20] at (1.5) should be [25]
Pass CSS Animations: property <orphans> from neutral to [20] at (-0.5) should be [5]
Pass CSS Animations: property <orphans> from neutral to [20] at (0) should be [10]
Pass CSS Animations: property <orphans> from neutral to [20] at (0.3) should be [13]
Pass CSS Animations: property <orphans> from neutral to [20] at (0.7) should be [17]
Pass CSS Animations: property <orphans> from neutral to [20] at (1) should be [20]
Pass CSS Animations: property <orphans> from neutral to [20] at (1.5) should be [25]
Pass Web Animations: property <orphans> from neutral to [20] at (-0.5) should be [5]
Pass Web Animations: property <orphans> from neutral to [20] at (0) should be [10]
Pass Web Animations: property <orphans> from neutral to [20] at (0.3) should be [13]
Pass Web Animations: property <orphans> from neutral to [20] at (0.7) should be [17]
Pass Web Animations: property <orphans> from neutral to [20] at (1) should be [20]
Pass Web Animations: property <orphans> from neutral to [20] at (1.5) should be [25]
Pass CSS Transitions: property <orphans> from [initial] to [20] at (-0.5) should be [1]
Pass CSS Transitions: property <orphans> from [initial] to [20] at (0) should be [2]
Pass CSS Transitions: property <orphans> from [initial] to [20] at (0.3) should be [7]
Pass CSS Transitions: property <orphans> from [initial] to [20] at (0.7) should be [15]
Pass CSS Transitions: property <orphans> from [initial] to [20] at (1) should be [20]
Pass CSS Transitions: property <orphans> from [initial] to [20] at (1.5) should be [29]
Pass CSS Transitions with transition: all: property <orphans> from [initial] to [20] at (-0.5) should be [1]
Pass CSS Transitions with transition: all: property <orphans> from [initial] to [20] at (0) should be [2]
Pass CSS Transitions with transition: all: property <orphans> from [initial] to [20] at (0.3) should be [7]
Pass CSS Transitions with transition: all: property <orphans> from [initial] to [20] at (0.7) should be [15]
Pass CSS Transitions with transition: all: property <orphans> from [initial] to [20] at (1) should be [20]
Pass CSS Transitions with transition: all: property <orphans> from [initial] to [20] at (1.5) should be [29]
Pass CSS Animations: property <orphans> from [initial] to [20] at (-0.5) should be [1]
Pass CSS Animations: property <orphans> from [initial] to [20] at (0) should be [2]
Pass CSS Animations: property <orphans> from [initial] to [20] at (0.3) should be [7]
Pass CSS Animations: property <orphans> from [initial] to [20] at (0.7) should be [15]
Pass CSS Animations: property <orphans> from [initial] to [20] at (1) should be [20]
Pass CSS Animations: property <orphans> from [initial] to [20] at (1.5) should be [29]
Pass Web Animations: property <orphans> from [initial] to [20] at (-0.5) should be [1]
Pass Web Animations: property <orphans> from [initial] to [20] at (0) should be [2]
Pass Web Animations: property <orphans> from [initial] to [20] at (0.3) should be [7]
Pass Web Animations: property <orphans> from [initial] to [20] at (0.7) should be [15]
Pass Web Animations: property <orphans> from [initial] to [20] at (1) should be [20]
Pass Web Animations: property <orphans> from [initial] to [20] at (1.5) should be [29]
Pass CSS Transitions: property <orphans> from [inherit] to [20] at (-0.5) should be [35]
Pass CSS Transitions: property <orphans> from [inherit] to [20] at (0) should be [30]
Pass CSS Transitions: property <orphans> from [inherit] to [20] at (0.3) should be [27]
Pass CSS Transitions: property <orphans> from [inherit] to [20] at (0.7) should be [23]
Pass CSS Transitions: property <orphans> from [inherit] to [20] at (1) should be [20]
Pass CSS Transitions: property <orphans> from [inherit] to [20] at (1.5) should be [15]
Pass CSS Transitions with transition: all: property <orphans> from [inherit] to [20] at (-0.5) should be [35]
Pass CSS Transitions with transition: all: property <orphans> from [inherit] to [20] at (0) should be [30]
Pass CSS Transitions with transition: all: property <orphans> from [inherit] to [20] at (0.3) should be [27]
Pass CSS Transitions with transition: all: property <orphans> from [inherit] to [20] at (0.7) should be [23]
Pass CSS Transitions with transition: all: property <orphans> from [inherit] to [20] at (1) should be [20]
Pass CSS Transitions with transition: all: property <orphans> from [inherit] to [20] at (1.5) should be [15]
Pass CSS Animations: property <orphans> from [inherit] to [20] at (-0.5) should be [35]
Pass CSS Animations: property <orphans> from [inherit] to [20] at (0) should be [30]
Pass CSS Animations: property <orphans> from [inherit] to [20] at (0.3) should be [27]
Pass CSS Animations: property <orphans> from [inherit] to [20] at (0.7) should be [23]
Pass CSS Animations: property <orphans> from [inherit] to [20] at (1) should be [20]
Pass CSS Animations: property <orphans> from [inherit] to [20] at (1.5) should be [15]
Pass Web Animations: property <orphans> from [inherit] to [20] at (-0.5) should be [35]
Pass Web Animations: property <orphans> from [inherit] to [20] at (0) should be [30]
Pass Web Animations: property <orphans> from [inherit] to [20] at (0.3) should be [27]
Pass Web Animations: property <orphans> from [inherit] to [20] at (0.7) should be [23]
Pass Web Animations: property <orphans> from [inherit] to [20] at (1) should be [20]
Pass Web Animations: property <orphans> from [inherit] to [20] at (1.5) should be [15]
Pass CSS Transitions: property <orphans> from [unset] to [20] at (-0.5) should be [35]
Pass CSS Transitions: property <orphans> from [unset] to [20] at (0) should be [30]
Pass CSS Transitions: property <orphans> from [unset] to [20] at (0.3) should be [27]
Pass CSS Transitions: property <orphans> from [unset] to [20] at (0.7) should be [23]
Pass CSS Transitions: property <orphans> from [unset] to [20] at (1) should be [20]
Pass CSS Transitions: property <orphans> from [unset] to [20] at (1.5) should be [15]
Pass CSS Transitions with transition: all: property <orphans> from [unset] to [20] at (-0.5) should be [35]
Pass CSS Transitions with transition: all: property <orphans> from [unset] to [20] at (0) should be [30]
Pass CSS Transitions with transition: all: property <orphans> from [unset] to [20] at (0.3) should be [27]
Pass CSS Transitions with transition: all: property <orphans> from [unset] to [20] at (0.7) should be [23]
Pass CSS Transitions with transition: all: property <orphans> from [unset] to [20] at (1) should be [20]
Pass CSS Transitions with transition: all: property <orphans> from [unset] to [20] at (1.5) should be [15]
Pass CSS Animations: property <orphans> from [unset] to [20] at (-0.5) should be [35]
Pass CSS Animations: property <orphans> from [unset] to [20] at (0) should be [30]
Pass CSS Animations: property <orphans> from [unset] to [20] at (0.3) should be [27]
Pass CSS Animations: property <orphans> from [unset] to [20] at (0.7) should be [23]
Pass CSS Animations: property <orphans> from [unset] to [20] at (1) should be [20]
Pass CSS Animations: property <orphans> from [unset] to [20] at (1.5) should be [15]
Pass Web Animations: property <orphans> from [unset] to [20] at (-0.5) should be [35]
Pass Web Animations: property <orphans> from [unset] to [20] at (0) should be [30]
Pass Web Animations: property <orphans> from [unset] to [20] at (0.3) should be [27]
Pass Web Animations: property <orphans> from [unset] to [20] at (0.7) should be [23]
Pass Web Animations: property <orphans> from [unset] to [20] at (1) should be [20]
Pass Web Animations: property <orphans> from [unset] to [20] at (1.5) should be [15]
Pass CSS Transitions: property <orphans> from [10] to [1] at (-0.5) should be [15]
Pass CSS Transitions: property <orphans> from [10] to [1] at (0) should be [10]
Pass CSS Transitions: property <orphans> from [10] to [1] at (0.3) should be [7]
Pass CSS Transitions: property <orphans> from [10] to [1] at (0.7) should be [4]
Pass CSS Transitions: property <orphans> from [10] to [1] at (1) should be [1]
Pass CSS Transitions: property <orphans> from [10] to [1] at (1.5) should be [1]
Pass CSS Transitions with transition: all: property <orphans> from [10] to [1] at (-0.5) should be [15]
Pass CSS Transitions with transition: all: property <orphans> from [10] to [1] at (0) should be [10]
Pass CSS Transitions with transition: all: property <orphans> from [10] to [1] at (0.3) should be [7]
Pass CSS Transitions with transition: all: property <orphans> from [10] to [1] at (0.7) should be [4]
Pass CSS Transitions with transition: all: property <orphans> from [10] to [1] at (1) should be [1]
Pass CSS Transitions with transition: all: property <orphans> from [10] to [1] at (1.5) should be [1]
Pass CSS Animations: property <orphans> from [10] to [1] at (-0.5) should be [15]
Pass CSS Animations: property <orphans> from [10] to [1] at (0) should be [10]
Pass CSS Animations: property <orphans> from [10] to [1] at (0.3) should be [7]
Pass CSS Animations: property <orphans> from [10] to [1] at (0.7) should be [4]
Pass CSS Animations: property <orphans> from [10] to [1] at (1) should be [1]
Pass CSS Animations: property <orphans> from [10] to [1] at (1.5) should be [1]
Pass Web Animations: property <orphans> from [10] to [1] at (-0.5) should be [15]
Pass Web Animations: property <orphans> from [10] to [1] at (0) should be [10]
Pass Web Animations: property <orphans> from [10] to [1] at (0.3) should be [7]
Pass Web Animations: property <orphans> from [10] to [1] at (0.7) should be [4]
Pass Web Animations: property <orphans> from [10] to [1] at (1) should be [1]
Pass Web Animations: property <orphans> from [10] to [1] at (1.5) should be [1]

View File

@ -0,0 +1,8 @@
Harness status: OK
Found 3 tests
3 Pass
Pass Property orphans value '1'
Pass Property orphans value '234'
Pass Property orphans value 'calc(1 + 234)'

View File

@ -0,0 +1,10 @@
Harness status: OK
Found 5 tests
5 Pass
Pass e.style['orphans'] = "auto" should not set the property value
Pass e.style['orphans'] = "1 234" should not set the property value
Pass e.style['orphans'] = "-234" should not set the property value
Pass e.style['orphans'] = "-1" should not set the property value
Pass e.style['orphans'] = "0" should not set the property value

View File

@ -0,0 +1,7 @@
Harness status: OK
Found 2 tests
2 Pass
Pass e.style['orphans'] = "1" should set the property value
Pass e.style['orphans'] = "234" should set the property value

View File

@ -1,8 +1,8 @@
Harness status: OK
Found 263 tests
Found 264 tests
257 Pass
258 Pass
6 Fail
Pass accent-color
Pass border-collapse
@ -43,6 +43,7 @@ Pass list-style-type
Pass math-depth
Pass math-shift
Pass math-style
Pass orphans
Pass paint-order
Pass pointer-events
Pass quotes

View File

@ -2,8 +2,8 @@ Harness status: OK
Found 687 tests
661 Pass
26 Fail
663 Pass
24 Fail
Pass background-attachment: scroll
Pass background-attachment: fixed
Pass background-attachment: inherit
@ -531,8 +531,8 @@ Pass min-width: .1em
Pass min-width: 5%
Pass min-width: .5%
Pass min-width: inherit
Fail orphans: 101
Fail orphans: inherit
Pass orphans: 101
Pass orphans: inherit
Pass outline-color: black
Pass outline-color: red
Pass outline-color: rgb(50, 75, 100)

View File

@ -0,0 +1,88 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>orphans interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-break-3/#widows-orphans">
<meta name="assert" content="orphans supports animation by computed value type">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/interpolation-testcommon.js"></script>
<style>
.parent {
orphans: 30;
}
.target {
orphans: 10;
}
</style>
<body></body>
<script>
test_interpolation({
property: 'orphans',
from: neutralKeyframe,
to: '20',
}, [
{at: -0.5, expect: '5'},
{at: 0, expect: '10'},
{at: 0.3, expect: '13'},
{at: 0.7, expect: '17'},
{at: 1, expect: '20'},
{at: 1.5, expect: '25'},
]);
test_interpolation({
property: 'orphans',
from: 'initial',
to: '20',
}, [
{at: -0.5, expect: '1'},
{at: 0, expect: '2'},
{at: 0.3, expect: '7'},
{at: 0.7, expect: '15'},
{at: 1, expect: '20'},
{at: 1.5, expect: '29'},
]);
test_interpolation({
property: 'orphans',
from: 'inherit',
to: '20',
}, [
{at: -0.5, expect: '35'},
{at: 0, expect: '30'},
{at: 0.3, expect: '27'},
{at: 0.7, expect: '23'},
{at: 1, expect: '20'},
{at: 1.5, expect: '15'},
]);
test_interpolation({
property: 'orphans',
from: 'unset',
to: '20',
}, [
{at: -0.5, expect: '35'},
{at: 0, expect: '30'},
{at: 0.3, expect: '27'},
{at: 0.7, expect: '23'},
{at: 1, expect: '20'},
{at: 1.5, expect: '15'},
]);
test_interpolation({
property: 'orphans',
from: '10',
to: '1'
}, [
{at: -0.5, expect: '15'},
{at: 0, expect: '10'},
{at: 0.3, expect: '7'},
{at: 0.7, expect: '4'},
// Only positive integers are valid
{at: 1, expect: '1'},
{at: 1.5, expect: '1'}
]);
</script>

View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: getComputedStyle().orphans</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-orphans">
<meta name="assert" content="orphans computed value is specified integer.">
<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("orphans", "1");
test_computed_value("orphans", "234");
test_computed_value("orphans", "calc(1 + 234)", "235");
</script>
</body>
</html>

View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing orphans with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-orphans">
<meta name="assert" content="orphans supports only the grammar '<integer>'.">
<meta name="assert" content="Negative values and zero are invalid.">
<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("orphans", "auto");
test_invalid_value("orphans", "1 234");
test_invalid_value("orphans", "-234");
test_invalid_value("orphans", "-1");
test_invalid_value("orphans", "0");
</script>
</body>
</html>

View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing orphans with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-orphans">
<meta name="assert" content="orphans supports the full grammar '<integer>'.">
<meta name="assert" content="Negative values and zero are invalid.">
<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("orphans", "1");
test_valid_value("orphans", "234");
</script>
</body>
</html>