Blitz - WPT: border-image-repeat-space-011.html

wpt / css / css-backgrounds / border-image-repeat-space-011.html

/css/css-backgrounds/border-image-repeat-space-011.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Backgrounds Test: border-image-repeat: space</title>

  <!--

  Created: March 31st 2023

  Last modified: April 9th 2023

  -->

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
  <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#border-image-repeat">
  <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#border-image-process">
  <link rel="match" href="reference/border-image-repeat-space-011-ref.html">

  <meta content="" name="flags">
  <meta content="This test checks that the process of repeating the tile when 'border-image-repeat' is 'space'. The testing div is wide enough and tall enough to have 2 complete border-image on each of the 4 sides. 96px will become the extra space which must be distributed around the 2 tiles." name="assert">

  <!--

  'space'
    The image is tiled (repeated) to fill the area. If it does
    not fill the area with a whole number of tiles, the extra
    space is distributed around the tiles.

  https://www.w3.org/TR/css-backgrounds-3/#valdef-border-image-repeat-space

  -->

  <style>
  div
    {
      border: red solid 100px;
      border-image-repeat: space; /* this is the same as 'space space' since
      "
      If the second keyword is absent, it is assumed to be the same as the first.
      https://www.w3.org/TR/css-backgrounds-3/#border-image-repeat
      "
      */
      border-image-slice: 50;
      border-image-source: url("support/border-image-repeat-space-011.png");
      height: 296px;
      width: 296px;

    /*

      296
    -
      200
    ======
       96

     and since there is 3 spaces created, we divide
     the remaining by 3 giving us exactly 32px between and around
     each pair of (gray, purple, orange and blue) squares

    */
   }
  </style>

  <div></div>

/css/css-backgrounds/reference/border-image-repeat-space-011-ref.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Reftest Reference</title>

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

  <style>
  table
    {
      border-spacing: 32px;
      margin: -32px 0px 0px -32px;
    }

  td
    {
      height: 100px;
      padding: 0px;
      width: 100px;
    }
  </style>

  <table>

    <tr>
      <td style="background-color: black;"><td style="background-color: gray;"><td style="background-color: gray;"><td style="background-color: black;">

    <tr>
      <td style="background-color: blue;"><td><td><td style="background-color: purple;">

    <tr>
      <td style="background-color: blue;"><td><td><td style="background-color: purple;">

    <tr>
      <td style="background-color: black;"><td style="background-color: orange;"><td style="background-color: orange;"><td style="background-color: black;">

  </table>