summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-stretch-round-001-ref.html
blob: 931dd3be5e870a85cdf16823b7a723cf7c1eb06f (plain)
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
<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Reftest reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">

  <style>
  div#first-subtest
    {
      background-color: black;
      display: inline-table;
      margin-right: 1em;
      table-layout: fixed;

      height: 224px;
      width: 320px;
    }

  div#second-subtest
    {
      background-color: black;
      display: inline-table;
      table-layout: fixed;

      height: 208px;
      width: 256px;
    }
  </style>

    <div id="first-subtest">
      <div style="display: table-row;">
        <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0% 50%, purple 50% 100%);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div>
      </div>

      <div style="display: table-row;">
        <div style="display: table-cell; background-image: linear-gradient(orange 0% 25%, blue 25% 50%, orange 50% 75%, blue 75% 100%);"></div><div style="display: table-cell;"></div><div style="display: table-cell; background-image: linear-gradient(orange 0% 25%, blue 25% 50%, orange 50% 75%, blue 75% 100%);"></div>
      </div>

      <div style="display: table-row;">
        <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0% 50%, purple 50% 100%);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div>
      </div>
    </div>

    <div id="second-subtest" style="vertical-align: bottom;">
      <div style="display: table-row;">
        <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0% 50%, purple 50% 100%);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div>
      </div>

      <div style="display: table-row;">
        <div style="display: table-cell; background-image: linear-gradient(orange 0% 50%, blue 50% 100%);"></div><div style="display: table-cell;"></div><div style="display: table-cell; background-image: linear-gradient(orange 0% 50%, blue 50% 100%);"></div>
      </div>

      <div style="display: table-row;">
        <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0% 50%, purple 50% 100%);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div>
      </div>
    </div>