gfx/tests/reftest/1616444-same-color-different-paths.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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"><style>
  .swatch {
      float: left;
      height: 40px;
      width: 120px;
      box-sizing: border-box;
  }
  .header {
      border: 1px solid black;
      font-size: 10px;
      font-weight: bold;
  }
  br { clear: both; }
  .layer { will-change: transform  }

  .add-border { border-left: 1px solid transparent; }
  .red { background: red }
  .g-red { background: linear-gradient(red,red) }
  .orange { background: orange }
  .g-orange { background: linear-gradient(orange,orange) }
  .yellow { background: yellow }
  .g-yellow { background: linear-gradient(yellow,yellow) }
  .green { background: green }
  .g-green { background: linear-gradient(green,green) }
  .blue { background: blue }
  .g-blue { background: linear-gradient(blue,blue) }
  .indigo { background: indigo }
  .g-indigo { background: linear-gradient(indigo,indigo) }
  .violet { background: violet }
  .g-violet { background: linear-gradient(violet,violet) }

</style>
</head><body>
  <div class="swatch header">A: named color</div>
  <div class="swatch header">B: �&amp; will-change: transform</div>
  <div class="swatch header">C: �&amp; border</div>
  <div class="swatch header">D: solid-color gradient </div>
  <div class="swatch header">E: �&amp; will-change: transform</div>
  <div class="swatch header">F: �&amp; border</div>
  <br>
  <div class="swatch red"></div>
  <div class="swatch red layer"></div>
  <div class="swatch red layer add-border"></div>
  <div class="swatch g-red"></div>
  <div class="swatch g-red layer"></div>
  <div class="swatch g-red layer add-border"></div>
 <br>
  <div class="swatch orange"></div>
  <div class="swatch orange layer"></div>
  <div class="swatch orange layer add-border"></div>
  <div class="swatch g-orange"></div>
  <div class="swatch g-orange layer"></div>
  <div class="swatch g-orange layer add-border"></div>
  <br>
  <div class="swatch yellow"></div>
  <div class="swatch yellow layer"></div>
  <div class="swatch yellow layer add-border"></div>
  <div class="swatch g-yellow"></div>
  <div class="swatch g-yellow layer"></div>
  <div class="swatch g-yellow layer add-border"></div>
  <br>
  <div class="swatch green"></div>
  <div class="swatch green layer"></div>
  <div class="swatch green layer add-border"></div>
  <div class="swatch g-green"></div>
  <div class="swatch g-green layer"></div>
  <div class="swatch g-green layer add-border"></div>
  <br>
  <div class="swatch blue"></div>
  <div class="swatch blue layer"></div>
  <div class="swatch blue layer add-border"></div>
  <div class="swatch g-blue"></div>
  <div class="swatch g-blue layer"></div>
  <div class="swatch g-blue layer add-border"></div>
  <br>
  <div class="swatch indigo"></div>
  <div class="swatch indigo layer"></div>
  <div class="swatch indigo layer add-border"></div>
  <div class="swatch g-indigo"></div>
  <div class="swatch g-indigo layer"></div>
  <div class="swatch g-indigo layer add-border"></div>
  <br>
  <div class="swatch violet"></div>
  <div class="swatch violet layer"></div>
  <div class="swatch violet layer add-border"></div>
  <div class="swatch g-violet"></div>
  <div class="swatch g-violet layer"></div>
  <div class="swatch g-violet layer add-border"></div>
  <br>
</body></html>