Home Explore Help
Sign In
khronosschoty
/
palemoon-dev
Watch 2
Star 1
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: ac60e7ecec
Branches Tags
palemoon-dev
/
platform
/
layout
/
reftests
/
border-image
/
border-image-linear-gradient-repeat-round-2-ref.html

border-image-linear-gradient-repeat-round-2-ref.html 9.0 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en-US">
    3. 

  3. <head>
    4. 

  4. <title>test of border-image-source: linear-gradient with border-image-repeat</title>
    5. 

  5. <style>
    6. 

  6. table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
    7. 

  7. td { padding: 0; }
    8. 

  8. </style>
    9. 

  9. </head>
    10. 

  10. <body>
    11. 

  11. <table>
    12. 

  12. <col style="width: 30.0px;">
    13. 

  13. <col style="width: 60.0px;">
    14. 

  14. <col style="width: 60.0px;">
    15. 

  15. <col style="width: 60.0px;">
    16. 

  16. <col style="width: 30.0px;">
    17. 

  17. <tr style="height: 30.0px;">
    18. 

  18.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: 0px 0px;"></td>
    19. 

  19.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
    20. 

  20.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
    21. 

  21.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
    22. 

  22.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px 0px;"></td>
    23. 

  23. </tr>
    24. 

  24. <tr style="height: 60.0px;">
    25. 

  25.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
    26. 

  26.   <td style="background-image: white;"></td>
    27. 

  27.   <td style="background-image: white;"></td>
    28. 

  28.   <td style="background-image: white;"></td>
    29. 

  29.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
    30. 

  30. </tr>
    31. 

  31. <tr style="height: 60.0px;">
    32. 

  32.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
    33. 

  33.   <td style="background-image: white;"></td>
    34. 

  34.   <td style="background-image: white;"></td>
    35. 

  35.   <td style="background-image: white;"></td>
    36. 

  36.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
    37. 

  37. </tr>
    38. 

  38. <tr style="height: 60.0px;">
    39. 

  39.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
    40. 

  40.   <td style="background-image: white;"></td>
    41. 

  41.   <td style="background-image: white;"></td>
    42. 

  42.   <td style="background-image: white;"></td>
    43. 

  43.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
    44. 

  44. </tr>
    45. 

  45. <tr style="height: 30.0px;">
    46. 

  46.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: 0px -90.0px;"></td>
    47. 

  47.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
    48. 

  48.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
    49. 

  49.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
    50. 

  50.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -90.0px;"></td>
    51. 

  51. </tr>
    52. 

  52. </table>
    53. 

  53. <table>
    54. 

  54. <col style="width: 30.0px;">
    55. 

  55. <col style="width: 60.0px;">
    56. 

  56. <col style="width: 60.0px;">
    57. 

  57. <col style="width: 60.0px;">
    58. 

  58. <col style="width: 30.0px;">
    59. 

  59. <tr style="height: 30.0px;">
    60. 

  60.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: 0px 0px;"></td>
    61. 

  61.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
    62. 

  62.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
    63. 

  63.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
    64. 

  64.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px 0px;"></td>
    65. 

  65. </tr>
    66. 

  66. <tr style="height: 60.0px;">
    67. 

  67.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
    68. 

  68.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
    69. 

  69.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
    70. 

  70.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
    71. 

  71.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
    72. 

  72. </tr>
    73. 

  73. <tr style="height: 60.0px;">
    74. 

  74.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
    75. 

  75.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
    76. 

  76.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
    77. 

  77.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
    78. 

  78.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
    79. 

  79. </tr>
    80. 

  80. <tr style="height: 60.0px;">
    81. 

  81.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
    82. 

  82.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
    83. 

  83.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
    84. 

  84.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
    85. 

  85.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
    86. 

  86. </tr>
    87. 

  87. <tr style="height: 30.0px;">
    88. 

  88.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: 0px -90.0px;"></td>
    89. 

  89.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
    90. 

  90.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
    91. 

  91.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
    92. 

  92.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -90.0px;"></td>
    93. 

  93. </tr>
    94. 

  94. </table>
    95. 

  95. <table>
    96. 

  96. <col style="width: 60.0px;">
    97. 

  97. <col style="width: 120.0px;">
    98. 

  98. <col style="width: 60.0px;">
    99. 

  99. <tr style="height: 60.0px;">
    100. 

  100.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: 0px 0px;"></td>
    101. 

  101.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 480.0px; background-position: -20.0px -0.0px;"></td>
    102. 

  102.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: -420.0px 0px;"></td>
    103. 

  103. </tr>
    104. 

  104. <tr style="height: 120.0px;">
    105. 

  105.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 160.0px; background-position: -0.0px -20.0px;"></td>
    106. 

  106.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -20.0px -20.0px;"></td>
    107. 

  107.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 160.0px; background-position: -420.0px -20.0px;"></td>
    108. 

  108. </tr>
    109. 

  109. <tr style="height: 60.0px;">
    110. 

  110.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: 0px -420.0px;"></td>
    111. 

  111.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 480.0px; background-position: -20.0px -420.0px;"></td>
    112. 

  112.   <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: -420.0px -420.0px;"></td>
    113. 

  113. </tr>
    114. 

  114. </table>
    115. 

  115. </body>
    116. 

  116. </html>
    117. 

  117.