mirror of
https://github.com/servo/servo.git
synced 2025-08-09 07:25:35 +01:00
layout: Add line height from preserved segment breaks in quirks mode (#31419)
In quirks mode, preserved segment breaks should add line height to lines. This matches the behavior of WebKit and Blink, but not Gecko. This also handles the special-case of `<br>` elements, which are implemented with preserved segment breaks via `white-space: pre-line`. This is an implementation detail though because `<br>` has a special behavior if the line isn't empty -- it doesn't add any line height in this case.
This commit is contained in:
parent
a9a7e8a5cf
commit
e5598590ba
12 changed files with 158 additions and 10 deletions
|
@ -0,0 +1,2 @@
|
|||
[line-height-preserved-segment-break.html]
|
||||
expected: FAIL
|
|
@ -340751,6 +340751,19 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"line-height-preserved-segment-break.html": [
|
||||
"8ad2651f4b999091996682be72745e31e0ce559a",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/css/reference/ref-filled-green-100px-square.xht",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"line-height-quirks-mode.html": [
|
||||
"9e9baf62226dfccc15f81b6d22edb87a29e2d313",
|
||||
[
|
||||
|
|
|
@ -0,0 +1,2 @@
|
|||
[quirks-mode-br-line-height.html]
|
||||
expected: FAIL
|
|
@ -5402,6 +5402,19 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"quirks-mode-br-line-height.html": [
|
||||
"ecb49833f809e72cd57772e7a98085e787cb8baa",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/quirks-mode-br-line-height-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"quotes_none_a.html": [
|
||||
"c37ff23e9084d7d198b3c97e14d2e00ab417dd6c",
|
||||
[
|
||||
|
@ -9673,6 +9686,10 @@
|
|||
"0195f154cf3c4303e5aaf4fc9e7cfa358b8386d7",
|
||||
[]
|
||||
],
|
||||
"quirks-mode-br-line-height-ref.html": [
|
||||
"2108a4ae5e1f823cf2a3923070d54c42487fd8c6",
|
||||
[]
|
||||
],
|
||||
"quotes_none_ref.html": [
|
||||
"85f3cf14ca2da71a45efd75803e84e7b5dc23a85",
|
||||
[]
|
||||
|
|
|
@ -0,0 +1,17 @@
|
|||
<link rel="author" href="mrobinson@igalia.com">
|
||||
<style>
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: green;
|
||||
color: transparent;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div style="width: 100px; border: solid; line-height: 50px;">
|
||||
<span></span><br>
|
||||
<span style="background: transparent; color: transparent;">A</span>
|
||||
<span></span>
|
||||
</div>
|
||||
</body>
|
35
tests/wpt/mozilla/tests/css/quirks-mode-br-line-height.html
Normal file
35
tests/wpt/mozilla/tests/css/quirks-mode-br-line-height.html
Normal file
|
@ -0,0 +1,35 @@
|
|||
<!-- quirks mode -->
|
||||
<link rel="match" href="quirks-mode-br-line-height-ref.html">
|
||||
<link rel="author" href="mrobinson@igalia.com">
|
||||
<!--
|
||||
Normally in quirks, only text and uncollapsible white space in inline boxes
|
||||
adds the inline box line height to the line. A forced line break is a kind of
|
||||
uncollapsible white space, so it should add line height to the line box.
|
||||
|
||||
We implement <br> in Servo with `white-space: pre-line`, but <br> doesn't act
|
||||
like a preserved line break. It only adds its line height to the line if its
|
||||
on an empty line.
|
||||
|
||||
This behavior doesn't seem to be specified, so is part of the "magic" behavior
|
||||
of <br> elements.
|
||||
-->
|
||||
<style>
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: green;
|
||||
color: transparent;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div style="width: 100px; border: solid; line-height: 50px;">
|
||||
<span>A</span>
|
||||
<!-- The first <br> ends the line and the second <br> adds 50px
|
||||
of block size, because it inherits `line-height` from the
|
||||
parent <div> -->
|
||||
<br>
|
||||
<br>
|
||||
<span>A</span>
|
||||
</div>
|
||||
</body>
|
|
@ -0,0 +1,24 @@
|
|||
<!-- quirks mode -->
|
||||
<link rel="author" title="Martin Robinson" href="mrobinson@igalia.com">
|
||||
<link rel="help" href="https://quirks.spec.whatwg.org/#the-line-height-calculation-quirk">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text/#valdef-white-space-pre-line">
|
||||
<link rel="match" href="../css/reference/ref-filled-green-100px-square.xht">
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
background: green;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.inline-box {
|
||||
line-height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div style="width: 100px; height: 100px; background: red;">
|
||||
<!-- The preserved segment break in the span should mean that "The line height calculation
|
||||
quirk" does not apply. -->
|
||||
<div class="container"><span class="inline-box">
</span></div>
|
||||
</div>
|
Loading…
Add table
Add a link
Reference in a new issue