| <!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> |