Blitz - WPT: box-shadow-multiple-001.html

wpt / css / css-backgrounds / box-shadow-multiple-001.html

/css/css-backgrounds/box-shadow-multiple-001.html

<!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
                  .       .
                  .........

  -->

/css/css-backgrounds/reference/box-shadow-multiple-001-ref.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Reference Test</title>

  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">

  <style>
  div
    {
      color: transparent;
      font-family: Ahem;
      font-size: 50px;
      line-height: 1;
    }

  div.purple
    {
      text-shadow: 1em 0em purple;
    }

  div.orange-blue
    {
      color: yellow;
      margin-left: 1em;
      text-shadow: -1em 0em orange, 1em 0em blue;
    }

  div.fuchsia
    {
      margin-bottom: 0.2em;
      text-shadow: 1em 0em fuchsia;
    }

  div#third-top
    {
      text-shadow: 1em 0em #BF7F7F;
    }

  div#third-horiz-left-right
    {
      color: yellow;
      margin-left: 1em;
      text-shadow: -1em 0em #FFD23F , 1em 0em #7F7FBF;
    }

  div#third-bottom
    {
      text-shadow: 1em 0em #FF7FBF;
    }
  </style>

  <div class="purple">U</div>

  <div class="orange-blue">B</div>

  <div class="fuchsia">F</div>


  <div class="purple">U</div>

  <div class="orange-blue">B</div>

  <div class="fuchsia">F</div>


  <div id="third-top">T</div>

  <div id="third-horiz-left-right">H</div>

  <div id="third-bottom">B</div>


  <!--

  The top first 2 are:

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

  The bottom one is:

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

  -->