Take min/max-height into account in get_min_max_width for images
#2740
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Make sure to always render image decorations and check for named destinations. Only skip rendering the actual image if content width or height is 0.
Test cases for the reworked size calculationsHTML<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
@page {
size: 600pt 900pt;
margin: 30pt;
}
img {
vertical-align: top;
}
pre {
display: inline-block;
margin: 0;
width: 200pt;
font-size: 10pt;
vertical-align: top;
}
.inline-block {
display: inline-block;
vertical-align: top;
border: thin solid;
}
.break {
page-break-before: always;
}
</style>
</head>
<body>
<span class="inline-block">
<img src="http://placekitten.com/500/300" style="width: auto; height: 100px; min-height: 200px; max-width: 200px;">
</span>
<pre>
width: auto;
height: 100px;
min-height: 200px;
max-width: 200px;
</pre><br>
<span class="inline-block">
<img src="http://placekitten.com/500/300" style="width: 100px; height: auto; min-width: 200px; max-height: 200px;">
</span>
<pre>
width: 100px;
height: auto;
min-width: 200px;
max-height: 200px;
</pre><br>
<span class="inline-block">
<img src="http://placekitten.com/500/300" style="width: auto; height: auto; max-width: 200px; max-height: 200px;">
</span>
<pre>
width: auto;
height: auto;
max-width: 200px;
max-height: 200px;
</pre><br>
<span class="inline-block">
<img src="http://placekitten.com/500/300" style="width: auto; height: auto; max-width: 200px; min-height: 200px;">
</span>
<pre>
width: auto;
height: auto;
max-width: 200px;
min-height: 200px;
</pre><br>
<span class="inline-block">
<img src="http://placekitten.com/500/300" style="width: auto; height: auto; max-width: 200px; min-height: 180px; max-height: 200px;">
</span>
<pre>
width: auto;
height: auto;
max-width: 200px;
min-height: 180px;
max-height: 200px;
</pre><br>
<div class="break"></div>
<span class="inline-block">
<img src="http://placekitten.com/500/300" style="width: auto; height: auto; max-width: 100px; min-height: 200px;">
</span>
<pre>
width: auto;
height: auto;
max-width: 100px;
min-height: 200px;
</pre><br>
<span class="inline-block">
<img src="http://placekitten.com/500/300" style="width: auto; height: auto; min-width: 200px; max-height: 100px;">
</span>
<pre>
width: auto;
height: auto;
min-width: 200px;
max-height: 100px;
</pre><br>
<span class="inline-block">
<img src="http://placekitten.com/500/300" style="width: auto; height: auto; max-width: 200px; min-height: 100px;">
</span>
<pre>
width: auto;
height: auto;
max-width: 200px;
min-height: 100px;
</pre><br>
<span class="inline-block">
<img src="http://placekitten.com/500/300" style="width: auto; height: auto; min-width: 100px; max-height: 200px;">
</span>
<pre>
width: auto;
height: auto;
min-width: 100px;
max-height: 200px;
</pre><br>
<span class="inline-block">
<img src="http://placekitten.com/500/300" style="width: auto; height: auto; max-width: 100px; max-height: 200px;">
</span>
<pre>
width: auto;
height: auto;
max-width: 100px;
max-height: 200px;
</pre><br>
<span class="inline-block">
<img src="http://placekitten.com/500/300" style="width: auto; height: auto; max-width: 100px; max-height: 100px;">
</span>
<pre>
width: auto;
height: auto;
max-width: 100px;
max-height: 100px;
</pre><br>
<span class="inline-block">
<img src="http://placekitten.com/500/300" style="width: auto; height: auto; max-width: 100px; max-height: 50px;">
</span>
<pre>
width: auto;
height: auto;
max-width: 100px;
max-height: 50px;
</pre><br>
<span class="inline-block">
<img src="http://placekitten.com/500/300" style="width: auto; height: auto; max-width: 250px; max-height: 200px;">
</span>
<pre>
width: auto;
height: auto;
max-width: 150px;
max-height: 100px;
</pre><br>
</body>
</html>Output for comparison: |
This includes a rework of the size calculations for images, so that min/max constraints are always honored. Previously, constraints were ignored in some cases to maintain aspect ratio. See the last part of the section on min/max widths in [1] for the spec on the matter. TODO: While the containing block is not set yet on the frame during min/max-width determination, it can already be determined in some cases due to fixed dimensions on the ancestor forming the containing block. In such cases, percentage values could be resolved already. This needs more consideration, e.g. in regards to min/max dimensions on the parent and percentages, which could necessitate checking further ancestors. Maybe `get_min_max_width` could receive preliminary containing-block dimensions, which would still be undefined if an `auto` width/height is encountered. [1] https://www.w3.org/TR/CSS21/visudet.html#min-max-widths Fixes #2738
bsweeney
approved these changes
Jan 18, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This includes a rework of the size calculations for images, so that min/max constraints are always honored. Previously, constraints were ignored in some cases to maintain aspect ratio. See the last part of the section on min/max widths in https://www.w3.org/TR/CSS21/visudet.html#min-max-widths for the spec on the matter.
The first commit is a small change to enable rendering of zero-sized image frames. This ensures that outlines are drawn and that the image is still available as link target.
Fixes #2738