OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <style> | 4 <style> |
5 #container { | 5 #container { |
6 width: 500px; | 6 width: 500px; |
7 height: 500px; | 7 height: 500px; |
8 position: relative; | 8 position: relative; |
9 } | 9 } |
10 #container > div { | 10 #container > div { |
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
46 </div> | 46 </div> |
47 <script> | 47 <script> |
48 var fixedElement = document.getElementById('test-fixed'); | 48 var fixedElement = document.getElementById('test-fixed'); |
49 var percentageElement = document.getElementById('test-percentage'); | 49 var percentageElement = document.getElementById('test-percentage'); |
50 var viewportElement = document.getElementById('test-viewport'); | 50 var viewportElement = document.getElementById('test-viewport'); |
51 function test(zoomLevel) | 51 function test(zoomLevel) |
52 { | 52 { |
53 document.body.style.zoom = zoomLevel; | 53 document.body.style.zoom = zoomLevel; |
54 var windowWidth = "'" + (window.innerWidth / 10) + "px'"; | 54 var windowWidth = "'" + (window.innerWidth / 10) + "px'"; |
55 var windowHeight = "'" + (window.innerHeight / 10) + "px'"; | 55 var windowHeight = "'" + (window.innerHeight / 10) + "px'"; |
| 56 var windowMinusWidth = "'-" + (window.innerWidth / 10) + "px
'"; |
| 57 var windowMinusHeight = "'-" + (window.innerHeight / 10) + "
px'"; |
56 | 58 |
57 shouldBe("window.getComputedStyle(fixedElement).top", "'100p
x'"); | 59 shouldBe("window.getComputedStyle(fixedElement).top", "'100p
x'"); |
58 shouldBe("window.getComputedStyle(fixedElement).right", "'10
0px'"); | 60 shouldBe("window.getComputedStyle(fixedElement).right", "'-1
00px'"); |
59 shouldBe("window.getComputedStyle(fixedElement).bottom", "'1
00px'"); | 61 shouldBe("window.getComputedStyle(fixedElement).bottom", "'-
100px'"); |
60 shouldBe("window.getComputedStyle(fixedElement).left", "'100
px'"); | 62 shouldBe("window.getComputedStyle(fixedElement).left", "'100
px'"); |
61 | 63 |
62 shouldBe("window.getComputedStyle(percentageElement).top", "
'50px'"); | 64 shouldBe("window.getComputedStyle(percentageElement).top", "
'50px'"); |
63 shouldBe("window.getComputedStyle(percentageElement).right",
"'100px'"); | 65 shouldBe("window.getComputedStyle(percentageElement).right",
"'100px'"); |
64 shouldBe("window.getComputedStyle(percentageElement).bottom"
, "'50px'"); | 66 shouldBe("window.getComputedStyle(percentageElement).bottom"
, "'50px'"); |
65 shouldBe("window.getComputedStyle(percentageElement).left",
"'100px'"); | 67 shouldBe("window.getComputedStyle(percentageElement).left",
"'100px'"); |
66 | 68 |
67 shouldBe("window.getComputedStyle(viewportElement).top", win
dowHeight); | 69 shouldBe("window.getComputedStyle(viewportElement).top", win
dowHeight); |
68 shouldBe("window.getComputedStyle(viewportElement).right", w
indowWidth); | 70 shouldBe("window.getComputedStyle(viewportElement).right", w
indowMinusWidth); |
69 shouldBe("window.getComputedStyle(viewportElement).bottom",
windowHeight); | 71 shouldBe("window.getComputedStyle(viewportElement).bottom",
windowMinusHeight); |
70 shouldBe("window.getComputedStyle(viewportElement).left", wi
ndowWidth); | 72 shouldBe("window.getComputedStyle(viewportElement).left", wi
ndowWidth); |
71 } | 73 } |
72 test(0.5); | 74 test(0.5); |
73 test(1.25); | 75 test(1.25); |
74 test(1.0); | 76 test(1.0); |
75 </script> | 77 </script> |
76 </body> | 78 </body> |
77 </html> | 79 </html> |
OLD | NEW |