mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 21:28:04 +02:00
099693bb06
Automatic update from web-platform-tests [LayoutNG] ComputeReplacedSize edge case fix Edge case for "have aspect ratio, but no intrinsic size" If there was no intrinsic size, we treated it as no size at all. But, if there is a css size, we should use that instead. Bug: 1015311 Change-Id: Ia8f12bd23cda5c18b9aae318eee91906840475d3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1877595 Commit-Queue: Aleks Totic <atotic@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/master@{#709134} -- wpt-commits: cfffd794f8c086ac20c664658738a4dce18462c1 wpt-pr: 19857 Differential Revision: https://phabricator.services.mozilla.com/D53456
355 lines
15 KiB
HTML
355 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Position: absolute position, replaced elements, and minmax</title>
|
|
<link rel="author" title="mailto:atotic@google.com">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#min-max-widths">
|
|
<meta name="assert" content="Min/max width and height interact properly with abspos replaced elements">
|
|
<style>
|
|
.container {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 400px;
|
|
height: 200px;
|
|
border: 1px solid black;
|
|
}
|
|
.target {
|
|
position: absolute;
|
|
padding: 10px;
|
|
bottom: 0;
|
|
right: 0;
|
|
border-width: 3px 7px 9px 11px;
|
|
border-color: yellow;
|
|
border-style: solid;
|
|
margin: 1px 3px 7px 9px;
|
|
}
|
|
</style>
|
|
<!-- test all combinations of minmax from section 10.4 table at
|
|
https://www.w3.org/TR/CSS2/visudet.html#min-max-widths -->
|
|
|
|
<!-- IFRAME tests -->
|
|
<!-- iframe: intrinsic size is 300x150, no aspect ratio -->
|
|
<div class="container">
|
|
<iframe class="target"
|
|
data-expected-width="338" data-expected-height="182" data-offset-y="11" data-offset-x="59"
|
|
>
|
|
</iframe>
|
|
</div>
|
|
<!-- spec 1: w > max-width -->
|
|
<div class="container">
|
|
<iframe class="target" style="max-width:100px"
|
|
data-expected-width="138" data-expected-height="182" data-offset-y="11" data-offset-x="259"
|
|
>
|
|
</iframe>
|
|
</div>
|
|
<!-- spec 2: w < min-width -->
|
|
<div class="container">
|
|
<iframe class="target" style="min-width: 350px"
|
|
data-expected-width="388" data-expected-height="182" data-offset-y="11" data-offset-x="9"
|
|
>
|
|
</iframe>
|
|
</div>
|
|
<!-- spec 3: h > max-height -->
|
|
<div class="container">
|
|
<iframe class="target" style="max-height: 150px"
|
|
data-expected-width="338" data-expected-height="182" data-offset-y="11" data-offset-x="59"
|
|
>
|
|
</iframe>
|
|
</div>
|
|
<!-- spec 4: h < min-height -->
|
|
<div class="container">
|
|
<iframe class="target" style="min-height: 165px"
|
|
data-expected-width="338" data-expected-height="197" data-offset-y="-4" data-offset-x="59"
|
|
>
|
|
</iframe>
|
|
</div>
|
|
<!-- spec 5: (w > max-width) and (h > max-height), where (max-width/w ≤ max-height/h) -->
|
|
<div class="container">
|
|
<iframe class="target" style="max-width: 240px; max-height: 135px"
|
|
data-expected-width="278" data-expected-height="167" data-offset-y="26" data-offset-x="119"
|
|
>
|
|
</iframe>
|
|
</div>
|
|
<!-- spec 6: (w > max-width) and (h > max-height), where (max-width/w > max-height/h) -->
|
|
<div class="container">
|
|
<iframe class="target" style="max-width: 270px; max-height: 120px"
|
|
data-expected-width="308" data-expected-height="152" data-offset-y="41" data-offset-x="89"
|
|
>
|
|
</iframe>
|
|
</div>
|
|
<!-- spec 7: (w < min-width) and (h < min-height), where (min-width/w ≤ min-height/h) -->
|
|
<div class="container">
|
|
<iframe class="target" style="min-width: 360px; min-height: 165px"
|
|
data-expected-width="398" data-expected-height="197" data-offset-y="-4" data-offset-x="-1"
|
|
>
|
|
</iframe>
|
|
</div>
|
|
<!-- spec 8: (w < min-width) and (h < min-height), where (min-width/w > min-height/h) -->
|
|
<div class="container">
|
|
<iframe class="target" style="min-width: 330px; min-height: 180px"
|
|
data-expected-width="368" data-expected-height="212" data-offset-y="-19" data-offset-x="29"
|
|
>
|
|
</iframe>
|
|
</div>
|
|
<!-- spec 9: (w < min-width) and (h > max-height) -->
|
|
<div class="container">
|
|
<iframe class="target" style="min-width: 330px; max-height: 135px"
|
|
data-expected-width="368" data-expected-height="167" data-offset-y="26" data-offset-x="29"
|
|
>
|
|
</iframe>
|
|
</div>
|
|
<!-- spec 10: (w > max-width) and (h < min-height) -->
|
|
<div class="container">
|
|
<iframe class="target" style="max-width: 240px; min-height: 165px"
|
|
data-expected-width="278" data-expected-height="197" data-offset-y="-4" data-offset-x="119"
|
|
>
|
|
</iframe>
|
|
</div>
|
|
|
|
<!-- IMG png tests -->
|
|
<!-- image dimensions: 200x150. images has intrinic size and aspect ratio -->
|
|
<div class="container">
|
|
<img class="target png"
|
|
data-expected-width="238" data-expected-height="182" data-offset-y="11" data-offset-x="159"
|
|
>
|
|
</div>
|
|
<!-- spec 1: w > max-width -->
|
|
<div class="container">
|
|
<img class="target png" style="max-width: 180px"
|
|
data-expected-width="218" data-expected-height="167" data-offset-y="26" data-offset-x="179"
|
|
>
|
|
</div>
|
|
<!-- spec 2: w < min-width -->
|
|
<div class="container">
|
|
<img class="target png" style="min-width: 220px"
|
|
data-expected-width="258" data-expected-height="197" data-offset-y="-4" data-offset-x="139"
|
|
>
|
|
</div>
|
|
|
|
<!-- spec 3: h > max-height -->
|
|
<div class="container">
|
|
<img class="target png" style="max-height: 135px"
|
|
data-expected-width="218" data-expected-height="167" data-offset-y="26" data-offset-x="179"
|
|
>
|
|
</div>
|
|
<!-- spec 4: h < min-height -->
|
|
<div class="container">
|
|
<img class="target png" style="min-height: 165px"
|
|
data-expected-width="258" data-expected-height="197" data-offset-y="-4" data-offset-x="139"
|
|
>
|
|
</div>
|
|
<!-- spec 5: (w > max-width) and (h > max-height), where (max-width/w ≤ max-height/h) -->
|
|
<div class="container">
|
|
<img class="target png" style="max-width: 160px; max-height: 135px"
|
|
data-expected-width="198" data-expected-height="152" data-offset-y="41" data-offset-x="199"
|
|
>
|
|
</div>
|
|
<!-- spec 6: (w > max-width) and (h > max-height), where (max-width/w > max-height/h) -->
|
|
<div class="container">
|
|
<img class="target png" style="max-width: 180px; max-height: 120px"
|
|
data-expected-width="198" data-expected-height="152" data-offset-y="41" data-offset-x="199"
|
|
>
|
|
</div>
|
|
<!-- spec 7: (w < min-width) and (h < min-height), where (min-width/w ≤ min-height/h) -->
|
|
<div class="container">
|
|
<img class="target png" style="min-width: 240px;min-height: 165px"
|
|
data-expected-width="278" data-expected-height="212" data-offset-y="-19" data-offset-x="119"
|
|
>
|
|
</div>
|
|
<!-- spec 8: (w < min-width) and (h < min-height), where (min-width/w > min-height/h) -->
|
|
<div class="container">
|
|
<img class="target png" style="min-width: 220px;min-height: 180px"
|
|
data-expected-width="278" data-expected-height="212" data-offset-y="-19" data-offset-x="119"
|
|
>
|
|
</div>
|
|
<!-- spec 9: (w < min-width) and (h > max-height) -->
|
|
<div class="container">
|
|
<img class="target png" style="min-width: 220px; max-height: 130px"
|
|
data-expected-width="258" data-expected-height="162" data-offset-y="31" data-offset-x="139"
|
|
>
|
|
</div>
|
|
<!-- spec 10: (w > max-width) and (h < min-height) -->
|
|
<div class="container">
|
|
<img class="target png" style="max-width: 180px; min-height: 165px"
|
|
data-expected-width="218" data-expected-height="197" data-offset-y="-4" data-offset-x="179"
|
|
>
|
|
</div>
|
|
<!-- IMG SVG tests -->
|
|
<!-- image dimensions: 200x150. images has no intrinic size and no aspect ratio -->
|
|
<div class="container">
|
|
<img class="target svg"
|
|
data-expected-width="338" data-expected-height="182" data-offset-y="11" data-offset-x="59"
|
|
>
|
|
</div>
|
|
<!-- spec 1: w > max-width -->
|
|
<div class="container">
|
|
<img class="target svg" style="max-width: 180px"
|
|
data-expected-width="218" data-expected-height="182" data-offset-y="11" data-offset-x="179"
|
|
>
|
|
</div>
|
|
<!-- spec 2: w < min-width -->
|
|
<div class="container">
|
|
<img class="target svg" style="min-width: 220px"
|
|
data-expected-width="338" data-expected-height="182" data-offset-y="11" data-offset-x="59"
|
|
>
|
|
</div>
|
|
|
|
<!-- spec 3: h > max-height -->
|
|
<div class="container">
|
|
<img class="target svg" style="max-height: 135px"
|
|
data-expected-width="338" data-expected-height="167" data-offset-y="26" data-offset-x="59"
|
|
>
|
|
</div>
|
|
<!-- spec 4: h < min-height -->
|
|
<div class="container">
|
|
<img class="target svg" style="min-height: 165px"
|
|
data-expected-width="338" data-expected-height="197" data-offset-y="-4" data-offset-x="59"
|
|
>
|
|
</div>
|
|
<!-- spec 5: (w > max-width) and (h > max-height), where (max-width/w ≤ max-height/h) -->
|
|
<div class="container">
|
|
<img class="target svg" style="max-width: 160px; max-height: 135px"
|
|
data-expected-width="198" data-expected-height="167" data-offset-y="26" data-offset-x="199"
|
|
>
|
|
</div>
|
|
<!-- spec 6: (w > max-width) and (h > max-height), where (max-width/w > max-height/h) -->
|
|
<div class="container">
|
|
<img class="target svg" style="max-width: 180px; max-height: 120px"
|
|
data-expected-width="218" data-expected-height="152" data-offset-y="41" data-offset-x="179"
|
|
>
|
|
</div>
|
|
<!-- spec 7: (w < min-width) and (h < min-height), where (min-width/w ≤ min-height/h) -->
|
|
<div class="container">
|
|
<img class="target svg" style="min-width: 240px;min-height: 165px"
|
|
data-expected-width="338" data-expected-height="197" data-offset-y="-4" data-offset-x="59"
|
|
>
|
|
</div>
|
|
<!-- spec 8: (w < min-width) and (h < min-height), where (min-width/w > min-height/h) -->
|
|
<div class="container">
|
|
<img class="target svg" style="min-width: 220px;min-height: 180px"
|
|
data-expected-width="338" data-expected-height="212" data-offset-y="-19" data-offset-x="59"
|
|
>
|
|
</div>
|
|
<!-- spec 9: (w < min-width) and (h > max-height) -->
|
|
<div class="container">
|
|
<img class="target svg" style="min-width: 220px; max-height: 130px"
|
|
data-expected-width="338" data-expected-height="162" data-offset-y="31" data-offset-x="59"
|
|
>
|
|
</div>
|
|
<!-- spec 10: (w > max-width) and (h < min-height) -->
|
|
<div class="container">
|
|
<img class="target svg" style="max-width: 180px; min-height: 165px"
|
|
data-expected-width="218" data-expected-height="197" data-offset-y="-4" data-offset-x="179"
|
|
>
|
|
</div>
|
|
<!-- SVG tests -->
|
|
<!-- SVGs are special: any combination of intrinsic_size and aspect_ratio
|
|
can happen. -->
|
|
<!-- Just viewbox. Has intrinsic aspect ratio, but no width/height -->
|
|
<div class="container">
|
|
<img class="target" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Crect width='100%' height='100%' style='fill:rgb(0,255,0);'/%3E%3C/svg%3E" style=""
|
|
data-expected-width="338" data-expected-height="182" data-offset-y="11" data-offset-x="59"
|
|
>
|
|
</div>
|
|
<!-- Just viewbox. Has aspect_ratio, but no intrinsic size
|
|
inline_width defaults to container width -->
|
|
<div class="container">
|
|
<img class="target" src="data:image/svg+xml,%3Csvg viewBox='0 0 100 10' xmlns='http://www.w3.org/2000/svg' %3E%3Crect width='100%' height='100%' style='fill:rgb(0,255,0);'/%3E%3C/svg%3E"
|
|
data-expected-width="388" data-expected-height="67" data-offset-y="126" data-offset-x="9"
|
|
>
|
|
</div>
|
|
<!-- Just viewbox. Has aspect_ratio, but no intrinsic size
|
|
inline_width is constrained by left/right, height computed proportionally -->
|
|
<div class="container">
|
|
<img class="target" style="left:100px;right:100px;" src="data:image/svg+xml,%3Csvg viewBox='0 0 100 10' xmlns='http://www.w3.org/2000/svg' %3E%3Crect width='100%' height='100%' style='fill:rgb(0,255,0);'/%3E%3C/svg%3E"
|
|
data-expected-width="188" data-expected-height="47" data-offset-y="146" data-offset-x="109"
|
|
>
|
|
</div>
|
|
<!-- Same as previous test, but with max-width:fit-content. crbug.com/1010798
|
|
-->
|
|
<div class="container">
|
|
<img class="target" style="left:100px;right:100px;max-width:fit-content" src="data:image/svg+xml,%3Csvg viewBox='0 0 100 10' xmlns='http://www.w3.org/2000/svg' %3E%3Crect width='100%' height='100%' style='fill:rgb(0,255,0);'/%3E%3C/svg%3E"
|
|
data-expected-width="188" data-expected-height="47" data-offset-y="146" data-offset-x="109"
|
|
>
|
|
</div>
|
|
<!-- Viewbox + svg width. Has aspect_ratio and width. Height is scaled -->
|
|
<div class="container">
|
|
<img class="target" src="data:image/svg+xml,%3Csvg viewBox='0 0 100 10' width='100px' xmlns='http://www.w3.org/2000/svg' %3E%3Crect width='100%' height='100%' style='fill:rgb(0,255,0);'/%3E%3C/svg%3E"
|
|
data-expected-width="138" data-expected-height="42" data-offset-y="151" data-offset-x="259"
|
|
>
|
|
</div>
|
|
<!-- Viewbox + svg height. Has aspect_ratio and height. Width is scaled -->
|
|
<div class="container">
|
|
<img class="target" src="data:image/svg+xml,%3Csvg viewBox='0 0 100 10' height='20px' xmlns='http://www.w3.org/2000/svg' %3E%3Crect width='100%' height='100%' style='fill:rgb(0,255,0);'/%3E%3C/svg%3E"
|
|
data-expected-width="238" data-expected-height="52" data-offset-y="141" data-offset-x="159"
|
|
>
|
|
</div>
|
|
<!-- Viewbox + css height. Has aspect_ratio and height. Width is scaled -->
|
|
<div class="container">
|
|
<img class="target" style="height:20px" src="data:image/svg+xml,%3Csvg viewBox='0 0 100 10' xmlns='http://www.w3.org/2000/svg' %3E%3Crect width='100%' height='100%' style='fill:rgb(0,255,0);'/%3E%3C/svg%3E"
|
|
data-expected-width="238" data-expected-height="52" data-offset-y="141" data-offset-x="159"
|
|
>
|
|
</div>
|
|
<!-- Viewbox + css width. Has aspect_ratio and width. Height is scaled -->
|
|
<div class="container">
|
|
<img class="target" style="width:238px" src="data:image/svg+xml,%3Csvg viewBox='0 0 100 10' xmlns='http://www.w3.org/2000/svg' %3E%3Crect width='100%' height='100%' style='fill:rgb(0,255,0);'/%3E%3C/svg%3E"
|
|
data-expected-width="276" data-expected-height="56" data-offset-y="137" data-offset-x="121"
|
|
>
|
|
</div>
|
|
<script>
|
|
// initialize png images with 200x150 green png
|
|
let pngSrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAACWAQMAAAChElVaAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEUAgAD///8UPy9PAAAAAWJLR0QB/wIt3gAAAAd0SU1FB+MBDwkdA1Cz/EMAAAAbSURBVEjH7cGBAAAAAMOg+VPf4ARVAQAAAM8ADzwAAeM8wQsAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDEtMTVUMTc6Mjk6MDMtMDg6MDCYDy9IAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTAxLTE1VDE3OjI5OjAzLTA4OjAw6VKX9AAAAABJRU5ErkJggg=="
|
|
;
|
|
let images = document.querySelectorAll("img.png");
|
|
for (let i=0; i<images.length; ++i) {
|
|
images[i].src = pngSrc;
|
|
}
|
|
|
|
// SVG with no intrinsic width/height
|
|
let svgSrc="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Crect width='100%' height='100%' style='fill:rgb(0,255,0);'/%3E%3C/svg%3E ";
|
|
images = document.querySelectorAll("img.svg");
|
|
for (let i=0; i<images.length; ++i) {
|
|
images[i].src = svgSrc;
|
|
}
|
|
|
|
function makeTest(el) {
|
|
return function() {
|
|
if (!el.getAttribute("data-expected-width")) {
|
|
// This code is used to generate reference data for the tests.
|
|
let text = `data-expected-width="${el.offsetWidth}" data-expected-height="${el.offsetHeight}" data-offset-y="${el.offsetTop}" data-offset-x="${el.offsetLeft}"`;
|
|
el.parentElement.innerText = text;
|
|
return;
|
|
}
|
|
assert_equals(el.offsetWidth + "", el.getAttribute("data-expected-width"), "incorrect offsetWidth");
|
|
assert_equals(el.offsetHeight + "", el.getAttribute("data-expected-height"), "incorrect offsetHeight");
|
|
assert_equals(el.offsetTop + "", el.getAttribute("data-offset-y"), "incorrect offsetTop");
|
|
assert_equals(el.offsetLeft + "", el.getAttribute("data-offset-x"), "incorrect offsetLeft");
|
|
}
|
|
};
|
|
|
|
|
|
let testNameIndex = 1;
|
|
function getTestName(el) {
|
|
let svg = el.classList.contains("svg") ? " svg" : "";
|
|
return "minmax replaced " + el.nodeName + svg + " " + testNameIndex++;
|
|
};
|
|
|
|
function testAfterImageLoads(img, test) {
|
|
let asyncTest = async_test(getTestName(img));
|
|
img.addEventListener("load", _ => {
|
|
asyncTest.step(test);
|
|
asyncTest.done();
|
|
});
|
|
};
|
|
|
|
let testElements = document.querySelectorAll(".target");
|
|
|
|
for (let i=0; i<testElements.length; ++i) {
|
|
let myTest = makeTest(testElements[i]);
|
|
if (testElements[i].nodeName == "IMG" && !testElements[i].complete) {
|
|
testAfterImageLoads(testElements[i], myTest);
|
|
} else {
|
|
test(myTest, getTestName(testElements[i]));
|
|
}
|
|
}
|
|
</script>
|