<!DOCTYPE html> <meta charset="UTF-8"> <title>CSS Background and Borders Test: background-position with min and max percentages</title> <link rel="author" title="GĂ©rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-position"> <link rel="help" href="https://www.w3.org/TR/css-values-4/#comp-func"> <!-- Issue 4227: [css-values-4] min/max(%, %) should explicitly evaluate against the % value, not the resolved value https://github.com/w3c/csswg-drafts/issues/4227 Bug 1689244: Don't eagerly resolve min() expressions that have a percent value (at least not if the percent value could be resolved against a negative percent basis) https://bugzilla.mozilla.org/show_bug.cgi?id=1689244 --> <link rel="match" href="reference/ref-filled-green-100px-square.xht"> <meta content="" name="flags"> <meta content="This test checks that when the background positioning area is smaller than the width of background image, then the 'background-position' percentage value will resolve as a negative offset." name="assert"> <style> div { height: 25px; width: 100px; } div#first-sub-test { background-image: url("support/pattern-rg-rr-200x200.png"); background-position: min(0%, 100%) max(0%, 100%); /* the first value represents the horizontal position (or offset) and (...) the second value represents the vertical position (or offset). The <length-percentage> values represent an offset of the top left corner of the background image from the top left corner of the background positioning area. A percentage for the horizontal offset is relative to (width of background positioning area - width of background image). A percentage for the vertical offset is relative to (height of background positioning area - height of background image), where the size of the image is the size given by background-size. */ } div#second-sub-test { background-image: url("support/pattern-rr-rg-200x200.png"); background-position: min(0%, 100%) min(0%, 100%); } div#third-sub-test { background-image: url("support/pattern-rr-gr-200x200.png"); background-position: max(0%, 100%) min(0%, 100%); } div#fourth-sub-test { background-image: url("support/pattern-gr-rr-200x200.png"); background-position: max(0%, 100%) max(0%, 100%); } </style> <p>Test passes if there is a filled green square and <strong>no red</strong>. <div id="first-sub-test"></div> <div id="second-sub-test"></div> <div id="third-sub-test"></div> <div id="fourth-sub-test"></div>