OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <meta charset="utf-8"> | 4 <meta charset="utf-8"> |
5 <script src="../../../resources/js-test.js"></script> | 5 <script src="../../../resources/js-test.js"></script> |
6 </head> | 6 </head> |
7 <body> | 7 <body> |
8 <p>Test computed style for the border-image property and sub-properties</p> | 8 <p>Test computed style for the border-image property and sub-properties</p> |
9 <div id="console"></div> | 9 <div id="console"></div> |
10 <script> | 10 <script> |
11 | 11 |
12 var testDiv = document.createElement('div'); | 12 var testDiv = document.createElement('div'); |
13 testDiv.style.borderWidth = '10px'; | 13 testDiv.style.borderWidth = '10px'; |
14 document.body.appendChild(testDiv); | 14 document.body.appendChild(testDiv); |
15 | 15 |
16 function computedBorderImageStyle(borderImageStyle, property) { | 16 function computedBorderImageStyle(borderImageStyle, property) { |
17 testDiv.style.borderImage = 'none'; | 17 testDiv.style.borderImage = 'none'; |
18 testDiv.style.borderImage = borderImageStyle; | 18 testDiv.style.borderImage = borderImageStyle; |
19 return window.getComputedStyle(testDiv).getPropertyValue(property); | 19 return window.getComputedStyle(testDiv).getPropertyValue(property); |
20 } | 20 } |
21 | 21 |
22 function checkComputedStyleValue() { | 22 function checkComputedStyleValue() { |
23 var before = window.getComputedStyle(testDiv).getPropertyValue('border-image
'); | 23 var before = window.getComputedStyle(testDiv).getPropertyValue('border-image
'); |
24 testDiv.style.borderImage = 'none'; | 24 testDiv.style.borderImage = 'none'; |
25 testDiv.style.borderImage = before; | 25 testDiv.style.borderImage = before; |
26 return (window.getComputedStyle(testDiv).getPropertyValue('border-image') ==
before); | 26 return (window.getComputedStyle(testDiv).getPropertyValue('border-image') ==
before); |
27 } | 27 } |
28 | 28 |
29 shouldBe("computedBorderImageStyle('12 11 12 11', 'border-image-slice')", "'12 1
1'"); | 29 shouldBeEqualToString("computedBorderImageStyle('12 11 12 11', 'border-image-sli
ce')", '12 11'); |
30 shouldBe("computedBorderImageStyle('12 11 12 11', 'border-image')", "'none'"); | 30 shouldBeEqualToString("computedBorderImageStyle('12 11 12 11', 'border-image')",
'none'); |
31 shouldBe("checkComputedStyleValue()", "true"); | 31 shouldBe("checkComputedStyleValue()", "true"); |
32 shouldBe("computedBorderImageStyle('url(test.png) 12 11 repeat stretch', 'border
-image-slice')", "'12 11'"); | 32 shouldBeEqualToString("computedBorderImageStyle('url(test.png) 12 11 repeat stre
tch', 'border-image-slice')", '12 11'); |
33 shouldBe("computedBorderImageStyle('url(dummy://test.png) 12 11 repeat stretch',
'border-image')", "'url(dummy://test.png) 12 11 / 1 / 0px repeat stretch'"); | 33 shouldBeEqualToString("computedBorderImageStyle('url(dummy://test.png) 12 11 rep
eat stretch', 'border-image')", 'url("dummy://test.png") 12 11 / 1 / 0px repeat
stretch'); |
34 shouldBe("checkComputedStyleValue()", "true"); | 34 shouldBe("checkComputedStyleValue()", "true"); |
35 shouldBe("computedBorderImageStyle('url(test.png) 1 2 3 4 repeat stretch', 'bord
er-image-slice')", "'1 2 3 4'"); | 35 shouldBeEqualToString("computedBorderImageStyle('url(test.png) 1 2 3 4 repeat st
retch', 'border-image-slice')", '1 2 3 4'); |
36 shouldBe("computedBorderImageStyle('url(dummy://test.png) 1 2 3 4 repeat stretch
', 'border-image')", "'url(dummy://test.png) 1 2 3 4 / 1 / 0px repeat stretch'")
; | 36 shouldBeEqualToString("computedBorderImageStyle('url(dummy://test.png) 1 2 3 4 r
epeat stretch', 'border-image')", 'url("dummy://test.png") 1 2 3 4 / 1 / 0px rep
eat stretch'); |
37 shouldBe("checkComputedStyleValue()", "true"); | 37 shouldBe("checkComputedStyleValue()", "true"); |
38 shouldBe("computedBorderImageStyle('url(test.png) 12 repeat stretch', 'border-im
age-slice')", "'12'"); | 38 shouldBeEqualToString("computedBorderImageStyle('url(test.png) 12 repeat stretch
', 'border-image-slice')", '12'); |
39 shouldBe("computedBorderImageStyle('url(test.png) 10 10 5 5 repeat stretch', 'bo
rder-image-slice')", "'10 10 5 5'"); | 39 shouldBeEqualToString("computedBorderImageStyle('url(test.png) 10 10 5 5 repeat
stretch', 'border-image-slice')", '10 10 5 5'); |
40 shouldBe("computedBorderImageStyle('url(test.png) 10 a b c repeat stretch', 'bor
der-image-slice')", "'100%'"); | 40 shouldBeEqualToString("computedBorderImageStyle('url(test.png) 10 a b c repeat s
tretch', 'border-image-slice')", '100%'); |
41 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 a b c repeat stretc
h', 'border-image')", "'none'"); | 41 shouldBeEqualToString("computedBorderImageStyle('url(dummy://test.png) 10 a b c
repeat stretch', 'border-image')", 'none'); |
42 shouldBe("checkComputedStyleValue()", "true"); | 42 shouldBe("checkComputedStyleValue()", "true"); |
43 shouldBe("computedBorderImageStyle('url(test.png) 10 20 fill', 'border-image-sli
ce')", "'10 20 fill'"); | 43 shouldBeEqualToString("computedBorderImageStyle('url(test.png) 10 20 fill', 'bor
der-image-slice')", '10 20 fill'); |
44 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 20 fill', 'border-i
mage')", "'url(dummy://test.png) 10 20 fill / 1 / 0px stretch'"); | 44 shouldBeEqualToString("computedBorderImageStyle('url(dummy://test.png) 10 20 fil
l', 'border-image')", 'url("dummy://test.png") 10 20 fill / 1 / 0px stretch'); |
45 shouldBe("checkComputedStyleValue()", "true"); | 45 shouldBe("checkComputedStyleValue()", "true"); |
46 | 46 |
47 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 10 10 10 repeat str
etch', 'border-image-source')", "'url(dummy://test.png)'"); | 47 shouldBeEqualToString("computedBorderImageStyle('url(dummy://test.png) 10 10 10
10 repeat stretch', 'border-image-source')", 'url("dummy://test.png")'); |
48 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 10 10 10 repeat str
etch', 'border-image')", "'url(dummy://test.png) 10 / 1 / 0px repeat stretch'"); | 48 shouldBeEqualToString("computedBorderImageStyle('url(dummy://test.png) 10 10 10
10 repeat stretch', 'border-image')", 'url("dummy://test.png") 10 / 1 / 0px repe
at stretch'); |
49 shouldBe("checkComputedStyleValue()", "true"); | 49 shouldBe("checkComputedStyleValue()", "true"); |
50 | 50 |
51 shouldBe("computedBorderImageStyle('url(test.png) 10', 'border-image-repeat')",
"'stretch'"); | 51 shouldBeEqualToString("computedBorderImageStyle('url(test.png) 10', 'border-imag
e-repeat')", 'stretch'); |
52 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10', 'border-image')",
"'url(dummy://test.png) 10 / 1 / 0px stretch'"); | 52 shouldBeEqualToString("computedBorderImageStyle('url(dummy://test.png) 10', 'bor
der-image')", 'url("dummy://test.png") 10 / 1 / 0px stretch'); |
53 shouldBe("checkComputedStyleValue()", "true"); | 53 shouldBe("checkComputedStyleValue()", "true"); |
54 shouldBe("computedBorderImageStyle('url(test.png) 10 stretch', 'border-image-rep
eat')", "'stretch'"); | 54 shouldBeEqualToString("computedBorderImageStyle('url(test.png) 10 stretch', 'bor
der-image-repeat')", 'stretch'); |
55 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 stretch', 'border-i
mage')", "'url(dummy://test.png) 10 / 1 / 0px stretch'"); | 55 shouldBeEqualToString("computedBorderImageStyle('url(dummy://test.png) 10 stretc
h', 'border-image')", 'url("dummy://test.png") 10 / 1 / 0px stretch'); |
56 shouldBe("checkComputedStyleValue()", "true"); | 56 shouldBe("checkComputedStyleValue()", "true"); |
57 shouldBe("computedBorderImageStyle('url(test.png) 10 kittens', 'border-image-rep
eat')", "'stretch'"); | 57 shouldBeEqualToString("computedBorderImageStyle('url(test.png) 10 kittens', 'bor
der-image-repeat')", 'stretch'); |
58 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 kittens', 'border-i
mage')", "'none'"); | 58 shouldBeEqualToString("computedBorderImageStyle('url(dummy://test.png) 10 kitten
s', 'border-image')", 'none'); |
59 shouldBe("checkComputedStyleValue()", "true"); | 59 shouldBe("checkComputedStyleValue()", "true"); |
60 shouldBe("computedBorderImageStyle('url(test.png) 10 stretch stretch fill', 'bor
der-image-repeat')", "'stretch'"); | 60 shouldBeEqualToString("computedBorderImageStyle('url(test.png) 10 stretch stretc
h fill', 'border-image-repeat')", 'stretch'); |
61 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 stretch stretch fil
l', 'border-image')", "'none'"); | 61 shouldBeEqualToString("computedBorderImageStyle('url(dummy://test.png) 10 stretc
h stretch fill', 'border-image')", 'none'); |
62 shouldBe("checkComputedStyleValue()", "true"); | 62 shouldBe("checkComputedStyleValue()", "true"); |
63 shouldBe("computedBorderImageStyle('url(test.png) 10 repeat stretch', 'border-im
age-repeat')", "'repeat stretch'"); | 63 shouldBeEqualToString("computedBorderImageStyle('url(test.png) 10 repeat stretch
', 'border-image-repeat')", 'repeat stretch'); |
64 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 repeat stretch', 'b
order-image')", "'url(dummy://test.png) 10 / 1 / 0px repeat stretch'"); | 64 shouldBeEqualToString("computedBorderImageStyle('url(dummy://test.png) 10 repeat
stretch', 'border-image')", 'url("dummy://test.png") 10 / 1 / 0px repeat stretc
h'); |
65 shouldBe("checkComputedStyleValue()", "true"); | 65 shouldBe("checkComputedStyleValue()", "true"); |
66 shouldBe("computedBorderImageStyle('url(test.png) 10 round space', 'border-image
-repeat')", "'round space'"); | 66 shouldBeEqualToString("computedBorderImageStyle('url(test.png) 10 round space',
'border-image-repeat')", 'round space'); |
67 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 round space', 'bord
er-image')", "'url(dummy://test.png) 10 / 1 / 0px round space'"); | 67 shouldBeEqualToString("computedBorderImageStyle('url(dummy://test.png) 10 round
space', 'border-image')", 'url("dummy://test.png") 10 / 1 / 0px round space'); |
68 shouldBe("checkComputedStyleValue()", "true"); | 68 shouldBe("checkComputedStyleValue()", "true"); |
69 | 69 |
70 shouldBe("computedBorderImageStyle('url(test.png) 10 / 13px 1.5em 1em 10px', 'bo
rder-image-width')", "'13px 24px 16px 10px'"); | 70 shouldBeEqualToString("computedBorderImageStyle('url(test.png) 10 / 13px 1.5em 1
em 10px', 'border-image-width')", '13px 24px 16px 10px'); |
71 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 / 13px 1.5em 1em 10
px', 'border-image')", "'url(dummy://test.png) 10 / 13px 24px 16px 10px / 0px st
retch'"); | 71 shouldBeEqualToString("computedBorderImageStyle('url(dummy://test.png) 10 / 13px
1.5em 1em 10px', 'border-image')", 'url("dummy://test.png") 10 / 13px 24px 16px
10px / 0px stretch'); |
72 shouldBe("checkComputedStyleValue()", "true"); | 72 shouldBe("checkComputedStyleValue()", "true"); |
73 shouldBe("computedBorderImageStyle('url(test.png) 10 / 14px 10%', 'border-image-
width')", "'14px 10%'"); | 73 shouldBeEqualToString("computedBorderImageStyle('url(test.png) 10 / 14px 10%', '
border-image-width')", '14px 10%'); |
74 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 / 14px 10%', 'borde
r-image')", "'url(dummy://test.png) 10 / 14px 10% / 0px stretch'"); | 74 shouldBeEqualToString("computedBorderImageStyle('url(dummy://test.png) 10 / 14px
10%', 'border-image')", 'url("dummy://test.png") 10 / 14px 10% / 0px stretch'); |
75 shouldBe("checkComputedStyleValue()", "true"); | 75 shouldBe("checkComputedStyleValue()", "true"); |
76 shouldBe("computedBorderImageStyle('url(test.png) 10 / 13px / 11px', 'border-ima
ge-outset')", "'11px'"); | 76 shouldBeEqualToString("computedBorderImageStyle('url(test.png) 10 / 13px / 11px'
, 'border-image-outset')", '11px'); |
77 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 / 13px / 11px', 'bo
rder-image')", "'url(dummy://test.png) 10 / 13px / 11px stretch'"); | 77 shouldBeEqualToString("computedBorderImageStyle('url(dummy://test.png) 10 / 13px
/ 11px', 'border-image')", 'url("dummy://test.png") 10 / 13px / 11px stretch'); |
78 shouldBe("checkComputedStyleValue()", "true"); | 78 shouldBe("checkComputedStyleValue()", "true"); |
79 | 79 |
80 shouldBe("computedBorderImageStyle('url(test.png) 10 / 13px / 11px repeat stretc
h', 'border-image-outset')", "'11px'"); | 80 shouldBeEqualToString("computedBorderImageStyle('url(test.png) 10 / 13px / 11px
repeat stretch', 'border-image-outset')", '11px'); |
81 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 / 13px / 11px repea
t stretch', 'border-image')", "'url(dummy://test.png) 10 / 13px / 11px repeat st
retch'"); | 81 shouldBeEqualToString("computedBorderImageStyle('url(dummy://test.png) 10 / 13px
/ 11px repeat stretch', 'border-image')", 'url("dummy://test.png") 10 / 13px /
11px repeat stretch'); |
82 shouldBe("checkComputedStyleValue()", "true"); | 82 shouldBe("checkComputedStyleValue()", "true"); |
83 | 83 |
84 </script> | 84 </script> |
85 </body> | 85 </body> |
86 </html> | 86 </html> |
OLD | NEW |