Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add parsing tests for basic shapes for CSS Shapes Specification #2

Closed
wants to merge 3 commits into from
Closed

Add parsing tests for basic shapes for CSS Shapes Specification #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
37c237a
Add parsing tests for basic shapes for CSS Shapes Specification
betravis Sep 24, 2013
e862d6a
Fixing computed shapes tests to check for computed, not used, values
betravis Sep 27, 2013
a0be78d
Fixing shape name typo in polygon test
betravis Sep 30, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions contributors/adobe/submitted/shapes/basic-shapes/resources/parsing-utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
function test_inline_style(value, expected) {
var div = document.createElement('div');
div.style.setProperty('shape-outside', value);
var actual = div.style.getPropertyValue('shape-outside');
assert_equals(actual, typeof expected !== 'undefined' ? expected : value);
}

function test_computed_style(value, expected, props) {
var div = document.createElement('div');
div.style.setProperty('shape-outside', value);
if (props)
for (key in props)
div.style.setProperty(key, props[key]);
document.body.appendChild(div);
var style = getComputedStyle(div);
var actual = style.getPropertyValue('shape-outside');
document.body.removeChild(div);
assert_equals(actual, typeof expected !== 'undefined' ? expected : value);
}

function test_approx_computed_style(value, expected, props) {
var div = document.createElement('div');
div.style.setProperty('shape-outside', value);
if (props)
for (key in props)
div.style.setProperty(key, props[key]);
document.body.appendChild(div);
var numre = /[\d\.]+/g;

var result = getComputedStyle(div).getPropertyValue('shape-outside');
document.body.removeChild(div);

// Is it the same except for the numbers?
assert_equals(result.replace(numre, ''), expected.replace(numre, ''));

// Are the numbers equal?
var results = result.match(numre).map(parseFloat);
var expecteds = expected.match(numre).map(parseFloat);
assert_equals(results.length, expecteds.length);
results.forEach(function(result, i) {
assert_approx_equals(result, expecteds[i], 0.01);
});
}
25 changes: 25 additions & 0 deletions contributors/adobe/submitted/shapes/basic-shapes/shape-outside-circle-000.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>Shape Outside Circle Inline Style Arguments</title>
<link rel="author" title="Adobe" href="http://html.adobe.com/">
<link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
<link rel="help" href="http://dev.w3.org/csswg/css-shapes/#circle">
<meta name="assert" content="A circular basic shape has 3 length or percentage arguments">
<meta name="flags" content="DOM">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/parsing-utils.js"></script>
</head>
<body>
<div id="log"></div>
<script type="text/javascript">
generate_tests(test_inline_style, [
["3 length arguments", "circle(1px, 2px, 3px)"],
["3 percentage arguments", "circle(1%, 2%, 3%)"],
["Too few arguments", "circle(1px, 2px)", null],
["Too many arguments", "circle(1px, 2px, 3px, 4px)", null]
]);
</script>
</body>
</html>
22 changes: 22 additions & 0 deletions contributors/adobe/submitted/shapes/basic-shapes/shape-outside-circle-001.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>Shape Outside Circle Invalid Arguments</title>
<link rel="author" title="Adobe" href="http://html.adobe.com/">
<link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
<link rel="help" href="http://dev.w3.org/csswg/css-shapes/#circle">
<meta name="assert" content="A circular basic shape's radius cannot be negative">
<meta name="flags" content="DOM">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/parsing-utils.js"></script>
</head>
<body>
<div id="log"></div>
<script type="text/javascript">
generate_tests(test_inline_style, [
["Invalid r", "circle(1px, 2px, -3px)", null]
]);
</script>
</body>
</html>
23 changes: 23 additions & 0 deletions ...utors/adobe/submitted/shapes/basic-shapes/shape-outside-computed-inset-rectangle-000.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<title>Shape Outside Inset Rectangle Computed Style</title>
<link rel="author" title="Adobe" href="http://html.adobe.com/">
<link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
<link rel="help" href="http://dev.w3.org/csswg/css-shapes/#inset-rectangle">
<meta name="assert" content="If rx is absent, it defaults to 0. If ry is missing, it defaults to rx.">
<meta name="flags" content="DOM">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/parsing-utils.js"></script>
</head>
<body>
<div id="log"></div>
<script type="text/javascript">
generate_tests(test_computed_style, [
["rx, ry both missing", "inset-rectangle(1px, 2px, 3px, 4px)", "inset-rectangle(1px, 2px, 3px, 4px, 0px, 0px)"],
["ry missing", "inset-rectangle(1px, 2px, 3px, 4px, 5px)", "inset-rectangle(1px, 2px, 3px, 4px, 5px, 5px)"]
]);
</script>
</body>
</html>
22 changes: 22 additions & 0 deletions contributors/adobe/submitted/shapes/basic-shapes/shape-outside-computed-polygon-000.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>Shape Outside Polygon Computed Style</title>
<link rel="author" title="Adobe" href="http://html.adobe.com/">
<link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
<link rel="help" href="http://dev.w3.org/csswg/css-shapes/#polygon">
<meta name="assert" content="The default winding rule is nonzero.">
<meta name="flags" content="DOM">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/parsing-utils.js"></script>
</head>
<body>
<div id="log"></div>
<script type="text/javascript">
generate_tests(test_computed_style, [
["winding rule missing", "polygon(10% 20%, 30% 40%, 50% 60%)", "polygon(nonzero, 10% 20%, 30% 40%, 50% 60%)"]
]);
</script>
</body>
</html>
23 changes: 23 additions & 0 deletions contributors/adobe/submitted/shapes/basic-shapes/shape-outside-computed-rectangle-000.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<title>Shape Outside Rectangle Computed Style</title>
<link rel="author" title="Adobe" href="http://html.adobe.com/">
<link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
<link rel="help" href="http://dev.w3.org/csswg/css-shapes/#rectangle">
<meta name="assert" content="If rx is not present, it defaults to 0. If ry is not present, it defaults to rx.">
<meta name="flags" content="DOM">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/parsing-utils.js"></script>
</head>
<body>
<div id="log"></div>
<script type="text/javascript">
generate_tests(test_computed_style, [
["rx, ry both missing", "rectangle(1px, 2px, 3px, 4px)", "rectangle(1px, 2px, 3px, 4px, 0px, 0px)"],
["ry missing", "rectangle(1px, 2px, 3px, 4px, 5px)", "rectangle(1px, 2px, 3px, 4px, 5px, 5px)"]
]);
</script>
</body>
</html>
51 changes: 51 additions & 0 deletions contributors/adobe/submitted/shapes/basic-shapes/shape-outside-computed-shape-000.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<title>Shape Outside Basic Shape Computed Font Relative Lengths</title>
<link rel="author" title="Adobe" href="http://html.adobe.com/">
<link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
<link rel="help" href="http://dev.w3.org/csswg/css-shapes/#shape-outside-property">
<link rel="help" href="http://dev.w3.org/csswg/css-cascade/#computed">
<meta name="assert" content="The basic shape can contain relative length formats, which resolve to the computed (absolute) length value">
<meta name="flags" content="DOM">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/parsing-utils.js"></script>
</head>
<body>
<div id="log"></div>
<script type="text/javascript">
// font relative units: em, ex, ch, rem
var units = ['em', 'ex', 'ch', 'rem'];
var div = document.createElement('div');
document.body.appendChild(div);
var resolveds = {};
units.forEach(function(unit) {
div.style.width = '1' + unit;
var s = getComputedStyle(div);
resolveds[unit] = parseFloat(s.width);
});
document.body.removeChild(div);

