Skip to content

Commit 7790a59

Browse files
ewilligersewilligers
authored
Merge pull request #9339 from ewilligers/images-parsing
[css3-images] Parsing tests for images properties
2 parents 4f39716 + 92f129c commit 7790a59

13 files changed

+368
-0
lines changed

‎css/css-images/parsing/gradient-position-invalid.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Images Module Level 3: parsing gradients with invalid position values</title>
6+
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
7+
<link rel="help" href="https://drafts.csswg.org/css-values-4/#typedef-position">
8+
<meta name="assert" content="gradient positions support only the '<position>' grammar.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="resources/parsing-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
// The following were supported in an earlier version of the spec.
16+
// https://github.com/w3c/csswg-drafts/issues/2140
17+
// Deprecated in Blink with support to be removed in M68, around July 2018.
18+
test_invalid_value("background-image", "radial-gradient(at center left 1px, red, blue)");
19+
test_invalid_value("background-image", "radial-gradient(at center top 2px, red, blue)");
20+
test_invalid_value("background-image", "radial-gradient(at right 3% center, red, blue)");
21+
test_invalid_value("background-image", "radial-gradient(at left 4px top, red, blue)");
22+
test_invalid_value("background-image", "radial-gradient(at right top 5px, red, blue)");
23+
test_invalid_value("background-image", "radial-gradient(at bottom 6% center, red, blue)");
24+
test_invalid_value("background-image", "radial-gradient(at bottom 7% left, red, blue)");
25+
test_invalid_value("background-image", "radial-gradient(at bottom right 8%, red, blue)");
26+
</script>
27+
</body>
28+
</html>

‎css/css-images/parsing/gradient-position-valid.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Images Module Level 3: parsing gradients with valid position values</title>
6+
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
7+
<link rel="help" href="https://drafts.csswg.org/css-values-4/#typedef-position">
8+
<meta name="assert" content="gradient positions support the full '<position>' grammar.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="resources/parsing-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
// Where two values are shown, the first serialization is being used by Blink/Firefox/WebKit and the second by Edge.
16+
17+
test_valid_value("background-image", "radial-gradient(at 10%, red, blue)", ["radial-gradient(at 10% center, red, blue)", "radial-gradient(at 10%, red, blue)"]);
18+
test_valid_value("background-image", "radial-gradient(at 20% 30px, red, blue)");
19+
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)"]);
20+
test_valid_value("background-image", "radial-gradient(at 40px top, red, blue)");
21+
test_valid_value("background-image", "radial-gradient(at bottom 10% right 20%, red, blue)", "radial-gradient(at right 20% bottom 10%, red, blue)");
22+
test_valid_value("background-image", "radial-gradient(at bottom right, red, blue)", "radial-gradient(at right bottom, red, blue)");
23+
test_valid_value("background-image", "radial-gradient(at center, red, blue)", ["radial-gradient(at center center, red, blue)", "radial-gradient(at center, red, blue)"]);
24+
test_valid_value("background-image", "radial-gradient(at center 50px, red, blue)");
25+
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)"]);
26+
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)"]);
27+
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)"]);
28+
test_valid_value("background-image", "radial-gradient(at left, red, blue)", ["radial-gradient(at left center, red, blue)", "radial-gradient(at left, red, blue)"]);
29+
test_valid_value("background-image", "radial-gradient(at left bottom, red, blue)");
30+
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)"]);
31+
test_valid_value("background-image", "radial-gradient(at right 40%, red, blue)");
32+
test_valid_value("background-image", "radial-gradient(at right 30% top 60px, red, blue)");
33+
test_valid_value("background-image", "radial-gradient(at top, red, blue)", ["radial-gradient(at center top, red, blue)", "radial-gradient(at top, red, blue)"]);
34+
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)"]);
35+
</script>
36+
</body>
37+
</html>

‎css/css-images/parsing/image-orientation-invalid.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Images Module Level 3: parsing image-orientation with invalid values</title>
6+
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
7+
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
8+
<meta name="assert" content="image-orientation supports only the grammar 'from-image | <angle> | [ <angle>? flip ]'.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="resources/parsing-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
test_invalid_value("image-orientation", "auto");
16+
test_invalid_value("image-orientation", "none");
17+
test_invalid_value("image-orientation", "0");
18+
test_invalid_value("image-orientation", "0 flip");
19+
test_invalid_value("image-orientation", "0deg from-image");
20+
test_invalid_value("image-orientation", "flip 0deg");
21+
test_invalid_value("image-orientation", "flip from-image");
22+
test_invalid_value("image-orientation", "from-image 0deg");
23+
test_invalid_value("image-orientation", "from-image flip");
24+
</script>
25+
</body>
26+
</html>

