1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3
4 <head>
5
6 <title>CSS Backgrounds and Borders Test: border-image-slice - <number></title>
7
8 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
9 <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-slice" title="6.2. Image Slicing: the 'border-image-slice' property">
10 <link rel="match" href="reference/ref-filled-green-100px-square.htm">
11 <meta name="flags" content="image">
12 <meta name="assert" content="Number values for 'border-image-slice' are pixels in the image: the width of the image for the horizontal (left and right) offsets, the height for vertical (top and bottom) offsets. 'border-image-slice' specifies inward offsets from the top, right, bottom, and left edges (in that order) of the image. In this test, the image serving as 'border-image-source' is a 100px by 100px image which has 5px of green at the top, 10px of green on the right, 15px of green at the bottom and 20px of green at the left; the remaining center (which has a width of 70px and a height of 80px) is all red.">
13
14 <style type="text/css">
15 div#test
16 {
17 border-color: red;
18 border-style: solid;
19 border-width: 15px 20px 35px 30px;
20 border-image-source: url("support/outline-5px-10px-15px-20px-green.png");
21 border-image-slice: 5 10 15 20; /* or 5% 10% 15% 20% : see border-image-slice-001 test */
22 border-image-width: 15% 20% 35% 30%;
23 /* 1 is default ; <number>s represent multiples of the corresponding
24 computed border-width; % unit is a percentage of height or width of border-box.*/
25 border-image-outset: 0; /* 0 is default */
26 border-image-repeat: repeat repeat;
27 /* stretch is default; since the green area we repeat is an
28 undifferentiated and homogeneous image of green, then 'repeat' or
29 'stretch' will be equivalent, will do and should cause equivalent
30 rendered layout. */
31
32 /*
33 Equivalent to this shorthand form (see border-image-slice-124 test):
34 border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 15% 20% 35% 30% / 0 repeat repeat;
35
36 or to this shorthand form (see border-image-slice-125 test):
37 border-image: url("support/outline-5px-10px-15px-20px-green.png") 5 10 15 20 / 15% 20% 35% 30% / 0 repeat repeat;
38
39 or to this shorthand form (see border-image-slice-126 test):
40 border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 1 1 1 1 / 0 repeat repeat;
41
42 or to this shorthand form (see border-image-slice-127 test):
43 border-image: url("support/outline-5px-10px-15px-20px-green.png") 5 10 15 20 / 1 1 1 1 / 0 repeat repeat;
44 */
45
46 width: 50px;
47 }
48
49 img {vertical-align: top;}
50
51 div#overlapped-red
52 {
53 background-color: red;
54 bottom: 100px;
55 height: 100px;
56 position: relative;
57 width: 100px;
58 z-index: -1;
59 }
60 </style>
61
62 </head>
63
64 <body>
65
66 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
67
68 <div id="test"><img src="support/50x50-green.png" alt="Image download support must be enabled"></div>
69
70 <div id="overlapped-red"></div>
71
72 </body>
73 </html>