Blitz - WPT: image-color-background-repeat.html

wpt / css / css-images / image-color-background-repeat.html

/css/css-images/image-color-background-repeat.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Images Module Level 4: image(&lt;color&gt;) with background-repeat</title>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-notation">
<link rel="match" href="image-color-background-repeat-ref.html">
<style>
  .container {
    width: 200px;
    height: 200px;
    display: inline-block;
    vertical-align: top;
    background-color: red;
    background-image: image(green);
    background-size: 100px 100px;
    background-position: 0 0;
  }

  /* 2×2 grid of tiles fills the 200×200 box entirely */
  .repeat    { background-repeat: repeat; }

  /* single tile at top-left */
  .no-repeat { background-repeat: no-repeat; }

  /* two tiles in a row along the top */
  .repeat-x  { background-repeat: repeat-x; }

  /* two tiles in a column along the left */
  .repeat-y  { background-repeat: repeat-y; }
</style>
<p>Four 200×200 squares: fully green (repeat), top-left quadrant green (no-repeat),
top half green (repeat-x), left half green (repeat-y).</p>
<div class="container repeat"></div>
<div class="container no-repeat"></div>
<div class="container repeat-x"></div>
<div class="container repeat-y"></div>

/css/css-images/image-color-background-repeat-ref.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS reftest reference: image(&lt;color&gt;) with background-repeat</title>
<style>
  .container {
    width: 200px;
    height: 200px;
    display: inline-block;
    vertical-align: top;
    background-color: red;
    position: relative;
    overflow: hidden;
  }

  .green {
    position: absolute;
    background-color: green;
  }

  /* repeat: 2×2 tiles cover the full 200×200 box */
  .repeat > .green    { inset: 0; }

  /* no-repeat: single 100×100 tile at top-left */
  .no-repeat > .green { top: 0; left: 0; width: 100px; height: 100px; }

  /* repeat-x: top 100px row */
  .repeat-x > .green  { top: 0; left: 0; width: 200px; height: 100px; }

  /* repeat-y: left 100px column */
  .repeat-y > .green  { top: 0; left: 0; width: 100px; height: 200px; }
</style>
<p>Four 200×200 squares: fully green (repeat), top-left quadrant green (no-repeat),
top half green (repeat-x), left half green (repeat-y).</p>
<div class="container repeat"><div class="green"></div></div>
<div class="container no-repeat"><div class="green"></div></div>
<div class="container repeat-x"><div class="green"></div></div>
<div class="container repeat-y"><div class="green"></div></div>