Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-16 19:05:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Simplify the computation of CAPMIN (#33577)

Browse source 
CAPMIN is the largest min-content contribution of the table captions.

In Servo, the standard way to compute min/max-content contributions is
`outer_inline_content_sizes()`, so just use that instead of reinventing
the wheel.

This also fixes cyclic percentages to resolve consistently with normal
block boxes.

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2024-09-28 02:39:22 -07:00 • committed by GitHub
parent d110d8710a
commit 5d269a9036
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 116 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -565066,6 +565066,13 @@
{}
]
],
"caption-cyclic-percentage.html": [
"3ba59491fa47496ac4f6562ad94bfde385a47e57",
[
null,
{}
]
],
"caption-side-1.html": [
"302e51ae239307a49c239bf0ad5ade17a5c9d940",
[

79
tests/wpt/tests/css/css-tables/caption-cyclic-percentage.html vendored Normal file
View file

@ -0,0 +1,79 @@
<!DOCTYPE html>
<title>Cyclic percentage sizes on table captions</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-tables/#table-caption">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#cyclic-percentage-contribution">
<meta assert="
Cyclic percentages on a table caption behave like in a normal block box.
Note that browsers don't agree with the spec on the exact behavior
(https://github.com/w3c/csswg-drafts/issues/10969),
but they should still pass this test.">
<style>
.test {
display: inline-block;
border: 10px solid;
}
.min-width > .test > div {
min-width: calc(100px + 0%);
}
.width > .test > div {
width: calc(100px + 0%);
}
.max-width > .test > div {
max-width: calc(100px + 0%);
}
</style>
<article class="min-width">
<p>These 2 rectangles should be equally wide:</p>
<div class="test">
<div></div>
</div>
<br>
<div class="test">
<div style="display: table-caption"></div>
</div>
</article>
<article class="width">
<p>These 2 rectangles should be equally wide:</p>
<div class="test">
<div></div>
</div>
<br>
<div class="test">
<div style="display: table-caption"></div>
</div>
</article>
<article class="max-width">
<p>These 2 rectangles should be equally wide:</p>
<div class="test">
<div></div>
</div>
<br>
<div class="test">
<div style="display: table-caption"></div>
</div>
</article>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
for (let article of document.querySelectorAll("article")) {
test(function() {
let elements = article.querySelectorAll(".test");
assert_greater_than(elements.length, 1, "Need more than 1 element to compare");
let expected = elements[0].offsetWidth;
for (let i = 1; i < elements.length; ++i) {
assert_equals(
elements[i].offsetWidth,
expected,
`Element #${i + 1} is as wide as the 1st one`,
);
}
}, article.className);
}
</script>