testing/web-platform/tests/css/css-backgrounds/box-shadow-overlapping-004.html

   1 <!DOCTYPE html>
   2
   3   <meta charset="UTF-8">
   4
   5   <title>CSS Background and Borders Test: box-shadow and overlapping of adjacent text</title>
   6
   7   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
   8   <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#shadow-layers" >
   9   <link rel="match" href="reference/box-shadow-overlapping-003-ref.html">
  10   <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
  11
  12   <meta content="" name="flags">
  13   <meta content="Box shadows do not affect layout. Box shadows take up no space. Box shadows do not affect or influence normal flow of boxes. Therefore, box shadows can 'collide' with other boxes and can overlap other boxes (inline box or line box) or be overlapped by other boxes. This test checks that the background of the following line box overlaps the box-shadow of an inline non-replaced box whose box-shadow expands onto and over the following line box. In this test, the box shadow of div#outer-box-shadow is red and protudes out and below onto the following line box. But since the glyphs of div#following-line-box are green, then such green color will overlap the red box shadow of div#outer-box-shadow." name="assert">
  14
  15   <style>
  16   div
  17     {
  18       color: green;
  19       float: left;
  20       font-family: Ahem;
  21       font-size: 100px;
  22       line-height: 1;
  23     }
  24
  25   div#outer-box-shadow
  26     {
  27       box-shadow: 0em 1em red;
  28     }
  29
  30     /*
  31
  32     1st <length>
  33     Specifies the horizontal offset of the shadow. A positive value
  34     draws a shadow that is offset to the right of the box, a negative
  35     length to the left.
  36
  37     2nd <length>
  38     Specifies the vertical offset of the shadow. A positive value
  39     offsets the shadow down, a negative one up.
  40
  41     */
  42
  43   div#following-line-box
  44     {
  45       clear: left;
  46     }
  47   </style>
  48
  49   <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.
  50
  51   <div id="outer-box-shadow">OVLPED</div>
  52
  53   <div id="following-line-box">OVLPNG</div>