css/css-backgrounds/reference/background-size-042-ref.html

<!DOCTYPE html>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">

  <style>
  div#black-border
    {
      border: black solid 40px;
      height: 400px;
      width: 400px;
    }

  div#gradient
    {
      background-image: linear-gradient(orange, blue);
      height: 120%; /* computes to 480px */
      margin: -40px auto 0px;
      /* the gradient block is horizontally centered inside div#black-border */
      width: 240px;
    }

  div#mask1 , div#mask2
    {
      background-color: black;
      height: 40px;
      left: 8px;
      position: absolute;
      width: 480px;
    }

  div#mask1
    {
      top: 8px;
    }

  div#mask2
    {
      top: 448px; /* 8px + 40px + 400px */
    }

  </style>

  <div id="black-border"><div id="gradient"></div></div>

  <div id="mask1"></div>

  <div id="mask2"></div>