border-image-repeating-linear-gradient-repeat-round-2-ref.html (10400B)
1 <!DOCTYPE html> 2 <html lang="en-US"> 3 <head> 4 <title>test of border-image-source: linear-gradient with border-image-repeat</title> 5 <style> 6 table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; } 7 td { padding: 0; } 8 </style> 9 </head> 10 <body> 11 <table> 12 <col style="width: 30.0px;"> 13 <col style="width: 60.0px;"> 14 <col style="width: 60.0px;"> 15 <col style="width: 60.0px;"> 16 <col style="width: 30.0px;"> 17 <tr style="height: 30.0px;"> 18 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: 0px 0px;"></td> 19 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td> 20 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td> 21 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td> 22 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px 0px;"></td> 23 </tr> 24 <tr style="height: 60.0px;"> 25 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td> 26 <td style="background-image: white;"></td> 27 <td style="background-image: white;"></td> 28 <td style="background-image: white;"></td> 29 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td> 30 </tr> 31 <tr style="height: 60.0px;"> 32 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td> 33 <td style="background-image: white;"></td> 34 <td style="background-image: white;"></td> 35 <td style="background-image: white;"></td> 36 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td> 37 </tr> 38 <tr style="height: 60.0px;"> 39 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td> 40 <td style="background-image: white;"></td> 41 <td style="background-image: white;"></td> 42 <td style="background-image: white;"></td> 43 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td> 44 </tr> 45 <tr style="height: 30.0px;"> 46 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: 0px -90.0px;"></td> 47 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td> 48 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td> 49 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td> 50 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px -90.0px;"></td> 51 </tr> 52 </table> 53 <table> 54 <col style="width: 30.0px;"> 55 <col style="width: 60.0px;"> 56 <col style="width: 60.0px;"> 57 <col style="width: 60.0px;"> 58 <col style="width: 30.0px;"> 59 <tr style="height: 30.0px;"> 60 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: 0px 0px;"></td> 61 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td> 62 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td> 63 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td> 64 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px 0px;"></td> 65 </tr> 66 <tr style="height: 60.0px;"> 67 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td> 68 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td> 69 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td> 70 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td> 71 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td> 72 </tr> 73 <tr style="height: 60.0px;"> 74 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td> 75 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td> 76 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td> 77 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td> 78 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td> 79 </tr> 80 <tr style="height: 60.0px;"> 81 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td> 82 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td> 83 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td> 84 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td> 85 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td> 86 </tr> 87 <tr style="height: 30.0px;"> 88 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: 0px -90.0px;"></td> 89 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td> 90 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td> 91 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td> 92 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px -90.0px;"></td> 93 </tr> 94 </table> 95 <table> 96 <col style="width: 60.0px;"> 97 <col style="width: 120.0px;"> 98 <col style="width: 60.0px;"> 99 <tr style="height: 60.0px;"> 100 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 480.0px 480.0px; background-position: 0px 0px;"></td> 101 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 160.0px 480.0px; background-position: -20.0px -0.0px;"></td> 102 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 480.0px 480.0px; background-position: -420.0px 0px;"></td> 103 </tr> 104 <tr style="height: 120.0px;"> 105 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 480.0px 160.0px; background-position: -0.0px -20.0px;"></td> 106 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 160.0px 160.0px; background-position: -20.0px -20.0px;"></td> 107 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 480.0px 160.0px; background-position: -420.0px -20.0px;"></td> 108 </tr> 109 <tr style="height: 60.0px;"> 110 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 480.0px 480.0px; background-position: 0px -420.0px;"></td> 111 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 160.0px 480.0px; background-position: -20.0px -420.0px;"></td> 112 <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 480.0px 480.0px; background-position: -420.0px -420.0px;"></td> 113 </tr> 114 </table> 115 </body> 116 </html>