Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-06 22:15:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

layout: Fix intrinsic contributions of anonymous blocks (#34719)

Browse source 
In order to compute the inline min-content and max-content contributions
of an anonymous block, we were finding its min-content and max-content
inline size with a SizeConstraint coming from the block size of the box.

However, anonymous blocks do not establish a containing block for their
contents, so this patch uses a SizeConstraint from the block size of the
containing block.

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2024-12-21 22:42:21 -08:00 • committed by GitHub
parent 1157fa28b3
commit 09408ae10b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 91 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

13
tests/wpt/meta/MANIFEST.json vendored
View file

@ -81587,6 +81587,19 @@
{}
]
],
"intrinsic-size-with-anonymous-block.html": [
"5ddcefbbe1d8e133a80a06e6fb6c3115e886bd89",
[
null,
[
[
"/css/CSS2/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"intrinsic-size-with-negative-margins.html": [
"93dfc3dfd770be960eec71bc00082a04e7385e97",
[

32
tests/wpt/tests/css/CSS2/normal-flow/intrinsic-size-with-anonymous-block.html vendored Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<title>Intrinsic size of an atomic inline with an anonymous block</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#inlineblock-width">
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#inline-replaced-width">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#anonymous-block-level">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
#test contains both inline-level contents (the canvas) and block-level (the <p>).
Then the canvas is wrapped inside an anonymous block, but it still resolves its percentage against #test.
So the canvas is 100px tall, and thus 100px wide because of its aspect ratio.
Therefore #test is 100px wide too.
">
<style>
#test {
display: inline-block;
height: 100px;
background: green;
}
#test > canvas {
height: 100%;
background: red;
position: relative;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="test">
<canvas width="10" height="10"></canvas>
<p></p>
</div>