function fillArray(string, length) {
return Array.apply(null, new Array(length)).map(String.prototype.valueOf, string);
}

function testUnit(unit) {
var relativeLength = '1' + unit;
var usedLength = resolveds[unit] + 'px';

var input = 'circle(' + fillArray('1' + unit, 3).join(', ') + ')';
var output = 'circle(' + fillArray(resolveds[unit] + 'px', 3).join(', ') + ')';

test_computed_style(input, output);
}

var tests = units.map(function(unit) {
return [unit + ' units', unit];
});

generate_tests(testUnit, tests);
</script>
</body>
</html>
51 changes: 51 additions & 0 deletions contributors/adobe/submitted/shapes/basic-shapes/shape-outside-computed-shape-001.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<title>Shape Outside Basic Shape Computed Viewport Relative Lengths</title>
<link rel="author" title="Adobe" href="http://html.adobe.com/">
<link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
<link rel="help" href="http://dev.w3.org/csswg/css-shapes/#shape-outside-property">
<link rel="help" href="http://dev.w3.org/csswg/css-cascade/#computed">
<meta name="assert" content="The basic shape can contain relative length formats, which resolve to the computed (absolute) length value">
<meta name="flags" content="DOM">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/parsing-utils.js"></script>
</head>
<body>
<div id="log"></div>
<script type="text/javascript">
// viewport relative units: vw, vh, vmin, vmax
var units = ['vw', 'vh', 'vmin', 'vmax'];
var div = document.createElement('div');
document.body.appendChild(div);
var resolveds = {};
units.forEach(function(unit) {
div.style.width = '1' + unit;
var s = getComputedStyle(div);
resolveds[unit] = parseFloat(s.width);
});
document.body.removeChild(div);

function fillArray(string, length) {
return Array.apply(null, new Array(length)).map(String.prototype.valueOf, string);
}

function testUnit(unit) {
var relativeLength = '1' + unit;
var usedLength = resolveds[unit] + 'px';

var input = 'circle(' + fillArray('1' + unit, 3).join(', ') + ')';
var output = 'circle(' + fillArray(resolveds[unit] + 'px', 3).join(', ') + ')';

test_computed_style(input, output);
}

