testing/web-platform/tests/css/css-backgrounds/border-image-slice-fill-001.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
93
94
95
96
97
98
99
100
101
102
103
104
105

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Backgrounds Test: border-image-slice with 'fill' keyword</title>

  <!--

  Created: February 19th 2023

  Last modified: February 28th 2023

  -->

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
  <link rel="help" href="http://www.w3.org/TR/css3-background/#border-image-slice">
  <link rel="match" href="reference/border-image-slice-fill-001-ref.html">

  <meta content="" name="flags">
  <meta content="This test checks the rendering process of selecting the middle part of the border-image to be preserved. Since 'border-image-slice' is '50', then the 8 surrounding areas of the border-image area are selecting the white areas of the border-image. The middle part must be filled with red and green area. In which case, only the horizontal center and the vertical center of the border-image must fill the middle area. Therefore, only the green 100x100 area of the border-image must be painted into the middle area." name="assert">
  <meta name="fuzzy" content="maxDifference=0-112; totalPixels=0-199" />

  <style>
  div#test
    {
      border: red solid 50px;
      border-image-repeat: repeat;
      border-image-slice: 50 fill;
      border-image-source: url("support/500x500-red-with-green-center.png");
      height: 100px;
      width: 100px;
   }

   /*

   This is how the border-image 500x500-red-with-green-center.png is painted:


   (0, 500) (50, 500)                 (200, 500)  (300, 500)                  (450, 500) (500, 500)
   + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
   |                                          ^                                          |
   |         White area                      50                    White area            |
   |                                          v                                          |
   |        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -        | (500, 450)
   |       | FAIL                             ^                                  |       |
   |       |                                  .                                  |       |
   |<-50-> |                                                                     |<-50-> |
   |       |                                  1                                  |       |
   |  W    |       Red area                                   Red area           |  W    |
   |  h    |                                  5                                  |  h    |
   |  i    |                                                                     |  i    |
   |  t    |                                  0                                  |  t    |
   |  e    |                                                                     |  e    |
   |       |                                  .                                  |       |
   |  a    |                                  v                                  |  a    |
   |  r    |                            ------------                             |  r    | (500, 300)
   |  e    |                           |            |                            |  e    |
   |  a    |       Red area            |    Green   |         Red area           |  a    |
   |       |                           |            |                            |       |
   |       |  <!- . . . 150 . . .  ->  |    area    |  <!- . . .  150  . . . ->  |       |
   |       |                           |            |                            |       |
   |       |                            ------------                             |       | (500, 200)
   |       |                                  ^                                  |       |
   |       |                                  .                                  |       |
   |       |                                                                     |       |
   |       |       Red area                   1               Red area           |       |
   |       |                                                                     |       |
   |       |                                  5                                  |       |
   |       |                                                                     |       |
   |       |                                  0                                  |       |
   |       |                                                                     |       |
   |       |                                  .                                  |       |
   |       |                                  v                                  |       |
   |        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -        | (500, 50)
   |                                          ^                                          |
   |         White area                      50                    White area            |
   |                                          v                                          |
   + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
   (0, 0) (50, 0)                     (200, 0)  (300, 0)                        (450, 0) (500, 0)

   */

  div#red-reference-under-test
    {
      background-color: red;
      bottom: 200px;
      height: 200px;
      position: relative;
      width: 200px;
      z-index: -1;
    }

  /*
     The purpose of div#red-reference-under-test in here
     is to make sure that the border belt is indeed painted
     with the 8 white areas of the border-image and
     !_not_! with transparent areas.
  */
  </style>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.

  <div id="test"></div>

  <div id="red-reference-under-test"></div>