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
|
<!DOCTYPE html>
<title>CSS Border Image: border-image-repeat: round (reference)</title>
<style type="text/css">
.container {
position: relative;
width: 96px;
height: 96px;
}
.container > div {
position: absolute;
width: 16px;
height: 16px;
background-image: url("../support/border.png");
background-size: 48px 48px;
}
.top { top: 0; }
.right { left: 80px; }
.bottom { top: 80px; }
.left { left: 0; }
.top-left-corner-tile { background-position: 0px 0px; }
.top-edge-tile { background-position: -16px 0px; }
.top-right-corner-tile { background-position: -32px 0px; }
.left-edge-tile { background-position: 0px -16px; }
.right-edge-tile { background-position: -32px -16px; }
.bottom-left-corner-tile { background-position: 0px -32px; }
.bottom-edge-tile { background-position: -16px -32px; }
.bottom-right-corner-tile { background-position: -32px -32px; }
.h-pos-0 { left: 16px; }
.h-pos-1 { left: 32px; }
.h-pos-2 { left: 48px; }
.h-pos-3 { left: 64px; }
.v-pos-0 { top: 16px; }
.v-pos-1 { top: 32px; }
.v-pos-2 { top: 48px; }
.v-pos-3 { top: 64px; }
</style>
<p>The test passes if diamonds in corners are red, and other diamonds are orange, there are 4 orange diamonds on each side.</p>
<div class="container">
<div class="top left top-left-corner-tile"></div>
<div class="top top-edge-tile h-pos-0"></div>
<div class="top top-edge-tile h-pos-1"></div>
<div class="top top-edge-tile h-pos-2"></div>
<div class="top top-edge-tile h-pos-3"></div>
<div class="top right top-right-corner-tile"></div>
<div class="right right-edge-tile v-pos-0"></div>
<div class="right right-edge-tile v-pos-1"></div>
<div class="right right-edge-tile v-pos-2"></div>
<div class="right right-edge-tile v-pos-3"></div>
<div class="bottom right bottom-right-corner-tile"></div>
<div class="bottom bottom-edge-tile h-pos-0"></div>
<div class="bottom bottom-edge-tile h-pos-1"></div>
<div class="bottom bottom-edge-tile h-pos-2"></div>
<div class="bottom bottom-edge-tile h-pos-3"></div>
<div class="bottom left bottom-left-corner-tile"></div>
<div class="left left-edge-tile v-pos-0"></div>
<div class="left left-edge-tile v-pos-1"></div>
<div class="left left-edge-tile v-pos-2"></div>
<div class="left left-edge-tile v-pos-3"></div>
</div>
|
