testing/web-platform/tests/css/css-backgrounds/box-shadow-table-border-collapse-001.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Box-shadow Test: an HTML &lt;table&gt; with 'border-collapse: collapse'</title>

  <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/#shadow-layers">
  <link rel="match" href="reference/box-shadow-table-border-collapse-001-ref.html">
  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">

  <!--

  created: 2017
  modified: May 23rd 2020

  Bug 1050297: Box-shadow of a table disappears when its border-collapse is set to collapse
  https://connect.microsoft.com/IE/Feedback/Details/1050297

  Sky6t user page at wikipedia
  https://en.wikipedia.org/wiki/User:Sky6t/sandbox#Tables

  -->

  <meta content="This test checks that 'box-shadow' applies to table element with 'border-collapse' set to 'collapse' as long as row borders do not have different border thicknesses. In this test, the left border of both table rows have the same thickness (30px) and the right border of both table rows have the same thickness (30px)." name="assert">

  <style>
  table
    {
      border: red solid 29px;
      border-collapse: collapse;
      box-shadow: 20px 20px darkgray;
      color: orange;
      font-family: Ahem;
      font-size: 50px;
      line-height: 1;
      table-layout: fixed;
      width: 160px;
    }

  tr
    {
      border-color: blue;
      border-style: solid;
    }

  tr#top-row
    {

      border-width: 30px 30px 0px;
    }

  tr#bottom-row
    {
      border-width: 0px 30px 30px;
    }

  td
    {
      padding: 0;
    }
  </style>

  <p>Test passes if there is a filled orange square with a thick blue border and if such square has a gray outer shadow at its bottom and at its right side.

  <table>

    <tr id="top-row"><td>1<td>2

    <tr id="bottom-row"><td>3<td>4

  </table>