Skip to content

Commit

Permalink
Merge pull request #9339 from ewilligers/images-parsing
Browse files Browse the repository at this point in the history 
[css3-images] Parsing tests for images properties
  • Loading branch information
@ewilligers
ewilligers authored Apr 27, 2018
2 parents 4f39716 + 92f129c commit 7790a59
Show file tree
Hide file tree
Showing 13 changed files with 368 additions and 0 deletions.
28 changes: 28 additions & 0 deletions css/css-images/parsing/gradient-position-invalid.html
View file
Original file line number Diff line number Diff line change
@@ -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>
37 changes: 37 additions & 0 deletions css/css-images/parsing/gradient-position-valid.html
View file
Original file line number Diff line number Diff line change
@@ -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>
26 changes: 26 additions & 0 deletions css/css-images/parsing/image-orientation-invalid.html
View file
Original file line number Diff line number Diff line change
@@ -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>
21 changes: 21 additions & 0 deletions css/css-images/parsing/image-orientation-valid.html
View file
Original file line number Diff line number Diff line change
@@ -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>
19 changes: 19 additions & 0 deletions css/css-images/parsing/image-rendering-invalid.html
View file
Original file line number Diff line number Diff line change
@@ -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>
22 changes: 22 additions & 0 deletions css/css-images/parsing/image-rendering-valid.html
View file
Original file line number Diff line number Diff line change
@@ -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>
22 changes: 22 additions & 0 deletions css/css-images/parsing/image-resolution-invalid.html
View file
Original file line number Diff line number Diff line change
@@ -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>
34 changes: 34 additions & 0 deletions css/css-images/parsing/image-resolution-valid.html
View file
Original file line number Diff line number Diff line change
@@ -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>
22 changes: 22 additions & 0 deletions css/css-images/parsing/object-fit-invalid.html
View file
Original file line number Diff line number Diff line change
@@ -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>
26 changes: 26 additions & 0 deletions css/css-images/parsing/object-fit-valid.html
View file
Original file line number Diff line number Diff line change
@@ -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>
34 changes: 34 additions & 0 deletions css/css-images/parsing/object-position-invalid.html
View file
Original file line number Diff line number Diff line change
@@ -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>
38 changes: 38 additions & 0 deletions css/css-images/parsing/object-position-valid.html
View file
Original file line number Diff line number Diff line change
@@ -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>
39 changes: 39 additions & 0 deletions css/css-images/parsing/resources/parsing-testcommon.js
View file
Original file line number Diff line number Diff line change
@@ -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");
}

0 comments on commit 7790a59

Please sign in to comment.