‎css/css-images/parsing/image-orientation-valid.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Images Module Level 3: parsing image-orientation with valid values</title>
6+
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
7+
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
8+
<meta name="assert" content="image-orientation supports the full grammar 'from-image | <angle> | [ <angle>? flip ]'.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="resources/parsing-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
test_valid_value("image-orientation", "from-image");
16+
test_valid_value("image-orientation", "30deg");
17+
test_valid_value("image-orientation", "flip", "0deg flip"); // "0deg flip" in Firefox.
18+
test_valid_value("image-orientation", "-1.25turn flip");
19+
</script>
20+
</body>
21+
</html>

‎css/css-images/parsing/image-rendering-invalid.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Images Module Level 3: parsing image-rendering with invalid values</title>
6+
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
7+
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-rendering">
8+
<meta name="assert" content="image-rendering supports only the grammar 'auto | smooth | high-quality | crisp-edges | pixelated'.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="resources/parsing-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
test_invalid_value("image-rendering", "none");
16+
test_invalid_value("image-rendering", "high-quality crisp-edges");
17+
</script>
18+
</body>
19+
</html>

‎css/css-images/parsing/image-rendering-valid.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Images Module Level 3: parsing image-rendering with valid values</title>
6+
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
7+
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-rendering">
8+
<meta name="assert" content="image-rendering supports the full grammar 'auto | smooth | high-quality | crisp-edges | pixelated'.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="resources/parsing-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
test_valid_value("image-rendering", "auto");
16+
test_valid_value("image-rendering", "smooth");
17+
test_valid_value("image-rendering", "high-quality");
18+
test_valid_value("image-rendering", "crisp-edges");
19+
test_valid_value("image-rendering", "pixelated");
20+
</script>
21+
</body>
22+
</html>

‎css/css-images/parsing/image-resolution-invalid.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Images Module Level 4: parsing image-resolution with invalid values</title>
6+
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
7+
<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-image-resolution">
8+
<meta name="assert" content="image-resolution supports only the grammar '[ from-image || <resolution> ] && snap?'.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="resources/parsing-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
test_invalid_value("image-resolution", "auto");
16+
test_invalid_value("image-resolution", "100%");
17+
test_invalid_value("image-resolution", "2");
18+
test_invalid_value("image-resolution", "3dpi snap from-image");
19+
test_invalid_value("image-resolution", "from-image snap 4dppx");
20+
</script>
21+
</body>
22+
</html>

‎css/css-images/parsing/image-resolution-valid.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Images Module Level 4: parsing image-resolution with valid values</title>
6+
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
7+
<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-image-resolution">
8+
<meta name="assert" content="image-resolution supports the full grammar '[ from-image || <resolution> ] && snap?'.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="resources/parsing-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
16+
17+
18+
test_valid_value("image-resolution", "1dpi");
19+
test_valid_value("image-resolution", "2dpcm from-image");
20+
test_valid_value("image-resolution", "3dppx from-image snap");
21+
test_valid_value("image-resolution", "4dpi snap");
22+
test_valid_value("image-resolution", "from-image");
23+
test_valid_value("image-resolution", "from-image 5dpcm");
24+
test_valid_value("image-resolution", "from-image 6dppx snap");
25+
test_valid_value("image-resolution", "from-image snap");
26+
test_valid_value("image-resolution", "snap 7.5dpi");
27+
test_valid_value("image-resolution", "snap -8dpcm from-image");
28+
test_valid_value("image-resolution", "snap from-image");
29+
test_valid_value("image-resolution", "snap from-image 0dppx");
30+
31+
32+
</script>
33+
</body>
34+
</html>

‎css/css-images/parsing/object-fit-invalid.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Images Module Level 4: parsing object-fit with invalid values</title>
6+
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
7+
<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-object-fit">
8+
<meta name="assert" content="object-fit supports only the grammar 'fill | none | [contain | cover] || scale-down'.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="resources/parsing-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
test_invalid_value("object-fit", "auto");
16+
test_invalid_value("object-fit", "contain cover");
17+
test_invalid_value("object-fit", "fill scale-down");
18+
test_invalid_value("object-fit", "contain fill");
19+
test_invalid_value("object-fit", "cover none");
20+
</script>
21+
</body>
22+
</html>

‎css/css-images/parsing/object-fit-valid.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Images Module Level 4: parsing object-fit with valid values</title>
6+
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
7+
<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-object-fit">
8+
<meta name="assert" content="object-fit supports the full grammar 'fill | none | [contain | cover] || scale-down'.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="resources/parsing-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
test_valid_value("object-fit", "contain");
16+
test_valid_value("object-fit", "contain scale-down");
17+
test_valid_value("object-fit", "cover");
18+
test_valid_value("object-fit", "cover scale-down");
19+
test_valid_value("object-fit", "fill");
20+
test_valid_value("object-fit", "none");
21+
test_valid_value("object-fit", "scale-down");
22+
test_valid_value("object-fit", "scale-down contain");
23+
test_valid_value("object-fit", "scale-down cover");
24+
</script>
25+
</body>
26+
</html>

0 commit comments

Comments
 (0)