Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

img inside float does not respect width #10464

Open
kaksmet opened this issue Apr 7, 2016 · 4 comments · May be fixed by #32103
Open

img inside float does not respect width #10464

kaksmet opened this issue Apr 7, 2016 · 4 comments · May be fixed by #32103
Labels
A-layout/floats C-has-manual-testcase C-reproduced
Projects
Useful layout issues

Comments

@kaksmet
Copy link
Contributor

kaksmet commented Apr 7, 2016

Affects: dn.se (swedish news site)

Test case:

<style type="text/css">
    .reduced-width {
        width: 100px;
    }
    .float-left {
        float: left;
    }
    img {
        width: 100%;
    }
</style>

<div class="reduced-width">
    <div class="float-left">
        <img src="https://raw.githubusercontent.com/servo/servo/master/tests/html/doge-servo.jpg" />
    </div>
</div>

Firefox:
firefox

Servo:
servo
@yodalee
Copy link
Contributor

yodalee commented May 3, 2016 •
edited

I trace this case a few hours, and found this lines of code may cause this problem.
https://github.com/servo/servo/blob/master/components/layout/block.rs#L687-L688
When the float object try to get its sizes, the function content_intrinsic_inline_sizes will return preferred_inline_size and minimum_inline_size both something like Au{80000} (actually there are two iteration, first both value are Au{0} not quite sure what the first round does). Though the available_inline_size contains the true constraint (that is 100px from parent). This function return Au{800px} cause image inside float unbounded, and rendered in its original sizes.
Not sure why these two lines write like this, if change to:

min(content_intrinsic_inline_sizes.minimum_inline_size, available_inline_size);

can solve this issue.
However this is not a valid answer.
https://www.w3.org/TR/CSS21/visudet.html#float-width

I think the real cause is that image inside float didn't get the width constraint.

cc @pcwalton
Maybe some hint how to repair this Orz.
also cc @shinglyu for helping me found this bug.

@nox
Copy link
Contributor

nox commented Oct 1, 2017

This still happens.

@jdm jdm added this to To do in Useful layout issues via automation Mar 27, 2022
@mrobinson mrobinson mentioned this issue Apr 16, 2024
Open
@mrobinson
Copy link
Member

Closing this as a likely duplicate of #3923.

Useful layout issues automation moved this from To do to Done Apr 16, 2024
@Loirooriol
Copy link
Contributor

This seems different, the outer block is sized correctly, the problem is with the float itself, which in fact doesn't need to be a float:

<!DOCTYPE html>
<style>
.reduced-width {
  width: 100px;
  border: solid;
}
.float-left {
  display: inline-block;
  border: solid cyan;
}
img {
  width: 100%;
}
</style>
<div class="reduced-width">
  <div class="float-left">
    <img src="https://raw.githubusercontent.com/servo/servo/master/tests/html/doge-servo.jpg" />
  </div>
</div>

Should be:

@mrobinson mrobinson reopened this Apr 16, 2024
Useful layout issues automation moved this from Done to In progress Apr 16, 2024
@Loirooriol Loirooriol linked a pull request Apr 17, 2024 that will close this issue
Draft
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
A-layout/floats C-has-manual-testcase C-reproduced
Projects
Layout 2020 Floats
Status: Done
Useful layout issues
In progress
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Resolve % as 0 for the min-content contribution of replaced elements Loirooriol/servo
6 participants
@mrobinson @jdm @nox @kaksmet @yodalee @Loirooriol