wpt/css/css-contain/contain-paint-table-002.html at master · web-platform-tests/wpt · GitHub

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
<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: paint' applies to 'table' elements</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">
  <link rel="match" href="reference/contain-paint-047-ref.html">

  <meta content="This test checks that paint containment applies to table elements. Therefore the content of the table element (including its caption) should be clipped to the padding edge of its principal box." name="assert">

  <style>
  div#table
    {
      display: table;
      font-family: monospace;
      font-size: 100px;
      table-layout: fixed;
      width: 4ch;
      contain: paint;
    }
  div.caption
    {
      display: table-caption;
      color: green;
      /* We have to limit the width of the caption here, or else the caption's
         intrinsic width (including the "FAIL" span) would "prop up" the width
         of the table to be a size that'd be larger than its specified width.
         Really, we want the table to be *only* 4 characters wide (as wide as
         the text "PASS"), with "FAIL" overflowing and getting clipped by
         "contain:paint" on the table wrapper box. */
      width: 4ch;
    }
  span
    {
      background-color: red;
      color: yellow;
    }
  </style>

  <p>Test passes if there is <strong>no red</strong>.

  <div id="table">
    <div class="caption">
      PASS<span>FAIL</span>
    </div>
  </div>