blob: 5323694810b6b0dbe0c5520fb49ceb3743a987ee [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test-pre.js"></script>
</head>
<body>
<script>
description("This tests checks that all of the input values for object-position parse correctly.");
function test(value)
{
var div = document.createElement("div");
div.setAttribute("style", value);
document.body.appendChild(div);
var result = div.style.getPropertyValue("object-position");
document.body.removeChild(div);
return result;
}
function testComputedStyle(value)
{
var div = document.createElement("div");
div.setAttribute("style", value);
document.body.appendChild(div);
var result = window.getComputedStyle(div).objectPosition;
document.body.removeChild(div);
return result;
}
shouldBe('testComputedStyle(";")', '"50% 50%"');
shouldBe('test("object-position: inherit;")', '"inherit"');
shouldBe('test("object-position: initial;")', '"initial"');
shouldBeEqualToString('test("object-position: 23px;")', '23px center');
shouldBeEqualToString('test("object-position: center 23px;")', 'center 23px');
shouldBeEqualToString('test("object-position: 50% 23px;")', '50% 23px');
shouldBeEqualToString('test("object-position: 50% left;")', '');
shouldBeEqualToString('test("object-position: left 10px top 15px;")', 'left 10px top 15px');
shouldBeEqualToString('test("object-position: right 10px bottom 15px;")', 'right 10px bottom 15px');
shouldBeEqualToString('testComputedStyle("object-position: bottom 20%;")', '50% 50%');
shouldBeEqualToString('testComputedStyle("object-position: right 20%;")', '100% 20%');
shouldBeEqualToString('testComputedStyle("object-position: right")', '100% 50%');
shouldBeEqualToString('testComputedStyle("object-position: center bottom 20%;")', '50% 80%');
shouldBeEqualToString('testComputedStyle("object-position: right bottom")', '100% 100%');
shouldBeEqualToString('testComputedStyle("object-position: left 10px top 15px;")', '10px 15px');
shouldBeEqualToString('testComputedStyle("object-position: right 10px bottom 15px;")', 'calc(100% - 10px) calc(100% - 15px)');
shouldBeEqualToString('testComputedStyle("object-position: bottom 20% right -20px;")', 'calc(100% - -20px) 80%');
shouldBeEqualToString('testComputedStyle("object-position: calc(100% - 20px) calc(100% - 10%)")', 'calc(100% - 20px) 90%');
shouldBeEqualToString('testComputedStyle("object-position: right calc(100% - 20px) bottom calc(100% - 10%)")', 'calc(100% - (100% - 20px)) 10%');
</script>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>