Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-06-06 16:45:39 +00:00
Code Issues Projects Releases Packages Wiki Activity

Don't transfer indefinite height: stretch to inline axis (#34557)

Browse source 
Consider this testcase:
```html
<canvas style="aspect-ratio: 1; height: stretch; background: cyan"
        width="200" height="100"></canvas>
```

To compute the intrinsic inline sizes we were treating `height: stretch`
as the natural height (100px) and then transferring that to the inline
axis through the preferred aspect ratio. So the element was 100px wide.

However, an indefinite `stretch` should be treated as an automatic size,
which wouldn't be transferred to the inline axis.

The fix actually makes the code slightly simpler.

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2024-12-10 12:12:28 +01:00 • committed by GitHub
parent 2b8a8f7498
commit e10e989abb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 26 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

9
components/layout_2020/replaced.rs
View file

@ -532,18 +532,15 @@ impl ReplacedContents {
// Therefore, we tentatively treat intrinsic block sizing properties as their initial value.
let inline_content_size = LazyCell::new(|| {
let get_block_size = || {
let block_stretch_size = block_stretch_size.unwrap_or_else(get_block_fallback_size);
SizeConstraint::new(
box_size
.block
.maybe_resolve_extrinsic(Some(block_stretch_size)),
box_size.block.maybe_resolve_extrinsic(block_stretch_size),
min_box_size
.block
.maybe_resolve_extrinsic(Some(block_stretch_size))
.maybe_resolve_extrinsic(block_stretch_size)
.unwrap_or_default(),
max_box_size
.block
.maybe_resolve_extrinsic(Some(block_stretch_size)),
.maybe_resolve_extrinsic(block_stretch_size),
)
};
self.content_size(

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

@ -575775,7 +575775,7 @@
]
],
"keyword-sizes-on-replaced-element.html": [
"e26c1b7d6ac38858fd7a941a690ea01e6005c38c",
"8863ef491570c4d194bbb4b1d03a6e12367d4ff3",
[
null,
{}

30
tests/wpt/tests/css/css-sizing/keyword-sizes-on-replaced-element.html vendored
View file

@ -143,17 +143,17 @@
<!-- Definite stretch -->
<div style="width: 200px; height: 100px">
<canvas width="100" height="100" class="test width stretch"
data-expected-width="190" data-expected-height="190">X X</canvas>
data-expected-width="190" data-expected-height="190"></canvas>
<canvas width="100" height="100" class="test min-width stretch"
data-expected-width="190" data-expected-height="190">X X</canvas>
data-expected-width="190" data-expected-height="190"></canvas>
<canvas width="100" height="100" class="test max-width stretch"
data-expected-width="190" data-expected-height="190">X X</canvas>
data-expected-width="190" data-expected-height="190"></canvas>
<canvas width="100" height="100" class="test height stretch"
data-expected-width="90" data-expected-height="90">X X</canvas>
data-expected-width="90" data-expected-height="90"></canvas>
<canvas width="100" height="100" class="test min-height stretch"
data-expected-width="90" data-expected-height="90">X X</canvas>
data-expected-width="90" data-expected-height="90"></canvas>
<canvas width="100" height="100" class="test max-height stretch"
data-expected-width="90" data-expected-height="90">X X</canvas>
data-expected-width="90" data-expected-height="90"></canvas>
</div>
<!-- Stretch sizes can't result in a negative content size -->
@ -171,9 +171,23 @@
<canvas width="100" height="100" class="test height stretch indefinite"
data-expected-width="110" data-expected-height="110"></canvas>
<canvas width="100" height="100" class="test min-height stretch indefinite"
data-expected-width="110" data-expected-height="110"></canvas>
data-expected-width="10" data-expected-height="110"></canvas>
<canvas width="100" height="100" class="test max-height stretch indefinite"
data-expected-width="110" data-expected-height="110"></canvas>
data-expected-width="510" data-expected-height="110"></canvas>
<canvas width="100" height="100" class="test height stretch indefinite" style="max-width: 50px"
data-expected-width="60" data-expected-height="60"></canvas>
<canvas width="100" height="100" class="test min-height stretch indefinite" style="min-width: 50px"
data-expected-width="60" data-expected-height="110"></canvas>
<canvas width="100" height="100" class="test max-height stretch indefinite" style="max-width: 50px"
data-expected-width="60" data-expected-height="60"></canvas>
<canvas width="100" height="100" class="test height stretch indefinite" style="min-width: 150px"
data-expected-width="160" data-expected-height="160"></canvas>
<canvas width="100" height="100" class="test min-height stretch indefinite" style="min-width: 150px"
data-expected-width="160" data-expected-height="160"></canvas>
<canvas width="100" height="100" class="test max-height stretch indefinite" style="max-width: 150px"
data-expected-width="160" data-expected-height="110"></canvas>
</div>
<script src="/resources/testharness.js"></script>