OLD | NEW |
1 <html> | 1 <!DOCTYPE html> |
2 <head> | |
3 <script src="resources/srcset-helper.js"></script> | 2 <script src="resources/srcset-helper.js"></script> |
4 <style> | 3 <style> |
5 div { | 4 div { |
6 » box-sizing: border-box; | 5 box-sizing: border-box; |
7 width: 40px; | 6 width: 40px; |
8 height: 13px; | 7 height: 13px; |
9 border-style: solid; | 8 border-style: solid; |
10 } | 9 } |
11 | 10 |
12 .test1 { | 11 .test1 { |
13 border-image: -webkit-image-set(url('resources/Breakpoint.png') 1x, url('res
ources/Breakpoint-2x.png') 2x) 3 7 3 3 fill / 3px 7px 3px 3px; | 12 border-image: -webkit-image-set(url('resources/Breakpoint.png') 1x, url(
'resources/Breakpoint-2x.png') 2x) 3 7 3 3 fill / 3px 7px 3px 3px; |
14 } | 13 } |
15 | 14 |
16 .test2 { | 15 .test2 { |
17 border-image: -webkit-image-set(url('resources/Breakpoint.png') 1x, url('res
ources/Breakpoint-2x.png') 2x) 3 7 3 3 fill; | 16 border-image: -webkit-image-set(url('resources/Breakpoint.png') 1x, url(
'resources/Breakpoint-2x.png') 2x) 3 7 3 3 fill; |
18 border-width: 3px 7px 3px 3px; | 17 border-width: 3px 7px 3px 3px; |
19 } | 18 } |
20 | 19 |
21 .test3 { | 20 .test3 { |
22 border-image: url('resources/Breakpoint.png') 3 7 3 3 fill / 3px 7px 3px 3px
; | 21 border-image: url('resources/Breakpoint.png') 3 7 3 3 fill / 3px 7px 3px
3px; |
23 } | 22 } |
24 | 23 |
25 .test4 { | 24 .test4 { |
26 border-image: url('resources/Breakpoint.png') 3 7 3 3 fill; | 25 border-image: url('resources/Breakpoint.png') 3 7 3 3 fill; |
27 border-width: 3px 7px 3px 3px; | 26 border-width: 3px 7px 3px 3px; |
28 } | 27 } |
29 | 28 |
30 @media (-webkit-min-device-pixel-ratio: 2) { | 29 @media (-webkit-min-device-pixel-ratio: 2) { |
31 .test3, .test4 { | 30 .test3, .test4 { |
32 » border-image-source: url('resources/Breakpoint-2x.png'); | 31 » border-image-source: url('resources/Breakpoint-2x.png'); |
33 » border-image-slice: 6 14 6 6 fill; | 32 » border-image-slice: 6 14 6 6 fill; |
| 33 } |
34 } | 34 } |
35 } | |
36 </style> | 35 </style> |
37 </head> | |
38 | |
39 <body> | |
40 The first two tests should match the last two.<br><br> | 36 The first two tests should match the last two.<br><br> |
41 <div class="test1"></div><br> | 37 <div class="test1"></div><br> |
42 <div class="test2"></div><br> | 38 <div class="test2"></div><br> |
43 <div class="test3"></div><br> | 39 <div class="test3"></div><br> |
44 <div class="test4"></div><br> | 40 <div class="test4"></div><br> |
45 </body> | |
46 </html> | |
OLD | NEW |