Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-backgrounds/background-position-calc-minmax-001.html - WPT Dashboard Interop Dashboard
<!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/">
<!--
Issue 4227: [css-values-4] min/max(%, %) should explicitly evaluate
against the % value, not the resolved value
percent value (at least not if the percent value could be resolved
against a negative percent basis)
-->
<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>