background-large-position-and-size-remains-stable.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      .imageDiv {
        display: inline-block;
        width: 25%;
        padding-bottom: 25%;
        border: 5px solid black;
      }

      .firstImage {
        background-image: url(resources/red-red-green.png);

        /* Relative to the background positioning area. 75% of containing block width in this case. */
        background-size: 300% 100%;

        /* Relative to background positioning area - background image size.
           100 times (-50% of view width) = -5000% of containing block width.
           size is 75% of view width, so this is always 66.666 tiles, so we start 2/3 of the way into the image.
        */
        background-position: 10000% 0;
      }

      .secondImage {
        background-image: url(resources/red-green-red.png);

        background-size: 300% 100%;

        /* As above, but now we start 1/3 of the way into the image. */
        background-position: 20000% 0;
      }

      .thirdImage {
        background-image: url(resources/red-red-green-vertical.png);

        /* Relative to the background positioning area. 75% of containing block width in this case. */
        background-size: 100% 300%;

        /* Relative to background positioning area - background image size.
           100 times (-50% of view width) = -5000% of containing block width.
           size is 75% of view width, so this is always 66.666 tiles, so we start 2/3 of the way into the image.
        */
        background-position: 0 10000%;
      }

      .fourthImage {
        background-image: url(resources/red-green-red-vertical.png);

        background-size: 100% 300%;

        /* As above, but now we start 1/3 of the way into the image. */
        background-position: 0 20000%;
      }
    </style>
  </head>
  <body>
    <div style="display: block; width: 671px; height: 200px;">
      <div class="firstImage imageDiv"></div>
      <div class="secondImage imageDiv"></div>
    </div>
    <br>
    <div style="display: block; width: 671px; height: 200px;">
      <div class="thirdImage imageDiv"></div>
      <div class="fourthImage imageDiv"></div>
    </div>
  </body>
</html>
chromium/third_party/blink/web_tests/css3/background/background-large-position-and-size-remains-stable.html
