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

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

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

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Images Module Level 4: image(&lt;color&gt;) with background-position</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-position-ref.html">
<style>
  .container {
    width: 100px;
    height: 100px;
    display: inline-block;
    vertical-align: top;
    background-color: red;
    background-image: image(green);
    background-size: 50px 50px;
    background-repeat: no-repeat;
  }

  .top-left     { background-position: 0% 0%; }
  .center       { background-position: center; }
  .bottom-right { background-position: right bottom; }
  .offset       { background-position: 25px 25px; }
</style>
<p>Four 100×100 squares with a 50×50 green tile on red at: top-left, center, bottom-right, 25px offset.</p>
<div class="container top-left"></div>
<div class="container center"></div>
<div class="container bottom-right"></div>
<div class="container offset"></div>

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

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

  .green {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: green;
  }

  /* 0% 0% → (0, 0) */
  .top-left > .green     { top: 0;    left: 0; }

  /* center → ((100-50)/2, (100-50)/2) = (25px, 25px) */
  .center > .green       { top: 25px; left: 25px; }

  /* right bottom → (100-50, 100-50) = (50px, 50px) */
  .bottom-right > .green { top: 50px; left: 50px; }

  /* 25px 25px */
  .offset > .green       { top: 25px; left: 25px; }
</style>
<p>Four 100×100 squares with a 50×50 green tile on red at: top-left, center, bottom-right, 25px offset.</p>
<div class="container top-left"><div class="green"></div></div>
<div class="container center"><div class="green"></div></div>
<div class="container bottom-right"><div class="green"></div></div>
<div class="container offset"><div class="green"></div></div>