mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-09 19:35:51 +00:00
Bug 1457767 [wpt PR 9339] - [css3-images] Parsing tests for images properties, a=testonly
Automatic update from web-platform-testsMerge pull request #9339 from ewilligers/images-parsing [css3-images] Parsing tests for images properties -- wpt-commits: 7790a59607f8fdc588e81576afd360d166d5ac29 wpt-pr: 9339
This commit is contained in:
Eric Willigers
James Graham
parent
1a5f5cca85
commit
15b65f9ef4
@ -250069,6 +250069,11 @@
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-images/parsing/resources/parsing-testcommon.js": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-images/support/1x1-green.gif": [
|
||||
[
|
||||
{}
|
||||
@ -316761,6 +316766,78 @@
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-images/parsing/gradient-position-invalid.html": [
|
||||
[
|
||||
"/css/css-images/parsing/gradient-position-invalid.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-images/parsing/gradient-position-valid.html": [
|
||||
[
|
||||
"/css/css-images/parsing/gradient-position-valid.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-images/parsing/image-orientation-invalid.html": [
|
||||
[
|
||||
"/css/css-images/parsing/image-orientation-invalid.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-images/parsing/image-orientation-valid.html": [
|
||||
[
|
||||
"/css/css-images/parsing/image-orientation-valid.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-images/parsing/image-rendering-invalid.html": [
|
||||
[
|
||||
"/css/css-images/parsing/image-rendering-invalid.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-images/parsing/image-rendering-valid.html": [
|
||||
[
|
||||
"/css/css-images/parsing/image-rendering-valid.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-images/parsing/image-resolution-invalid.html": [
|
||||
[
|
||||
"/css/css-images/parsing/image-resolution-invalid.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-images/parsing/image-resolution-valid.html": [
|
||||
[
|
||||
"/css/css-images/parsing/image-resolution-valid.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-images/parsing/object-fit-invalid.html": [
|
||||
[
|
||||
"/css/css-images/parsing/object-fit-invalid.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-images/parsing/object-fit-valid.html": [
|
||||
[
|
||||
"/css/css-images/parsing/object-fit-valid.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-images/parsing/object-position-invalid.html": [
|
||||
[
|
||||
"/css/css-images/parsing/object-position-invalid.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-images/parsing/object-position-valid.html": [
|
||||
[
|
||||
"/css/css-images/parsing/object-position-valid.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-layout-api/at-supports-rule.https.html": [
|
||||
[
|
||||
"/css/css-layout-api/at-supports-rule.https.html",
|
||||
@ -508028,6 +508105,58 @@
|
||||
"9b528f92e662c345e3ab6f7ad5502b97dc77f79f",
|
||||
"support"
|
||||
],
|
||||
"css/css-images/parsing/gradient-position-invalid.html": [
|
||||
"5bae73095070f46bc8f38a58fb3808d473d60058",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-images/parsing/gradient-position-valid.html": [
|
||||
"b939e0d37a56ee607a4b7b4c59721c8facabb049",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-images/parsing/image-orientation-invalid.html": [
|
||||
"d73028ae4b50467e1a04a80c9b0a33a1f195ba5b",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-images/parsing/image-orientation-valid.html": [
|
||||
"07a4e4f0d471c1482ec55c1237c39791590158e8",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-images/parsing/image-rendering-invalid.html": [
|
||||
"b053afe022c8928c8c18dc4e2dbba3c7224fe8c1",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-images/parsing/image-rendering-valid.html": [
|
||||
"ee2bd095839ad643e8e1fc4e9924d11ee8befc22",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-images/parsing/image-resolution-invalid.html": [
|
||||
"f48b7620d2e486815c51c616ddfa211739921dd4",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-images/parsing/image-resolution-valid.html": [
|
||||
"b5306320fe0ab963bfcd81874616d19866d9fea6",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-images/parsing/object-fit-invalid.html": [
|
||||
"30ce0f8f7a0b3d71c2c9347bfff588024f3f298d",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-images/parsing/object-fit-valid.html": [
|
||||
"ffbe081c87d23c18001dfd1835675801bb8c7ea2",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-images/parsing/object-position-invalid.html": [
|
||||
"20d721601fc3f13c6136cf01d41a9dd0372b865e",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-images/parsing/object-position-valid.html": [
|
||||
"3c9d9c61b0d80d46e939349b46e222dbd35aa454",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-images/parsing/resources/parsing-testcommon.js": [
|
||||
"b5cc6f7c0c7729328bbbc45ec2a8147dae8d8668",
|
||||
"support"
|
||||
],
|
||||
"css/css-images/support/1x1-green.gif": [
|
||||
"a3c674d4bdde016ea98db01141b2584c67526e4a",
|
||||
"support"
|
||||
|
||||
@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 3: parsing gradients with invalid position values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values-4/#typedef-position">
|
||||
<meta name="assert" content="gradient positions support only the '<position>' grammar.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
// The following were supported in an earlier version of the spec.
|
||||
// https://github.com/w3c/csswg-drafts/issues/2140
|
||||
// Deprecated in Blink with support to be removed in M68, around July 2018.
|
||||
test_invalid_value("background-image", "radial-gradient(at center left 1px, red, blue)");
|
||||
test_invalid_value("background-image", "radial-gradient(at center top 2px, red, blue)");
|
||||
test_invalid_value("background-image", "radial-gradient(at right 3% center, red, blue)");
|
||||
test_invalid_value("background-image", "radial-gradient(at left 4px top, red, blue)");
|
||||
test_invalid_value("background-image", "radial-gradient(at right top 5px, red, blue)");
|
||||
test_invalid_value("background-image", "radial-gradient(at bottom 6% center, red, blue)");
|
||||
test_invalid_value("background-image", "radial-gradient(at bottom 7% left, red, blue)");
|
||||
test_invalid_value("background-image", "radial-gradient(at bottom right 8%, red, blue)");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 3: parsing gradients with valid position values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values-4/#typedef-position">
|
||||
<meta name="assert" content="gradient positions support the full '<position>' grammar.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
// Where two values are shown, the first serialization is being used by Blink/Firefox/WebKit and the second by Edge.
|
||||
|
||||
test_valid_value("background-image", "radial-gradient(at 10%, red, blue)", ["radial-gradient(at 10% center, red, blue)", "radial-gradient(at 10%, red, blue)"]);
|
||||
test_valid_value("background-image", "radial-gradient(at 20% 30px, red, blue)");
|
||||
test_valid_value("background-image", "radial-gradient(at 30px center, red, blue)", ["radial-gradient(at 30px center, red, blue)", "radial-gradient(at 30px, red, blue)"]);
|
||||
test_valid_value("background-image", "radial-gradient(at 40px top, red, blue)");
|
||||
test_valid_value("background-image", "radial-gradient(at bottom 10% right 20%, red, blue)", "radial-gradient(at right 20% bottom 10%, red, blue)");
|
||||
test_valid_value("background-image", "radial-gradient(at bottom right, red, blue)", "radial-gradient(at right bottom, red, blue)");
|
||||
test_valid_value("background-image", "radial-gradient(at center, red, blue)", ["radial-gradient(at center center, red, blue)", "radial-gradient(at center, red, blue)"]);
|
||||
test_valid_value("background-image", "radial-gradient(at center 50px, red, blue)");
|
||||
test_valid_value("background-image", "radial-gradient(at center bottom, red, blue)", ["radial-gradient(at center bottom, red, blue)", "radial-gradient(at bottom, red, blue)"]);
|
||||
test_valid_value("background-image", "radial-gradient(at center center, red, blue)", ["radial-gradient(at center center, red, blue)", "radial-gradient(at center, red, blue)"]);
|
||||
test_valid_value("background-image", "radial-gradient(at center left, red, blue)", ["radial-gradient(at left center, red, blue)", "radial-gradient(at left, red, blue)"]);
|
||||
test_valid_value("background-image", "radial-gradient(at left, red, blue)", ["radial-gradient(at left center, red, blue)", "radial-gradient(at left, red, blue)"]);
|
||||
test_valid_value("background-image", "radial-gradient(at left bottom, red, blue)");
|
||||
test_valid_value("background-image", "radial-gradient(at left center, red, blue)", ["radial-gradient(at left center, red, blue)", "radial-gradient(at left, red, blue)"]);
|
||||
test_valid_value("background-image", "radial-gradient(at right 40%, red, blue)");
|
||||
test_valid_value("background-image", "radial-gradient(at right 30% top 60px, red, blue)");
|
||||
test_valid_value("background-image", "radial-gradient(at top, red, blue)", ["radial-gradient(at center top, red, blue)", "radial-gradient(at top, red, blue)"]);
|
||||
test_valid_value("background-image", "radial-gradient(at top center, red, blue)", ["radial-gradient(at center top, red, blue)", "radial-gradient(at top, red, blue)"]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 3: parsing image-orientation with invalid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
|
||||
<meta name="assert" content="image-orientation supports only the grammar 'from-image | <angle> | [ <angle>? flip ]'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_invalid_value("image-orientation", "auto");
|
||||
test_invalid_value("image-orientation", "none");
|
||||
test_invalid_value("image-orientation", "0");
|
||||
test_invalid_value("image-orientation", "0 flip");
|
||||
test_invalid_value("image-orientation", "0deg from-image");
|
||||
test_invalid_value("image-orientation", "flip 0deg");
|
||||
test_invalid_value("image-orientation", "flip from-image");
|
||||
test_invalid_value("image-orientation", "from-image 0deg");
|
||||
test_invalid_value("image-orientation", "from-image flip");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 3: parsing image-orientation with valid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
|
||||
<meta name="assert" content="image-orientation supports the full grammar 'from-image | <angle> | [ <angle>? flip ]'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_valid_value("image-orientation", "from-image");
|
||||
test_valid_value("image-orientation", "30deg");
|
||||
test_valid_value("image-orientation", "flip", "0deg flip"); // "0deg flip" in Firefox.
|
||||
test_valid_value("image-orientation", "-1.25turn flip");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 3: parsing image-rendering with invalid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-rendering">
|
||||
<meta name="assert" content="image-rendering supports only the grammar 'auto | smooth | high-quality | crisp-edges | pixelated'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_invalid_value("image-rendering", "none");
|
||||
test_invalid_value("image-rendering", "high-quality crisp-edges");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 3: parsing image-rendering with valid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-rendering">
|
||||
<meta name="assert" content="image-rendering supports the full grammar 'auto | smooth | high-quality | crisp-edges | pixelated'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_valid_value("image-rendering", "auto");
|
||||
test_valid_value("image-rendering", "smooth");
|
||||
test_valid_value("image-rendering", "high-quality");
|
||||
test_valid_value("image-rendering", "crisp-edges");
|
||||
test_valid_value("image-rendering", "pixelated");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 4: parsing image-resolution with invalid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-image-resolution">
|
||||
<meta name="assert" content="image-resolution supports only the grammar '[ from-image || <resolution> ] && snap?'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_invalid_value("image-resolution", "auto");
|
||||
test_invalid_value("image-resolution", "100%");
|
||||
test_invalid_value("image-resolution", "2");
|
||||
test_invalid_value("image-resolution", "3dpi snap from-image");
|
||||
test_invalid_value("image-resolution", "from-image snap 4dppx");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 4: parsing image-resolution with valid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-image-resolution">
|
||||
<meta name="assert" content="image-resolution supports the full grammar '[ from-image || <resolution> ] && snap?'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
test_valid_value("image-resolution", "1dpi");
|
||||
test_valid_value("image-resolution", "2dpcm from-image");
|
||||
test_valid_value("image-resolution", "3dppx from-image snap");
|
||||
test_valid_value("image-resolution", "4dpi snap");
|
||||
test_valid_value("image-resolution", "from-image");
|
||||
test_valid_value("image-resolution", "from-image 5dpcm");
|
||||
test_valid_value("image-resolution", "from-image 6dppx snap");
|
||||
test_valid_value("image-resolution", "from-image snap");
|
||||
test_valid_value("image-resolution", "snap 7.5dpi");
|
||||
test_valid_value("image-resolution", "snap -8dpcm from-image");
|
||||
test_valid_value("image-resolution", "snap from-image");
|
||||
test_valid_value("image-resolution", "snap from-image 0dppx");
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 4: parsing object-fit with invalid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-object-fit">
|
||||
<meta name="assert" content="object-fit supports only the grammar 'fill | none | [contain | cover] || scale-down'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_invalid_value("object-fit", "auto");
|
||||
test_invalid_value("object-fit", "contain cover");
|
||||
test_invalid_value("object-fit", "fill scale-down");
|
||||
test_invalid_value("object-fit", "contain fill");
|
||||
test_invalid_value("object-fit", "cover none");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 4: parsing object-fit with valid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-object-fit">
|
||||
<meta name="assert" content="object-fit supports the full grammar 'fill | none | [contain | cover] || scale-down'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_valid_value("object-fit", "contain");
|
||||
test_valid_value("object-fit", "contain scale-down");
|
||||
test_valid_value("object-fit", "cover");
|
||||
test_valid_value("object-fit", "cover scale-down");
|
||||
test_valid_value("object-fit", "fill");
|
||||
test_valid_value("object-fit", "none");
|
||||
test_valid_value("object-fit", "scale-down");
|
||||
test_valid_value("object-fit", "scale-down contain");
|
||||
test_valid_value("object-fit", "scale-down cover");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 3: parsing object-position with invalid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-object-position">
|
||||
<meta name="assert" content="object-position supports only the '<position>' grammar.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_invalid_value("object-position", "auto");
|
||||
test_invalid_value("object-position", "1px 2px 3px");
|
||||
test_invalid_value("object-position", "left right");
|
||||
test_invalid_value("object-position", "bottom 10% top 20%");
|
||||
|
||||
// The following were supported in an earlier version of the spec.
|
||||
// https://github.com/w3c/csswg-drafts/issues/2140
|
||||
// Deprecated in Blink with support to be removed in M68, around July 2018.
|
||||
test_invalid_value("object-position", "center left 1px");
|
||||
test_invalid_value("object-position", "center top 2px");
|
||||
test_invalid_value("object-position", "right 3% center");
|
||||
test_invalid_value("object-position", "left 4px top");
|
||||
test_invalid_value("object-position", "right top 5px");
|
||||
test_invalid_value("object-position", "bottom 6% center");
|
||||
test_invalid_value("object-position", "bottom 7% left");
|
||||
test_invalid_value("object-position", "bottom right 8%");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 3: parsing object-position with valid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-object-position">
|
||||
<meta name="assert" content="object-position supports the full '<position>' grammar.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
// First serialization is being returned by Blink/Firefox/WebKit, second by Edge.
|
||||
test_valid_value("object-position", "10%", ["10% center", "10% 50%"]);
|
||||
test_valid_value("object-position", "right 30% top 60px"); // "calc(70%) 60px" in Edge.
|
||||
test_valid_value("object-position", "20% 30px");
|
||||
test_valid_value("object-position", "30px center", ["30px center", "30px 50%"]);
|
||||
test_valid_value("object-position", "40px top", ["40px top", "40px 0%"]);
|
||||
test_valid_value("object-position", "bottom 10% right 20%", "right 20% bottom 10%"); // "calc(80%) calc(90%)" in Edge.
|
||||
test_valid_value("object-position", "bottom right", ["right bottom", "100% 100%"]);
|
||||
test_valid_value("object-position", "center 50px", ["center 50px", "50% 50px"]);
|
||||
test_valid_value("object-position", "center bottom", ["center bottom", "50% 100%"]);
|
||||
test_valid_value("object-position", "center left", ["left center", "0% 50%"]);
|
||||
test_valid_value("object-position", "left", ["left center", "0% 50%"]);
|
||||
test_valid_value("object-position", "left bottom", ["left bottom", "0% 100%"]);
|
||||
test_valid_value("object-position", "left center", ["left center", "0% 50%"]);
|
||||
test_valid_value("object-position", "right 40%", ["right 40%", "100% 40%"]);
|
||||
test_valid_value("object-position", "top", ["center top", "50% 0%"]);
|
||||
test_valid_value("object-position", "top center", ["center top", "50% 0%"]);
|
||||
|
||||
// ["center center"] in Blink and Firefox, "center" in WebKit, "50% 50%" in Edge.
|
||||
test_valid_value("object-position", "center", ["center center", "center", "50% 50%"]);
|
||||
test_valid_value("object-position", "center center", ["center center", "center", "50% 50%"]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,39 @@
|
||||
'use strict';
|
||||
|
||||
// serializedValue can be the expected serialization of value,
|
||||
// or an array of permitted serializations,
|
||||
// or omitted if value should serialize as value.
|
||||
function test_valid_value(property, value, serializedValue) {
|
||||
if (arguments.length < 3)
|
||||
serializedValue = value;
|
||||
|
||||
var stringifiedValue = JSON.stringify(value);
|
||||
|
||||
test(function(){
|
||||
var div = document.createElement('div');
|
||||
div.style[property] = value;
|
||||
assert_not_equals(div.style[property], "", "property should be set");
|
||||
|
||||
var div = document.createElement('div');
|
||||
div.style[property] = value;
|
||||
var readValue = div.style[property];
|
||||
if (serializedValue instanceof Array)
|
||||
assert_true(serializedValue.includes(readValue), "serialization should be sound");
|
||||
else
|
||||
assert_equals(readValue, serializedValue, "serialization should be canonical");
|
||||
|
||||
div.style[property] = readValue;
|
||||
assert_equals(div.style[property], readValue, "serialization should round-trip");
|
||||
|
||||
}, "e.style['" + property + "'] = " + stringifiedValue + " should set the property value");
|
||||
}
|
||||
|
||||
function test_invalid_value(property, value) {
|
||||
var stringifiedValue = JSON.stringify(value);
|
||||
|
||||
test(function(){
|
||||
var div = document.createElement('div');
|
||||
div.style[property] = value;
|
||||
assert_equals(div.style[property], "");
|
||||
}, "e.style['" + property + "'] = " + stringifiedValue + " should not set the property value");
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user