box-shadow-multiple-001.html | Explore in Territory

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Backgrounds Test: multiple outset box-shadow</title>

  <!--

  Created: May 18th 2023

  Last modified: May 18th 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/#box-shadow">
  <link rel="match" href="reference/box-shadow-multiple-001-ref.html">

  <meta content="" name="flags">

  <!--

  <shadow> = <color>? && [<length>{2} <length [0,∞]>? <length>?] && inset?

  The box-shadow property attaches one or more drop-shadows to
  the box. The property accepts either the none value, which
  indicates no shadows, or a comma-separated list of shadows,
  ordered front to back.

  Each shadow is given as a <shadow>, represented by 2-4 length
  values, an optional color, and an optional inset keyword.

  -->

  <style>
  div
    {
      background-color: yellow;
      font-size: 50px;
      height: 1em;
      margin: 1em auto 2.2em 1em;
      width: 1em;
   }

  div#multiple
    {
      box-shadow: purple 0em -1em, blue 1em 0em, fuchsia 0em 1em, orange -1em 0em;
      margin-top: 58px;
    }

  div#multiple-overlapping1
    {
      box-shadow: purple 0em -1em, red 0em -1em, blue 1em 0em, red 1em 0em, fuchsia 0em 1em, red 0em 1em, orange -1em 0em, red -1em 0em;
    }

  div#multiple-overlapping2
    {
      box-shadow: rgb(128 0 128 / 50%) 0em -1em, rgb(255 255 0 / 50%) 0em -1em, rgb(0 0 255 / 50%) 1em 0em, rgb(255 255 0 / 50%) 1em 0em, rgb(255 0 255 / 50%) 0em 1em, rgb(255 255 0 / 50%) 0em 1em, rgb(255 165 0 / 50%) -1em 0em, rgb(255 255 0 / 50%) -1em 0em;
    }
  </style>

  <div id="multiple"></div>

  <div id="multiple-overlapping1"></div>

  <div id="multiple-overlapping2"></div>

  <!--

  The top first 2 are:

                  .........
                  .       .
                  .       . <-purple
                  .       .
           .......................
           .      .       .      .
  orange-> .      .  yel  .      . <-blue
           .      .  low  .      .
           .......................
                  .       .
                  .       . <-fuchsia
                  .       .
                  .........

  The bottom one is:

                  .........
                  .       .
                  .       . <-#BF7F7F
                  .       .
           .......................
           .      .       .      .
 #FFD23F-> .      .  yel  .      . <-#7F7FBF
           .      .  low  .      .
           .......................
                  .       .
                  .       . <-#FF7FBF
                  .       .
                  .........

  -->
chromium/third_party/blink/web_tests/external/wpt/css/css-backgrounds/box-shadow-multiple-001.html
