testing/web-platform/tests/css/css-backgrounds/background-size-015.html
author Lando <lando@lando.test>
Thu, 10 Jul 2025 16:11:40 +0000 (6 hours ago)
changeset 795966 8f464d9c468ba1a7c1b0338deaa8bc8023f8ae3d
parent 392912 9415bff8166863f344256c7a3dd14aa5e038e82b
permissions -rw-r--r--
Merge autoland to mozilla-central
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS Backgrounds and Borders Test: background-size - one &lt;length&gt; and one auto keyword values</title>
    <link rel="author" title="Intel" href="http://www.intel.com">
    <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-14 -->
    <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property">
    <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
    <meta name="flags" content="image">
    <meta name="assert" content="Check if 'background-size' has one length and one auto values, then the first value is the width of the corresponding background image and the second value (corresponding to the height of the background image) is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 100px.">
    <style>
        #ref-overlapped-red {
            background-color: red;
            height: 100px;
            width: 100px;
        }
        #test-overlapping-green {
            background-image: url(support/1x1-green.png);
            background-repeat: no-repeat;
            background-size: 100px auto;
            bottom: 100px;
            height: 100px;
            position: relative;
        }
    </style>
  </head>
  <body>
    <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
    <div id="ref-overlapped-red"></div>
    <div id="test-overlapping-green"></div>
  </body>
</html>