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'"; | |
58 | 56 |
59 shouldBe("window.getComputedStyle(fixedElement).top", "'100p
x'"); | 57 shouldBe("window.getComputedStyle(fixedElement).top", "'100p
x'"); |
60 shouldBe("window.getComputedStyle(fixedElement).right", "'-1
00px'"); | 58 shouldBe("window.getComputedStyle(fixedElement).right", "'10
0px'"); |
61 shouldBe("window.getComputedStyle(fixedElement).bottom", "'-
100px'"); | 59 shouldBe("window.getComputedStyle(fixedElement).bottom", "'1
00px'"); |
62 shouldBe("window.getComputedStyle(fixedElement).left", "'100
px'"); | 60 shouldBe("window.getComputedStyle(fixedElement).left", "'100
px'"); |
63 | 61 |
64 shouldBe("window.getComputedStyle(percentageElement).top", "
'50px'"); | 62 shouldBe("window.getComputedStyle(percentageElement).top", "
'50px'"); |
65 shouldBe("window.getComputedStyle(percentageElement).right",
"'100px'"); | 63 shouldBe("window.getComputedStyle(percentageElement).right",
"'100px'"); |
66 shouldBe("window.getComputedStyle(percentageElement).bottom"
, "'50px'"); | 64 shouldBe("window.getComputedStyle(percentageElement).bottom"
, "'50px'"); |
67 shouldBe("window.getComputedStyle(percentageElement).left",
"'100px'"); | 65 shouldBe("window.getComputedStyle(percentageElement).left",
"'100px'"); |
68 | 66 |
69 shouldBe("window.getComputedStyle(viewportElement).top", win
dowHeight); | 67 shouldBe("window.getComputedStyle(viewportElement).top", win
dowHeight); |
70 shouldBe("window.getComputedStyle(viewportElement).right", w
indowMinusWidth); | 68 shouldBe("window.getComputedStyle(viewportElement).right", w
indowWidth); |
71 shouldBe("window.getComputedStyle(viewportElement).bottom",
windowMinusHeight); | 69 shouldBe("window.getComputedStyle(viewportElement).bottom",
windowHeight); |
72 shouldBe("window.getComputedStyle(viewportElement).left", wi
ndowWidth); | 70 shouldBe("window.getComputedStyle(viewportElement).left", wi
ndowWidth); |
73 } | 71 } |
74 test(0.5); | 72 test(0.5); |
75 test(1.25); | 73 test(1.25); |
76 test(1.0); | 74 test(1.0); |
77 </script> | 75 </script> |
78 </body> | 76 </body> |
79 </html> | 77 </html> |
OLD | NEW |