layout/reftests/border-image/border-image-linear-gradient-repeat-round-3-ref.html

changeset 0
6474c204b198
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-3-ref.html	Wed Dec 31 06:09:35 2014 +0100
     1.3 @@ -0,0 +1,144 @@
     1.4 +<!DOCTYPE html>
     1.5 +<html lang="en-US">
     1.6 +<head>
     1.7 +<title>test of border-image-source: linear-gradient with border-image-slice</title>
     1.8 +<style>
     1.9 +table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
    1.10 +td { padding: 0; }
    1.11 +</style>
    1.12 +</head>
    1.13 +<body>
    1.14 +<table>
    1.15 +<col style="width: 30.0px;">
    1.16 +<col style="width: 90.0px;">
    1.17 +<col style="width: 90.0px;">
    1.18 +<col style="width: 30.0px;">
    1.19 +<tr style="height: 30.0px;">
    1.20 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: 0px 0px;"></td>
    1.21 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 180.0px; background-position: -22.5px -0.0px;"></td>
    1.22 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 180.0px; background-position: -22.5px -0.0px;"></td>
    1.23 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -150.0px 0px;"></td>
    1.24 +</tr>
    1.25 +<tr style="height: 90.0px;">
    1.26 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 135.0px; background-position: -0.0px -22.5px;"></td>
    1.27 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 135.0px; background-position: -22.5px -22.5px;"></td>
    1.28 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 135.0px; background-position: -22.5px -22.5px;"></td>
    1.29 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 135.0px; background-position: -150.0px -22.5px;"></td>
    1.30 +</tr>
    1.31 +<tr style="height: 90.0px;">
    1.32 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 135.0px; background-position: -0.0px -22.5px;"></td>
    1.33 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 135.0px; background-position: -22.5px -22.5px;"></td>
    1.34 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 135.0px; background-position: -22.5px -22.5px;"></td>
    1.35 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 135.0px; background-position: -150.0px -22.5px;"></td>
    1.36 +</tr>
    1.37 +<tr style="height: 30.0px;">
    1.38 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: 0px -150.0px;"></td>
    1.39 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 180.0px; background-position: -22.5px -150.0px;"></td>
    1.40 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 180.0px; background-position: -22.5px -150.0px;"></td>
    1.41 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -150.0px -150.0px;"></td>
    1.42 +</tr>
    1.43 +</table>
    1.44 +<table>
    1.45 +<col style="width: 30.0px;">
    1.46 +<col style="width: 90.0px;">
    1.47 +<col style="width: 90.0px;">
    1.48 +<col style="width: 30.0px;">
    1.49 +<tr style="height: 30.0px;">
    1.50 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: 0px 0px;"></td>
    1.51 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 160.0px; background-position: -27.0px -0.0px;"></td>
    1.52 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 160.0px; background-position: -27.0px -0.0px;"></td>
    1.53 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -130.0px 0px;"></td>
    1.54 +</tr>
    1.55 +<tr style="height: 90.0px;">
    1.56 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 144.0px; background-position: -0.0px -27.0px;"></td>
    1.57 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 144.0px; background-position: -27.0px -27.0px;"></td>
    1.58 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 144.0px; background-position: -27.0px -27.0px;"></td>
    1.59 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 144.0px; background-position: -130.0px -27.0px;"></td>
    1.60 +</tr>
    1.61 +<tr style="height: 90.0px;">
    1.62 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 144.0px; background-position: -0.0px -27.0px;"></td>
    1.63 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 144.0px; background-position: -27.0px -27.0px;"></td>
    1.64 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 144.0px; background-position: -27.0px -27.0px;"></td>
    1.65 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 144.0px; background-position: -130.0px -27.0px;"></td>
    1.66 +</tr>
    1.67 +<tr style="height: 30.0px;">
    1.68 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: 0px -130.0px;"></td>
    1.69 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 160.0px; background-position: -27.0px -130.0px;"></td>
    1.70 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 160.0px; background-position: -27.0px -130.0px;"></td>
    1.71 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -130.0px -130.0px;"></td>
    1.72 +</tr>
    1.73 +</table>
    1.74 +<table>
    1.75 +<col style="width: 30.0px;">
    1.76 +<col style="width: 36.0px;">
    1.77 +<col style="width: 36.0px;">
    1.78 +<col style="width: 36.0px;">
    1.79 +<col style="width: 36.0px;">
    1.80 +<col style="width: 36.0px;">
    1.81 +<col style="width: 30.0px;">
    1.82 +<tr style="height: 30.0px;">
    1.83 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: 0px 0px;"></td>
    1.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>
    1.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>
    1.86 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
    1.87 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
    1.88 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
    1.89 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px 0px;"></td>
    1.90 +</tr>
    1.91 +<tr style="height: 36.0px;">
    1.92 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
    1.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>
    1.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>
    1.95 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
    1.96 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
    1.97 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
    1.98 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
    1.99 +</tr>
   1.100 +<tr style="height: 36.0px;">
   1.101 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
   1.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>
   1.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>
   1.104 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
   1.105 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
   1.106 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
   1.107 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
   1.108 +</tr>
   1.109 +<tr style="height: 36.0px;">
   1.110 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
   1.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>
   1.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>
   1.113 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
   1.114 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
   1.115 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
   1.116 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
   1.117 +</tr>
   1.118 +<tr style="height: 36.0px;">
   1.119 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
   1.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>
   1.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>
   1.122 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
   1.123 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
   1.124 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
   1.125 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
   1.126 +</tr>
   1.127 +<tr style="height: 36.0px;">
   1.128 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
   1.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>
   1.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>
   1.131 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
   1.132 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
   1.133 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
   1.134 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
   1.135 +</tr>
   1.136 +<tr style="height: 30.0px;">
   1.137 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: 0px -66.0px;"></td>
   1.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>
   1.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>
   1.140 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
   1.141 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
   1.142 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
   1.143 +  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -66.0px;"></td>
   1.144 +</tr>
   1.145 +</table>
   1.146 +</body>
   1.147 +</html>

mercurial