diff options
| author | mstensho@opera.com <mstensho@opera.com@bbb929c8-8fbe-4397-9dbb-9b2b20218538> | 2013-09-13 10:27:13 +0000 |
|---|---|---|
| committer | mstensho@opera.com <mstensho@opera.com@bbb929c8-8fbe-4397-9dbb-9b2b20218538> | 2013-09-13 10:27:13 +0000 |
| commit | 3af4e4eefcbd92965c26c90b2b008cf670e8603e (patch) | |
| tree | 841b42bb517586a48e1fecfac1dbd4880a4e0347 /third_party/WebKit/LayoutTests/fast/css/parsing-object-position.html | |
| parent | 9be07f79aa4dcd9395c9492881c3474dd4f7d0af (diff) | |
| download | chromium_src-3af4e4eefcbd92965c26c90b2b008cf670e8603e.zip chromium_src-3af4e4eefcbd92965c26c90b2b008cf670e8603e.tar.gz chromium_src-3af4e4eefcbd92965c26c90b2b008cf670e8603e.tar.bz2 | |
Add support for the object-position CSS property.
This is hidden behind an "experimental" runtime flag named
"ObjectFitPosition", together with object-fit.
This is an implementation of object-position as described in
http://www.w3.org/TR/2012/CR-css3-images-20120417/#object-position
Object-position is used to offset replaced content within its content
box. Painting is always clipped against the content box, regardless of
the "overflow" property. This property is useful together with
object-fit (to achieve a difference between content box size and
replaced content size, so that specifying alignment is interesting),
but can also be used on its own.
BUG=236333
Review URL: https://chromiumcodereview.appspot.com/22839023
git-svn-id: svn://svn.chromium.org/blink/trunk@157745 bbb929c8-8fbe-4397-9dbb-9b2b20218538
Diffstat (limited to 'third_party/WebKit/LayoutTests/fast/css/parsing-object-position.html')
| -rw-r--r-- | third_party/WebKit/LayoutTests/fast/css/parsing-object-position.html | 80 |
1 files changed, 80 insertions, 0 deletions
diff --git a/third_party/WebKit/LayoutTests/fast/css/parsing-object-position.html b/third_party/WebKit/LayoutTests/fast/css/parsing-object-position.html new file mode 100644 index 0000000..e6d9c9c --- /dev/null +++ b/third_party/WebKit/LayoutTests/fast/css/parsing-object-position.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<html> + <head> + <script src="../js/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; + } + + shouldBeEqualToString('testComputedStyle(";")', '50% 50%'); + shouldBeEqualToString('testComputedStyle("object-position: 10px;")', '10px 50%'); + shouldBeEqualToString('testComputedStyle("object-position: 10px 10px;")', '10px 10px'); + shouldBeEqualToString('testComputedStyle("object-position: right top;")', '100% 0%'); + shouldBeEqualToString('testComputedStyle("object-position: top right;")', '100% 0%'); + + shouldBeEqualToString('test("object-position: inherit;")', 'inherit'); + shouldBeEqualToString('test("object-position: initial;")', 'initial'); + shouldBeEqualToString('test("object-position: left;")', '0% 50%'); + shouldBeEqualToString('test("object-position: top;")', '50% 0%'); + shouldBeEqualToString('test("object-position: top right;")', '100% 0%'); + shouldBeEqualToString('test("object-position: right top;")', '100% 0%'); + shouldBeEqualToString('test("object-position: center center;")', '50% 50%'); + shouldBeEqualToString('test("object-position: center;")', '50% 50%'); + shouldBeEqualToString('test("object-position: bottom center;")', '50% 100%'); + shouldBeEqualToString('test("object-position: left center;")', '0% 50%'); + shouldBeEqualToString('test("object-position: bottom center;")', '50% 100%'); + shouldBeEqualToString('test("object-position: center left;")', '0% 50%'); + shouldBeEqualToString('test("object-position: center bottom;")', '50% 100%'); + shouldBeEqualToString('test("object-position: 100px;")', '100px 50%'); + shouldBeEqualToString('test("object-position: 100px 100px;")', '100px 100px'); + shouldBeEqualToString('test("object-position: 100px 200px;")', '100px 200px'); + shouldBeEqualToString('test("object-position: -50% 0;")', '-50% 0px'); + shouldBeEqualToString('test("object-position: 3em 0;")', '3em 0px'); + shouldBeEqualToString('test("object-position: left 33px;")', '0% 33px'); + shouldBeEqualToString('test("object-position: center 33px;")', '50% 33px'); + shouldBeEqualToString('test("object-position: 33px center;")', '33px 50%'); + shouldBeEqualToString('test("object-position: 33px bottom;")', '33px 100%'); + shouldBeEqualToString('test("object-position: 1vh 1vw;")', '1vh 1vw'); + + shouldBeNull('test("object-position: 100px 100px 100px;")'); + shouldBeNull('test("object-position: 100px 100px 200px 200px;")'); + shouldBeNull('test("object-position: top left center;")'); + shouldBeNull('test("object-position: top top;")'); + shouldBeNull('test("object-position: top bottom;")'); + shouldBeNull('test("object-position: 33px left;")'); + shouldBeNull('test("object-position: top 33px;")'); + shouldBeNull('test("object-position: inherit inherit;")'); + shouldBeNull('test("object-position: initial initial;")'); + shouldBeNull('test("object-position: -webkit-fill-available;")'); + shouldBeNull('test("object-position: min-content;")'); + shouldBeNull('test("object-position: intrinsic;")'); + shouldBeNull('test("object-position: auto;")'); + shouldBeNull('test("object-position: none;")'); + shouldBeNull('test("object-position: fill;")'); + </script> + <script src="../js/resources/js-test-post.js"></script> + </body> +</html> |