search

servo / servo

Servo, the embeddable, independent, memory-safe, modular, parallel web rendering engine
https://servo.org
Mozilla Public License 2.0
28.46k stars 3.03k forks source link

Alignment should affect size of absolutely positioned element #34248

Open Loirooriol opened 6 hours ago

Loirooriol commented 6 hours ago 
<!DOCTYPE html>
<style>
.wrapper { display: inline-block; position: relative; width: 100px; height: 100px; border: 3px solid; }
.abspos { position: absolute; inset: 0; width: auto; height: auto; background: cyan; }
.abspos::before { content: ""; display: block; width: 50px; height: 50px; }
</style>
<div class="wrapper"><div class="abspos" style="place-self: normal"></div></div>
<div class="wrapper"><div class="abspos" style="place-self: stretch"></div></div>
<div class="wrapper"><div class="abspos" style="place-self: center"></div></div>
<br>
<div class="wrapper"><canvas width="50" height="50" class="abspos" style="place-self: normal"></canvas></div>
<div class="wrapper"><canvas width="50" height="50" class="abspos" style="place-self: stretch"></canvas></div>
<div class="wrapper"><canvas width="50" height="50" class="abspos" style="place-self: center"></canvas></div>
Servo (bad) Blink (good)

The replaced and non-replaced cases can be addressed in different PRs.

The non-replaced case (1st row in testcase) seems simple, currently it always stretches because of https://github.com/servo/servo/blob/3fd1a229df65406699c5795cf504948cdb314320/components/layout_2020/positioned.rs#L849

It should use Size::FitContent when the alignment isn't normal or stretch.

taniishkaaa commented 6 hours ago

i'd like to try this!