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-source: url('resources/Breakpoint-2x.png'); | 12 border-image-source: url('resources/Breakpoint-2x.png'); |
14 border-image-slice: 6 14 6 6 fill; | 13 border-image-slice: 6 14 6 6 fill; |
15 border-width: 3px 7px 3px 3px; | 14 border-width: 3px 7px 3px 3px; |
16 } | 15 } |
17 | 16 |
18 .test2 { | 17 .test2 { |
19 border-image-source: url('resources/Breakpoint-2x.png'); | 18 border-image-source: url('resources/Breakpoint-2x.png'); |
20 border-image-slice: 6 14 6 6 fill; | 19 border-image-slice: 6 14 6 6 fill; |
21 border-width: 3px 7px 3px 3px; | 20 border-width: 3px 7px 3px 3px; |
22 } | 21 } |
23 | 22 |
24 .test3 { | 23 .test3 { |
25 border-image: url('resources/Breakpoint.png') 3 7 3 3 fill / 3px 7px 3px 3px
; | 24 border-image: url('resources/Breakpoint.png') 3 7 3 3 fill / 3px 7px 3px
3px; |
26 } | 25 } |
27 | 26 |
28 .test4 { | 27 .test4 { |
29 border-image: url('resources/Breakpoint.png') 3 7 3 3 fill; | 28 border-image: url('resources/Breakpoint.png') 3 7 3 3 fill; |
30 border-width: 3px 7px 3px 3px; | 29 border-width: 3px 7px 3px 3px; |
31 } | 30 } |
32 | 31 |
33 @media (-webkit-min-device-pixel-ratio: 2) { | 32 @media (-webkit-min-device-pixel-ratio: 2) { |
34 .test3, .test4 { | 33 .test3, .test4 { |
35 » border-image-source: url('resources/Breakpoint-2x.png'); | 34 » border-image-source: url('resources/Breakpoint-2x.png'); |
36 » border-image-slice: 6 14 6 6 fill; | 35 » border-image-slice: 6 14 6 6 fill; |
| 36 } |
37 } | 37 } |
38 } | |
39 </style> | 38 </style> |
40 </head> | |
41 | |
42 <body> | |
43 The first two tests should match the last two.<br><br> | 39 The first two tests should match the last two.<br><br> |
44 <div class="test1"></div><br> | 40 <div class="test1"></div><br> |
45 <div class="test2"></div><br> | 41 <div class="test2"></div><br> |
46 <div class="test3"></div><br> | 42 <div class="test3"></div><br> |
47 <div class="test4"></div><br> | 43 <div class="test4"></div><br> |
48 </body> | |
49 </html> | |
OLD | NEW |