OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <title>Zoomed SVG in list-style-image</title> | 2 <title>Zoomed SVG and raster image in list-style-image</title> |
3 <script src="../../resources/testharness.js"></script> | 3 <script src="../../resources/testharness.js"></script> |
4 <script src="../../resources/testharnessreport.js"></script> | 4 <script src="../../resources/testharnessreport.js"></script> |
5 <style> | 5 <style> |
6 ul { font-family: Ahem; } | 6 ul { font-family: Ahem; } |
7 ul li { | 7 ul li { |
8 list-style-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
00/svg' viewBox='0 0 1 1'><rect width='1' height='1' fill='green'/></svg>"); | 8 font-size: 30px; |
9 font-size: 30px; | 9 color: green; |
10 color: green; | 10 list-style-position: inside; |
11 list-style-position: inside; | 11 line-height: 1em; |
12 line-height: 1em; | 12 } |
13 } | 13 ul li.svg { |
| 14 list-style-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000
/svg' viewBox='0 0 1 1'><rect width='1' height='1' fill='green'/></svg>"); |
| 15 } |
| 16 ul li.png { |
| 17 list-style-image: url("resources/green15x15.png"); |
| 18 } |
14 </style> | 19 </style> |
15 <ul><li></ul> | 20 <ul><li class="svg"><li class="png"></ul> |
16 <script> | 21 <script> |
17 var ul = document.querySelector('ul'); | 22 var ul = document.querySelector('ul'); |
18 [ 2, 3, 4, 5, 1].forEach(function(zoom) { | 23 [ 2, 3, 4, 5, 0.5, 0.2, 1].forEach(function(zoom) { |
19 test(function() { | 24 test(function() { |
20 document.body.style.zoom = zoom; | 25 document.body.style.zoom = zoom; |
21 assert_approx_equals(ul.getBoundingClientRect().height, 30, 0.5); | 26 assert_approx_equals(ul.getBoundingClientRect().height, 60, 0.5); |
22 }, 'Zoom to ' + zoom + " and list height should be equal to line-height"); | 27 }, 'Zoom to ' + zoom + " and list height should be equal to line-height"); |
23 }); | 28 }); |
24 </script> | 29 </script> |
OLD | NEW |