var tests = units.map(function(unit) {
return [unit + ' units', unit];
});

generate_tests(testUnit, tests);
</script>
</body>
</html>
31 changes: 31 additions & 0 deletions contributors/adobe/submitted/shapes/basic-shapes/shape-outside-computed-shape-002.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<title>Shape Outside Basic Shape Computed Percentage Lengths</title>
<link rel="author" title="Adobe" href="http://html.adobe.com/">
<link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
<link rel="help" href="http://dev.w3.org/csswg/css-shapes/#shape-outside-property">
<link rel="help" href="http://dev.w3.org/csswg/css-cascade/#computed">
<meta name="assert" content="The basic shape can contain percentages, which remain unchanged when computed">
<meta name="flags" content="DOM">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/parsing-utils.js"></script>
</head>
<body>
<div id="log"></div>
<script type="text/javascript">
generate_tests(test_computed_style, [[
"rectangle", "rectangle(10%, 20%, 30%, 40%, 50%, 60%)"
], [
"inset-rectangle", "inset-rectangle(10%, 20%, 30%, 40%, 50%, 60%)"
], [
"circle", "circle(10%, 20%, 30%)"
], [
"ellipse", "ellipse(10%, 20%, 30%, 40%)"
], [
"polygon", "polygon(nonzero, 10% 20%, 30% 40%, 50% 60%)"
]]);
</script>
</body>
</html>
25 changes: 25 additions & 0 deletions contributors/adobe/submitted/shapes/basic-shapes/shape-outside-ellipse-000.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>Shape Outside Circle Inline Style Arguments</title>
<link rel="author" title="Adobe" href="http://html.adobe.com/">
<link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
<link rel="help" href="http://dev.w3.org/csswg/css-shapes/#ellipse">
<meta name="assert" content="An elliptical basic shape has 4 length or percentage arguments">
<meta name="flags" content="DOM">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/parsing-utils.js"></script>
</head>
<body>
<div id="log"></div>
<script type="text/javascript">
generate_tests(test_inline_style, [
["4 length arguments", "ellipse(1px, 2px, 3px, 4px)"],
["4 percentage arguments", "ellipse(1%, 2%, 3%, 4%)"],
["Too few arguments", "ellipse(1px, 2px, 3px)", null],
["Too many arguments", "ellipse(1px, 2px, 3px, 4px, 5px)", null]
]);
</script>
</body>
</html>
23 changes: 23 additions & 0 deletions contributors/adobe/submitted/shapes/basic-shapes/shape-outside-ellipse-001.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<title>Shape Outside Circle Invalid Arguments</title>
<link rel="author" title="Adobe" href="http://html.adobe.com/">
<link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
<link rel="help" href="http://dev.w3.org/csswg/css-shapes/#ellipse">
<meta name="assert" content="An elliptical basic shape's rx and ry values cannot be negative">
<meta name="flags" content="DOM">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/parsing-utils.js"></script>
</head>
<body>
<div id="log"></div>
<script type="text/javascript">
generate_tests(test_inline_style, [
["Invalid rx", "ellipse(1px, 2px, -3px, 4px)", null],
["Invalid ry", "ellipse(1px, 2px, 3px, -5px)", null]
]);
</script>
</body>
</html>
29 changes: 29 additions & 0 deletions contributors/adobe/submitted/shapes/basic-shapes/shape-outside-inset-rectangle-000.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>Shape Outside Inset Rectangle Inline Style Arguments</title>
<link rel="author" title="Adobe" href="http://html.adobe.com/">
<link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
<link rel="help" href="http://dev.w3.org/csswg/css-shapes/#inset-rectangle">
<meta name="assert" content="An inset-rectangle basic shape has 4-6 length or percentage arguments">
<meta name="flags" content="DOM">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/parsing-utils.js"></script>
</head>
<body>
<div id="log"></div>
<script type="text/javascript">
generate_tests(test_inline_style, [
["4 length arguments", "inset-rectangle(1px, 2px, 3px, 4px)"],
["5 length arguments", "inset-rectangle(1px, 2px, 3px, 4px, 5px)"],
["6 length arguments", "inset-rectangle(1px, 2px, 3px, 4px, 5px, 6px)"],
["4 percentage arguments", "inset-rectangle(1%, 2%, 3%, 4%)"],
["5 percentage arguments", "inset-rectangle(1%, 2%, 3%, 4%, 5%)"],
["6 percentage arguments", "inset-rectangle(1%, 2%, 3%, 4%, 5%, 6%)"],
["Too few arguments", "inset-rectangle(1px, 2px, 3px)", null],
["Too many arguments", "inset-rectangle(1px, 2px, 3px, 4px, 5px, 6px, 7px)", null]
]);
</script>
</body>
</html>
Loading