4 <title>test of border-image-source: linear-gradient with border-image-slice
</title>
6 table { margin:
0; padding:
0; border-spacing:
0; empty-cells: show; }
12 <col style=
"width: 30.0px;">
13 <col style=
"width: 90.0px;">
14 <col style=
"width: 90.0px;">
15 <col style=
"width: 30.0px;">
16 <tr style=
"height: 30.0px;">
17 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: 0px 0px;"></td>
18 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 180.0px; background-position: -22.5px -0.0px;"></td>
19 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 180.0px; background-position: -22.5px -0.0px;"></td>
20 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -150.0px 0px;"></td>
22 <tr style=
"height: 90.0px;">
23 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 135.0px; background-position: -0.0px -22.5px;"></td>
24 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 135.0px; background-position: -22.5px -22.5px;"></td>
25 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 135.0px; background-position: -22.5px -22.5px;"></td>
26 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 135.0px; background-position: -150.0px -22.5px;"></td>
28 <tr style=
"height: 90.0px;">
29 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 135.0px; background-position: -0.0px -22.5px;"></td>
30 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 135.0px; background-position: -22.5px -22.5px;"></td>
31 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 135.0px; background-position: -22.5px -22.5px;"></td>
32 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 135.0px; background-position: -150.0px -22.5px;"></td>
34 <tr style=
"height: 30.0px;">
35 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: 0px -150.0px;"></td>
36 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 180.0px; background-position: -22.5px -150.0px;"></td>
37 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 180.0px; background-position: -22.5px -150.0px;"></td>
38 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -150.0px -150.0px;"></td>
42 <col style=
"width: 30.0px;">
43 <col style=
"width: 90.0px;">
44 <col style=
"width: 90.0px;">
45 <col style=
"width: 30.0px;">
46 <tr style=
"height: 30.0px;">
47 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: 0px 0px;"></td>
48 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 160.0px; background-position: -27.0px -0.0px;"></td>
49 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 160.0px; background-position: -27.0px -0.0px;"></td>
50 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -130.0px 0px;"></td>
52 <tr style=
"height: 90.0px;">
53 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 144.0px; background-position: -0.0px -27.0px;"></td>
54 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 144.0px; background-position: -27.0px -27.0px;"></td>
55 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 144.0px; background-position: -27.0px -27.0px;"></td>
56 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 144.0px; background-position: -130.0px -27.0px;"></td>
58 <tr style=
"height: 90.0px;">
59 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 144.0px; background-position: -0.0px -27.0px;"></td>
60 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 144.0px; background-position: -27.0px -27.0px;"></td>
61 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 144.0px; background-position: -27.0px -27.0px;"></td>
62 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 144.0px; background-position: -130.0px -27.0px;"></td>
64 <tr style=
"height: 30.0px;">
65 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: 0px -130.0px;"></td>
66 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 160.0px; background-position: -27.0px -130.0px;"></td>
67 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 160.0px; background-position: -27.0px -130.0px;"></td>
68 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -130.0px -130.0px;"></td>
72 <col style=
"width: 30.0px;">
73 <col style=
"width: 36.0px;">
74 <col style=
"width: 36.0px;">
75 <col style=
"width: 36.0px;">
76 <col style=
"width: 36.0px;">
77 <col style=
"width: 36.0px;">
78 <col style=
"width: 30.0px;">
79 <tr style=
"height: 30.0px;">
80 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: 0px 0px;"></td>
81 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
82 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
83 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
84 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
85 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
86 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px 0px;"></td>
88 <tr style=
"height: 36.0px;">
89 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
90 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
91 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
92 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
93 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
94 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
95 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
97 <tr style=
"height: 36.0px;">
98 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
99 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
100 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
101 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
102 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
103 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
104 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
106 <tr style=
"height: 36.0px;">
107 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
108 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
109 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
110 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
111 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
112 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
113 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
115 <tr style=
"height: 36.0px;">
116 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
117 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
118 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
119 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
120 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
121 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
122 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
124 <tr style=
"height: 36.0px;">
125 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
126 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
127 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
128 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
129 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
130 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
131 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
133 <tr style=
"height: 30.0px;">
134 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: 0px -66.0px;"></td>
135 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
136 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
137 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
138 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
139 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
140 <td style=
"background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -66.0px;"></td>