774fd595ff7a3ef356cef05058102ddb1dc772a7
[WebKit-https.git] / LayoutTests / fast / css / object-position / parsing-object-position.html
1 <!DOCTYPE html>
2 <html>
3     <head>
4         <script src="../../../resources/js-test-pre.js"></script>
5     </head>
6     <body>
7         <script>
8             description("This tests checks that all of the input values for object-position parse correctly.");
9
10             function test(value)
11             {
12                 var div = document.createElement("div");
13                 div.setAttribute("style", value);
14                 document.body.appendChild(div);
15
16                 var result = div.style.getPropertyValue("object-position");
17                 document.body.removeChild(div);
18                 return result;
19             }
20
21             function testComputedStyle(value)
22             {
23                 var div = document.createElement("div");
24                 div.setAttribute("style", value);
25                 document.body.appendChild(div);
26
27                 var result = window.getComputedStyle(div).objectPosition;
28                 document.body.removeChild(div);
29                 return result;
30             }
31
32             shouldBe('testComputedStyle(";")', '"50% 50%"');
33             shouldBe('test("object-position: inherit;")', '"inherit"');
34             shouldBe('test("object-position: initial;")', '"initial"');
35             
36             shouldBeEqualToString('test("object-position: 23px;")', '23px 50%');
37             shouldBeEqualToString('test("object-position: center 23px;")', '50% 23px');
38             shouldBeEqualToString('test("object-position: 50% 23px;")', '50% 23px');
39             shouldBeEqualToString('test("object-position: 50% left;")', '');
40             
41             shouldBeEqualToString('test("object-position: left 10px top 15px;")', 'left 10px top 15px');
42             shouldBeEqualToString('test("object-position: right 10px bottom 15px;")', 'right 10px bottom 15px');
43
44             shouldBeEqualToString('testComputedStyle("object-position: bottom 20%;")', '50% 50%');
45             shouldBeEqualToString('testComputedStyle("object-position: right 20%;")', '100% 20%');
46             shouldBeEqualToString('testComputedStyle("object-position: right")', '100% 50%');
47             shouldBeEqualToString('testComputedStyle("object-position: center bottom 20%;")', '50% 80%');
48             shouldBeEqualToString('testComputedStyle("object-position: right bottom")', '100% 100%');
49
50             shouldBeEqualToString('testComputedStyle("object-position: left 10px top 15px;")', '10px 15px');
51             shouldBeEqualToString('testComputedStyle("object-position: right 10px bottom 15px;")', 'calc(100% - 10px) calc(100% - 15px)');
52             shouldBeEqualToString('testComputedStyle("object-position: bottom 20% right -20px;")', 'calc(100% - -20px) 80%');
53             shouldBeEqualToString('testComputedStyle("object-position: calc(100% - 20px) calc(100% - 10%)")', 'calc(100% - 20px) 90%');
54             shouldBeEqualToString('testComputedStyle("object-position: right calc(100% - 20px) bottom calc(100% - 10%)")', 'calc(100% - (100% - 20px)) 10%');
55             
56         </script>
57         <script src="../../../resources/js-test-post.js"></script>
58     </body>
59 </html>