Skip to main content

Browse the archive

https://github.com/web-platform-tests/wpt
26 December 2018, 22:31:15 UTC
Raw File
Tip revision: 4e59ec9e45875155334f1823e388edff3e339e08 authored by Cameron McCormack on 03 April 2018, 00:32:49 UTC
fix reftest-wait typo
Tip revision: 4e59ec9
background-size-022.html 
<!DOCTYPE html>
<html>
  <head>
    <title>CSS Backgrounds and Borders Test: background-size '50% auto' with background-origin 'border-box'</title>
    <link rel="author" title="Intel" href="http://www.intel.com">
    <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="help" href="http://www.w3.org/TR/css3-background/#the-background-origin">
    <meta name="flags" content="image">
    <meta name="assert" content="Check if 'background-size' is '50% auto', then it rescales the background image so that exactly two copies fit the background positioning area (it is 160px by 160px in this test) horizontally. Therefore the used width of the background-size in this test should be 80px.">
    <style>
        #ref-overlapped-red {
            background-color: red;
            height: 160px;
            width: 160px;
        }
        #test-overlapping-img {
            background-image: url(support/100x100-blue-and-orange.png);
            background-origin: border-box;
            background-size: 50% auto;
            border: transparent dotted 5px;
            bottom: 160px;
            height: 100px;
            padding: 25px;
            position: relative;
            width: 100px;

            /*
            Background positioning area is 160px wide by 160px tall.
            So, the image should be scaled to 80px by 80px (near),
            and repeated once in both horizontally and vertically.
            */
        }
    </style>
  </head>
  <body>
    <p>Test passes if there are 2 rows of 2 blue-and-orange squares and if there is <strong>no partially</strong> displayed squares and <strong>no red</strong>.</p>
    <div id="ref-overlapped-red"></div>
    <div id="test-overlapping-img"></div>
  </body>
</html>
back to top