Fix stretch sizes on replaced abspos (#34430)

We were sizing absolutely positioned replaced elements within their
actual containing block instead of the inset-modified containing block.
Then the `stretch` keyword would result in a wrong size.

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2024-12-05 21:45:20 +01:00 committed by GitHub
parent 54761b4f32
commit 5201c84fb4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 189 additions and 120 deletions

View file

@ -242884,6 +242884,32 @@
],
{}
]
],
"positioned-replaced-2.html": [
"9a991d236ef2ddd7b8df1d4bff43578e5e741a68",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square-only.html",
"=="
]
],
{}
]
],
"positioned-replaced-3.html": [
"c11fcfd9521fc212929524e63f02a4ea218052c2",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square-only.html",
"=="
]
],
{}
]
]
},
"svg-intrinsic-size-005.html": [

View file

@ -1,2 +0,0 @@
[positioned-replaced-1.html]
expected: FAIL

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<link rel="help" href="https://github.com/servo/servo/pull/34430">
<p>Test passes if there is a filled green square.</p>
<style>
canvas {
position: absolute;
background: green;
width: stretch;
height: stretch;
top: 50px;
left: 50px;
}
</style>
<div style="display: flow-root; position: relative; width: 150px; height: 150px; margin-top: -50px; margin-left: -50px;">
<canvas width="50" height="25"></canvas>
</div>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<link rel="help" href="https://github.com/servo/servo/pull/34430">
<p>Test passes if there is a filled green square.</p>
<style>
canvas {
position: absolute;
background: green;
width: stretch;
height: stretch;
inset: 50px;
}
</style>
<div style="display: flow-root; position: relative; width: 200px; height: 200px; margin-top: -50px; margin-left: -50px;">
<canvas width="50" height="25"></canvas>
</div>