diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-shapes/shape-outside/values')
63 files changed, 3784 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-000.html new file mode 100644 index 0000000000..e7a84d60a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-000.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Image Threshold - Valid values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property"> + <meta name="assert" content="shape-image-threshold is any valid number and computed the + clipped value between 0 and 1."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var shape_image_threshold_valid_tests = [ + { + "actual": "0.0", + "expected_inline": "0", + "expected_computed": "0" + }, + { + "actual": ".2", + "expected_inline": "0.2", + "expected_computed": "0.2" + }, + { + "actual": "0.333", + "expected_inline": "0.333", + "expected_computed": "0.333" + }, + { + "actual": "1.0", + "expected_inline": "1", + "expected_computed": "1" + }, + { + "actual": "1.5", + "expected_inline": "1.5", + "expected_computed": "1" + } + ]; + generate_tests( ParsingUtils.testShapeThresholdInlineStyle, + ParsingUtils.buildTestCases(shape_image_threshold_valid_tests, 'inline') ); + generate_tests( ParsingUtils.testShapeThresholdComputedStyle, + ParsingUtils.buildTestCases(shape_image_threshold_valid_tests, 'computed') ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-001.html new file mode 100644 index 0000000000..0fc8c7c43a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-001.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Image Threshold - calc() values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property"> + <meta name="assert" content="shape-image-threshold may take calc values and computed the + clipped value between 0 and 1."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var shape_image_threshold_valid_tests = [ + { + "actual": "calc(10/100)", + "expected_computed": "0.1" + }, + { + "actual": "calc(10/100 + 30/100)", + "expected_computed": "0.4" + }, + { + "actual": "calc(150/100)", + "expected_computed": "1" + }, + { + "actual": "calc(150/100 - 2)", + "expected_computed": "0" + } + ]; + generate_tests( ParsingUtils.testShapeThresholdComputedStyle, + ParsingUtils.buildTestCases(shape_image_threshold_valid_tests, 'computed') ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-002.html new file mode 100644 index 0000000000..f992e429f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-002.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Image Threshold - Invalid values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property"> + <meta name="assert" content="shape-image-threshold is set to 0 when an invalid value is specified."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + // TODO + var shape_image_threshold_invalid_tests = [ + {"name": "-0.5" }, + {"name": "-100" }, + {"name": "nonNumber" }, + {"name": "3/4" }, + {"name": "20%" } + ]; + generate_tests( ParsingUtils.testShapeThresholdInlineStyle, + ParsingUtils.buildTestCases(shape_image_threshold_invalid_tests, 'inline - invalid') ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-003.html new file mode 100644 index 0000000000..135ce5d028 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-003.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Image Threshold Inherit</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property"> + <meta name="assert" content="shape-outside can be assigned the 'inherit' value and does not inherit by default."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + function setUpTest(parentValue, childValue) { + var outer = document.createElement("div"); + var inner = document.createElement("div"); + outer.appendChild(inner); + + outer.style.setProperty("shape-outside", "content-box"); + outer.style.setProperty("shape-image-threshold", parentValue); + inner.style.setProperty("shape-outside", "circle()"); + inner.style.setProperty("shape-image-threshold", childValue); + + document.body.appendChild(outer); + + var inline = inner.style.getPropertyValue("shape-image-threshold"); + var style = getComputedStyle(inner); + var computed = style.getPropertyValue("shape-image-threshold"); + document.body.removeChild(outer); + + return [inline, computed]; + } + + test(function() { + var results = setUpTest("0.5", "inherit"); + assert_equals(results[0], "inherit"); + assert_equals(results[1], "0.5"); + }, "shape-image-threshold can be assigned 'inherit' value"); + + test(function() { + var results = setUpTest("0.3", null); + assert_equals(results[0], ""); + assert_equals(results[1], "0"); + }, "shape-image-threshold is not inherited and defaults to 0"); + + test(function() { + var results = setUpTest("0.2", "0.5"); + assert_equals(results[0], "0.5"); + assert_equals(results[1], "0.5"); + }, "shape-margin is not inherited"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-000.html new file mode 100644 index 0000000000..d6ae34976f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-000.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Margin Valid Values - Length or Percentage</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <meta name="assert" content="shape-margin values may be either a length or percentage"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var shape_margin_valid_tests = [ + { + "actual": "10px", + "expected_inline": "10px", + "expected_computed": "10px" + }, + { + "actual": "10%", + "expected_inline": "10%", + "expected_computed": "10%" + } + ]; + generate_tests( ParsingUtils.testShapeMarginInlineStyle, + ParsingUtils.buildTestCases(shape_margin_valid_tests, "inline")); + generate_tests( ParsingUtils.testShapeMarginComputedStyle, + ParsingUtils.buildTestCases(shape_margin_valid_tests, "computed")); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-001.html new file mode 100644 index 0000000000..205241bbfd --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-001.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Margin Valid Values - Length Units</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <meta name="assert" content="shape-margin values may be in any length unit"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + setup({explicit_done: true}); + var shape_margin_valid_unit_tests = []; + ParsingUtils.validUnits.forEach(function(unit) { + test = "10"+unit; + testCase = new Object(); + // actual & expected_inline should be the same + // expected_computed will get converted to the px value in the test framework + testCase["actual"] = test; + testCase["expected_inline"] = test; + testCase["expected_computed"] = test; + shape_margin_valid_unit_tests.push(testCase); + }); + + generate_tests( ParsingUtils.testShapeMarginInlineStyle, + ParsingUtils.buildTestCases(shape_margin_valid_unit_tests, "inline")); + ParsingUtils.setupFonts(); + document.fonts.ready.then(()=> { + generate_tests( ParsingUtils.testShapeMarginComputedStyle, + ParsingUtils.buildTestCases(shape_margin_valid_unit_tests, "computed")); + ParsingUtils.restoreFonts(); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-002.html new file mode 100644 index 0000000000..18532ca173 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-002.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Margin Valid Values - Decimal, Positive/Negative lengths</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <meta name="assert" content="shape-margin values may be either a length or percentage"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var shape_margin_valid_tests = [ + { + "actual": "10.12345px", + "expected_inline": "10.12345px", + "expected_computed": "10.12345px" + }, + { + "actual": ".5px", + "expected_inline": "0.5px", + "expected_computed": "0.5px" + }, + { + "actual": "+15px", + "expected_inline": "15px", + "expected_computed": "15px" + }, + { + "actual": "+10.678px", + "expected_inline": "10.678px", + "expected_computed": "10.678px" + }, + ]; + generate_tests( ParsingUtils.testShapeMarginInlineStyle, + ParsingUtils.buildTestCases(shape_margin_valid_tests, "inline")); + generate_tests( ParsingUtils.testShapeMarginComputedStyle, + ParsingUtils.buildTestCases(shape_margin_valid_tests, "computed")); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-003.html new file mode 100644 index 0000000000..8c3336e27e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-003.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Margin Valid Values - calc() values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <meta name="assert" content="shape-margin values may be calc() values"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var shape_margin_calc_tests = []; + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = [ value[0], value[1] ]; + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ value[2][0], value[2][1] ]); + } else { + testCase.push( value[2] ); + } + shape_margin_calc_tests.push(testCase); + }); + generate_tests( ParsingUtils.testShapeMarginInlineStyle, + ParsingUtils.buildCalcTests(shape_margin_calc_tests, "inline")); + generate_tests( ParsingUtils.testShapeMarginComputedStyle, + ParsingUtils.buildCalcTests(shape_margin_calc_tests, "computed")); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-004.html new file mode 100644 index 0000000000..f87adb4b33 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-004.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Margin Invalid Values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <meta name="assert" content="shape-margin values may only be positive length units."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var shape_margin_invalid_tests = [ + {"name": "-20px"}, + {"name": "-.4567px"}, + {"name": "nonLength"}, + {"name": "10"} + ]; + generate_tests( ParsingUtils.testShapeMarginInlineStyle, + ParsingUtils.buildTestCases(shape_margin_invalid_tests, "inline - invalid")); + generate_tests( ParsingUtils.testShapeMarginComputedStyle, + ParsingUtils.buildTestCases(shape_margin_invalid_tests, "computed - invalid")); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-005.html new file mode 100644 index 0000000000..d39111115c --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-005.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Margin - inherit</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <meta name="assert" content="The shape-margin value is not inherited and can be assigned the 'inherit' value."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + + function setUpTest(parentValue, childValue) { + var outer = document.createElement("div"); + var inner = document.createElement("div"); + outer.appendChild(inner); + + outer.style.setProperty("shape-outside", "content-box"); + outer.style.setProperty("shape-margin", parentValue); + inner.style.setProperty("shape-outside", "circle()"); + inner.style.setProperty("shape-margin", childValue); + + document.body.appendChild(outer); + + var inline = inner.style.getPropertyValue("shape-margin"); + var style = getComputedStyle(inner); + var computed = style.getPropertyValue("shape-margin"); + document.body.removeChild(outer); + + return [inline, computed]; + } + + test(function() { + var results = setUpTest("10px", "inherit"); + assert_equals(results[0], "inherit"); + assert_equals(results[1], "10px"); + }, "shape-margin can be assigned 'inherit' value"); + + test(function() { + var results = setUpTest("5px", null); + assert_equals(results[0], ""); + assert_equals(results[1], "0px"); + }, "shape-margin is not inherited and defaults to 0px"); + + test(function() { + var results = setUpTest("15px", "10px"); + assert_equals(results[0], "10px"); + assert_equals(results[1], "10px"); + }, "shape-margin is not inherited"); + + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-box-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-box-000.html new file mode 100644 index 0000000000..f5b2ec7e89 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-box-000.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Box Valid Values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#typedef-shape-box"> + <meta name="assert" content="Shape-outside may be one of the box model box values"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_shape_boxes = [ + { + "actual": "content-box", + "expected_inline": "content-box", + "expected_computed": "content-box" + }, + { + "actual": "padding-box", + "expected_inline": "padding-box", + "expected_computed": "padding-box" + }, + { + "actual": "border-box", + "expected_inline": "border-box", + "expected_computed": "border-box" + }, + { + "actual": "margin-box", + "expected_inline": "margin-box", + "expected_computed": "margin-box" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_shape_boxes, 'inline') ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_shape_boxes, 'computed') ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-000.html new file mode 100644 index 0000000000..a13570c1ff --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-000.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Circle Valid Formats</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="A circular basic shape has an optional radius and position component"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_circle_tests = [ + { + "name": "No arguments", + "actual": "circle()", + "expected_inline": "circle(at 50% 50%)", + "expected_computed": "circle(at 50% 50%)" + }, + { + "name": "Radial argument only", + "actual": "circle(50px)", + "expected_inline": "circle(50px at 50% 50%)", + "expected_computed": "circle(50px at 50% 50%)" + }, + { + "name": "Position argument only", + "actual": "circle(at 50px 50px)", + "expected_inline": "circle(at 50px 50px)", + "expected_computed": "circle(at 50px 50px)" + }, + { + "name": "Radial and position argument", + "actual": "circle(50px at 50px 50px)", + "expected_inline": "circle(50px at 50px 50px)", + "expected_computed": "circle(50px at 50px 50px)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_circle_tests, 'inline') + ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_circle_tests, 'computed') + ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-001.html new file mode 100644 index 0000000000..da0be6904e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Circle Valid Radii</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="A circle's radius may be a length, percentage, or keyword."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildRadiiTests('circle', 'inline')); + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildRadiiTests('circle', 'computed')); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-002.html new file mode 100644 index 0000000000..3569dd8b81 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Circle Valid Positions</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#lengths"> + <meta name="assert" content="A circle's position argument may be any of the valid combinations: + [ percentage|length left|center|right ] + or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ] + or [ left|center|right ] + or [ left|center|right top|center|bottom ] + or [ top|center|bottom ]. "> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildPositionTests('circle', true, 'inline', 'px')); + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildPositionTests('circle', true, 'computed', 'px')); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-003.html new file mode 100644 index 0000000000..8364e5d39c --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-003.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Circle Invalid Position Argument Lists</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="Valid circle position argument list are in the form of: + [ percentage|length left|center|right ] + or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ] + or [ left|center|right ] + or [ left|center|right top|center|bottom ] + or [ top|center|bottom ]. + All position arguments not in this form are invalid."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildPositionTests("circle", false, "px")); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-004.html new file mode 100644 index 0000000000..c28172c333 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-004.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Circle - Position Length Units</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#lengths"> + <meta name="assert" content="A circle's position arguments may in any valid <length> unit allowed by a <position> value."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + setup({explicit_done: true}); + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildPositionTests("circle", true, 'lengthUnit + inline', ParsingUtils.validUnits) ); + ParsingUtils.setupFonts(); + document.fonts.ready.then(()=> { + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildPositionTests("circle", true, 'lengthUnit + computed', ParsingUtils.validUnits) ); + ParsingUtils.restoreFonts(); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-005.html new file mode 100644 index 0000000000..55a7f07acf --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-005.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Circle Valid Radii - length units</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="A circle's radius may be in any valid length unit."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + setup({explicit_done: true}); + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildRadiiTests('circle', 'lengthUnit + inline', ParsingUtils.validUnits)); + ParsingUtils.setupFonts(); + document.fonts.ready.then(()=> { + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildRadiiTests('circle', 'lengthUnit + computed', ParsingUtils.validUnits)); + ParsingUtils.restoreFonts(); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-006.html new file mode 100644 index 0000000000..2fe988d626 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-006.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Circle Radii - positive/negative, decimal/non-decimal</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="A circle's radius may be in signed positive or decimal/non-decimal format. Negative + radii are invalid."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_circle_radii_tests = [ + { + "actual": "circle(+10px)", + "expected_inline": "circle(10px at 50% 50%)", + "expected_computed": "circle(10px at 50% 50%)" + }, + { + "actual": "circle(+10.00px)", + "expected_inline": "circle(10px at 50% 50%)", + "expected_computed": "circle(10px at 50% 50%)" + }, + { + "actual": "circle(+20.340px)", + "expected_inline": "circle(20.34px at 50% 50%)", + "expected_computed": "circle(20.34px at 50% 50%)" + }, + { + "actual": "circle(+30.5px)", + "expected_inline": "circle(30.5px at 50% 50%)", + "expected_computed": "circle(30.5px at 50% 50%)" + }, + { + "actual": "circle(+10%)", + "expected_inline": "circle(10% at 50% 50%)", + "expected_computed": "circle(10% at 50% 50%)" + }, + { + "actual": "circle(+10.00%)", + "expected_inline": "circle(10% at 50% 50%)", + "expected_computed": "circle(10% at 50% 50%)" + }, + { + "actual": "circle(+20.350%)", + "expected_inline": "circle(20.35% at 50% 50%)", + "expected_computed": "circle(20.35% at 50% 50%)" + }, + { + "actual": "circle(+30.5%)", + "expected_inline": "circle(30.5% at 50% 50%)", + "expected_computed": "circle(30.5% at 50% 50%)" + } + ]; + invalid_circle_radii_tests = [ + {"name": "circle(-20px)"}, + {"name": "circle(-20.340px)"} + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_circle_radii_tests, 'inline') ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_circle_radii_tests, 'computed') ); + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(invalid_circle_radii_tests) ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-007.html new file mode 100644 index 0000000000..b3f8fadaa2 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-007.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Circle Radii - invalid args</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="This test verifies that invalid shape-radius arguments on circle() don't parse."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var invalid_circle_radiii_tests = [ + {"name": "circle(foo)"}, + {"name": "circle(10)"}, + {"name": "circle(20px 30px)"}, + {"name": "circle(20% 30%)"}, + {"name": "circle(20px, 30px)"}, + {"name": "circle(20%, 30%)"}, + {"name": "circle(20px closest-side)"}, + {"name": "circle(20px farthest-side)"}, + {"name": "circle(closest-side 20px)"}, + {"name": "circle(farthest-side 20px)"}, + {"name": "circle(20% closest-side)"}, + {"name": "circle(20% farthest-side)"}, + {"name": "circle(closest-side 20%)"}, + {"name": "circle(farthest-side 20%)"}, + {"name": "circle(closest-side farthest-side)"}, + {"name": "circle(farthest-side closest-side)"} + ]; + generate_tests(ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(invalid_circle_radiii_tests) ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-008.html new file mode 100644 index 0000000000..64aa9c3599 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-008.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Circle Invalid Position Argument Values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="This test verifies that invalid position arguments on circle() don't parse"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var invalid_circle_position_tests = [ + {"name": "circle(at foo)"}, + {"name": "circle(at 50)"}, + {"name": "circle(at 10px 20px 30px)"}, + {"name": "circle(at 20% 30% 40%)"}, + {"name": "circle(at 20px, 30px)"}, + {"name": "circle(at 20%, 30%)"}, + {"name": "circle(at 20px, 30px, 40px)"}, + {"name": "circle(at 20%, 30%, 40%)"}, + {"name": "circle(at closest-side)"}, + {"name": "circle(at farthest-side)"}, + {"name": "circle(at 20px 30px closest-side)"}, + {"name": "circle(at 20px 30px farthest-side)"}, + {"name": "circle(at 20px 30px foo)"}, + {"name": "circle(at closest-side 20px 30px)"}, + {"name": "circle(at farthest-side 20px 30px)"}, + {"name": "circle(at 20% 30% closest-side)"}, + {"name": "circle(at 20% 30% farthest-side)"}, + {"name": "circle(at closest-side 20% 30%)"}, + {"name": "circle(at farthest-side 20% 30%)"}, + {"name": "circle(at closest-side farthest-side 20px)"}, + {"name": "circle(at closest-side farthest-side 20%)"}, + {"name": "circle(at farthest-side closest-side closest-side)"}, + {"name": "circle(at farthest-side, closest-side, closest-side)"}, + {"name": "circle(at left 50x top 50px bottom)"} + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(invalid_circle_position_tests) ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-009.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-009.html new file mode 100644 index 0000000000..1aebc3cf09 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-009.html @@ -0,0 +1,124 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Circle Position Arguments - positive/negative, decimal/non-decimal</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="A circle's position arguments may be in signed positive/negative or + decimal/non-decimal format."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_circle_radii_tests = [ + { + "actual": "circle(at +50px)", + "expected_inline": "circle(at 50px 50%)", + "expected_computed": "circle(at 50px 50%)" + }, + { + "actual": "circle(at -50px)", + "expected_inline": "circle(at -50px 50%)", + "expected_computed": "circle(at -50px 50%)" + }, + { + "actual": "circle(at +50%)", + "expected_inline": "circle(at 50% 50%)", + "expected_computed": "circle(at 50% 50%)" + }, + { + "actual": "circle(at -50%)", + "expected_inline": "circle(at -50% 50%)", + "expected_computed": "circle(at -50% 50%)" + }, + { + "actual": "circle(at left +50px)", + "expected_inline": "circle(at 0% 50px)", + "expected_computed": "circle(at 0% 50px)" + }, + { + "actual": "circle(at left +50%)", + "expected_inline": "circle(at 0% 50%)", + "expected_computed": "circle(at 0% 50%)" + }, + { + "actual": "circle(at right -50px)", + "expected_inline": "circle(at 100% -50px)", + "expected_computed": "circle(at 100% -50px)" + }, + { + "actual": "circle(at right -50%)", + "expected_inline": "circle(at 100% -50%)", + "expected_computed": "circle(at 100% -50%)" + }, + { + "actual": "circle(at +50px top)", + "expected_inline": "circle(at 50px 0%)", + "expected_computed": "circle(at 50px 0%)" + }, + { + "actual": "circle(at +50% top)", + "expected_inline": "circle(at 50% 0%)", + "expected_computed": "circle(at 50% 0%)" + }, + { + "actual": "circle(at -50px bottom)", + "expected_inline": "circle(at -50px 100%)", + "expected_computed": "circle(at -50px 100%)" + }, + { + "actual": "circle(at -50% bottom)", + "expected_inline": "circle(at -50% 100%)", + "expected_computed": "circle(at -50% 100%)" + }, + { + "actual": "circle(at +50px +50px)", + "expected_inline": "circle(at 50px 50px)", + "expected_computed": "circle(at 50px 50px)" + }, + { + "actual": "circle(at +50% +50%)", + "expected_inline": "circle(at 50% 50%)", + "expected_computed": "circle(at 50% 50%)" + }, + { + "actual": "circle(at -50px -50px)", + "expected_inline": "circle(at -50px -50px)", + "expected_computed": "circle(at -50px -50px)" + }, + { + "actual": "circle(at +50px -50px)", + "expected_inline": "circle(at 50px -50px)", + "expected_computed": "circle(at 50px -50px)" + }, + { + "actual": "circle(at -50px +50px)", + "expected_inline": "circle(at -50px 50px)", + "expected_computed": "circle(at -50px 50px)" + }, + { + "actual": "circle(at +50% -50%)", + "expected_inline": "circle(at 50% -50%)", + "expected_computed": "circle(at 50% -50%)" + }, + { + "actual": "circle(at -50% +50%)", + "expected_inline": "circle(at -50% 50%)", + "expected_computed": "circle(at -50% 50%)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_circle_radii_tests, 'inline') ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_circle_radii_tests, 'computed') ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-010.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-010.html new file mode 100644 index 0000000000..6d6c11a707 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-010.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Circle args - calc() values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"> + <meta name="assert" content="A circle's arguments may be in calc() values."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var circle_calc_tests = []; + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = ['circle('+ value[0] +')', 'circle('+ value[1] + ' at 50% 50%)']; + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ 'circle('+ value[2][0] + ' at 50% 50%)', 'circle('+ value[2][1] + ' at 50% 50%)']); + } else { + testCase.push('circle('+ value[2] + ' at 50% 50%)'); + } + circle_calc_tests.push(testCase); + }); + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildCalcTests(circle_calc_tests, 'value')); + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildCalcTests(circle_calc_tests, 'computed')); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-011.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-011.html new file mode 100644 index 0000000000..cca245e411 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-011.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Circle position args - calc() values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"> + <meta name="assert" content="A circle's <position> arguments may be in calc() values."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var circle_position_calc_tests = []; + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = ['circle(at '+ value[0] +')', + 'circle(at '+ value[1] +' 50%)']; + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ 'circle(at '+ value[2][0] +' 50%)', + 'circle(at '+ value[2][1] +' 50%)' + ]); + } else { + testCase.push('circle(at '+ value[2] +' 50%)'); + } + circle_position_calc_tests.push(testCase); + }); + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildCalcTests(circle_position_calc_tests, 'inline')); + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildCalcTests(circle_position_calc_tests, 'computed')); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-computed-shape-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-computed-shape-000.html new file mode 100644 index 0000000000..26cae2e806 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-computed-shape-000.html @@ -0,0 +1,57 @@ +<!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="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-cascade-3/#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="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/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 resolveds = {}; + ParsingUtils.setupFonts(); + + var div = document.createElement('div'); + document.body.appendChild(div); + units.forEach(function(unit) { + div.style.width = '10' + 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 = 'polygon(nonzero, ' + fillArray('10' + unit, 2).join(' ') + ')'; + var output = 'polygon(' + fillArray(resolveds[unit] + 'px', 2).join(' ') + ')'; + + ParsingUtils.testComputedStyle(input, ParsingUtils.roundResultStr(output)); + } + + var tests = units.map(function(unit) { + return [unit + ' units', unit]; + }); + + generate_tests(testUnit, tests); + + ParsingUtils.restoreFonts(); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-computed-shape-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-computed-shape-001.html new file mode 100644 index 0000000000..97d16b9dbd --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-computed-shape-001.html @@ -0,0 +1,47 @@ +<!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="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-cascade-3/#computed"> + <meta name="assert" content="The basic shape can contain percentages, which remain unchanged when computed"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_polygon_tests = [ + { + "name": "inset", + "actual": "inset(10% 20% 30% 40% round 10% 20% 30% 40% / 10% 20% 30% 40%)", + "expected_computed": "inset(10% 20% 30% 40% round 10% 20% 30% 40%)" + }, + { + "name": "circle", + "actual": "circle(10% at 10% 20%)", + "expected_computed": "circle(10% at 10% 20%)" + }, + { + "name": "ellipse", + "actual": "ellipse(10% 20% at 10% 20%)", + "expected_computed": "ellipse(10% 20% at 10% 20%)" + }, + { + "name": "polygon", + "actual": "polygon(nonzero, 10% 20%, 30% 40%, 50% 60%)", + "expected_computed": "polygon(10% 20%, 30% 40%, 50% 60%)" + } + ]; + + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_polygon_tests, "computed") ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-000.html new file mode 100644 index 0000000000..532f794448 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-000.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Ellipse Valid Formats</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="An elliptical basic shape has two optional components, radii (2) and a position."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_ellipse_tests = [ + { + "name": "No arguments", + "actual": "ellipse()", + "expected_inline": "ellipse(at 50% 50%)", + "expected_computed": "ellipse(at 50% 50%)" + }, + { + "name": "Radial arguments", + "actual": "ellipse(50px 50px)", + "expected_inline": "ellipse(50px 50px at 50% 50%)", + "expected_computed": "ellipse(50px 50px at 50% 50%)" + }, + { + "name": "Position argument", + "actual": "ellipse(at 50px 50px)", + "expected_inline": "ellipse(at 50px 50px)", + "expected_computed": "ellipse(at 50px 50px)" + }, + { + "name": "Radial and position argument", + "actual": "ellipse(50px 50px at 50px 50px)", + "expected_inline": "ellipse(50px 50px at 50px 50px)", + "expected_computed": "ellipse(50px 50px at 50px 50px)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_ellipse_tests, "inline") ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_ellipse_tests, "computed") ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-001.html new file mode 100644 index 0000000000..dfefbbb5c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Ellipse Valid Radii</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="An elliptical basic shape's radii may be keywords, lengths or percentages"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildRadiiTests('ellipse', 'inline')); + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildRadiiTests('ellipse', 'computed')); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-002.html new file mode 100644 index 0000000000..07e1859e6d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Ellipse Valid Positions</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#lengths"> + <meta name="assert" content="An ellipse's position argument may be any of the valid combinations: + [ percentage|length left|center|right ] + or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ] + or [ left|center|right ] + or [ left|center|right top|center|bottom ] + or [ top|center|bottom ]. "> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildPositionTests('ellipse', true, 'inline', 'px')); + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildPositionTests('ellipse', true, 'computed', 'px')); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-003.html new file mode 100644 index 0000000000..c39e683510 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-003.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Ellipse Invalid Position Argument Lists</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="Valid ellipse position argument list are in the form of: + [ percentage|length left|center|right ] + or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ] + or [ left|center|right ] + or [ left|center|right top|center|bottom ] + or [ top|center|bottom ]. + All position arguments not in this form are invalid."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildPositionTests("ellipse", false, "px")); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-004.html new file mode 100644 index 0000000000..9456bec3d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-004.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Ellipse - Position Length Units</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#lengths"> + <meta name="assert" content="An ellipse's position arguments may in any valid <length> unit allowed by a <position> value."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + setup({explicit_done: true}); + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildPositionTests("ellipse", true, 'lengthUnit + inline', ParsingUtils.validUnits) ); + ParsingUtils.setupFonts(); + document.fonts.ready.then(()=> { + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildPositionTests("ellipse", true, 'lengthUnit + computed', ParsingUtils.validUnits) ); + ParsingUtils.restoreFonts(); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-005.html new file mode 100644 index 0000000000..5c90827d2d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-005.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Ellipse Valid Radii - length units</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="An ellipse's radii may be in any valid length unit."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + setup({explicit_done: true}); + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildRadiiTests('ellipse', 'lengthUnit + inline', ParsingUtils.validUnits)); + ParsingUtils.setupFonts(); + document.fonts.ready.then(()=> { + generate_tests(ParsingUtils.testComputedStyle, + ParsingUtils.buildRadiiTests('ellipse', 'lengthUnit + computed', ParsingUtils.validUnits)); + ParsingUtils.restoreFonts(); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-006.html new file mode 100644 index 0000000000..4bd75a445a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-006.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Ellipse Radii - positive/negative, decimal/non-decimal</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="An ellipse's radii may be in signed positive or decimal/non-decimal format. Negative + radii are invalid."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_ellipse_radii_tests = [ + { + "actual": "ellipse(+10px +20px)", + "expected_inline": "ellipse(10px 20px at 50% 50%)", + "expected_computed": "ellipse(10px 20px at 50% 50%)" + }, + { + "actual": "ellipse(+30px 40px)", + "expected_inline": "ellipse(30px 40px at 50% 50%)", + "expected_computed": "ellipse(30px 40px at 50% 50%)" + }, + { + "actual": "ellipse(50px +60px)", + "expected_inline": "ellipse(50px 60px at 50% 50%)", + "expected_computed": "ellipse(50px 60px at 50% 50%)" + }, + { + "actual": "ellipse(+10.00px +20.230px)", + "expected_inline": "ellipse(10px 20.23px at 50% 50%)", + "expected_computed": "ellipse(10px 20.23px at 50% 50%)" + }, + { + "actual": "ellipse(+30.00px 40.567px)", + "expected_inline": "ellipse(30px 40.567px at 50% 50%)", + "expected_computed": "ellipse(30px 40.567px at 50% 50%)" + }, + { + "actual": "ellipse(50.10px +60.7px)", + "expected_inline": "ellipse(50.1px 60.7px at 50% 50%)", + "expected_computed": "ellipse(50.1px 60.7px at 50% 50%)" + }, + { + "actual": "ellipse(+10% +20%)", + "expected_inline": "ellipse(10% 20% at 50% 50%)", + "expected_computed": "ellipse(10% 20% at 50% 50%)" + }, + { + "actual": "ellipse(+30% 40%)", + "expected_inline": "ellipse(30% 40% at 50% 50%)", + "expected_computed": "ellipse(30% 40% at 50% 50%)" + }, + { + "actual": "ellipse(+50% +60%)", + "expected_inline": "ellipse(50% 60% at 50% 50%)", + "expected_computed": "ellipse(50% 60% at 50% 50%)" + }, + { + "actual": "ellipse(+10.00% +20.230%)", + "expected_inline": "ellipse(10% 20.23% at 50% 50%)", + "expected_computed": "ellipse(10% 20.23% at 50% 50%)" + }, + { + "actual": "ellipse(+30.00% 40.567%)", + "expected_inline": "ellipse(30% 40.567% at 50% 50%)", + "expected_computed": "ellipse(30% 40.567% at 50% 50%)" + }, + { + "actual": "ellipse(50.10% +60.7%)", + "expected_inline": "ellipse(50.1% 60.7% at 50% 50%)", + "expected_computed": "ellipse(50.1% 60.7% at 50% 50%)" + } + ]; + invalid_ellipse_radii_tests = [ + {"name": "ellipse(-10px -20px)"}, + {"name": "ellipse(-30px 40px)"}, + {"name": "ellipse(50px -60px)"} + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_ellipse_radii_tests, "inline") ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_ellipse_radii_tests, "computed") ); + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(invalid_ellipse_radii_tests) ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-007.html new file mode 100644 index 0000000000..e18e32e7c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-007.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Ellipse Radii - invalid args</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="This test verifies that invalid shape-radius arguments on ellipse() don't parse."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var invalid_ellipse_radiii_tests = [ + {"name": "ellipse(foo)"}, + {"name": "ellipse(10)"}, + {"name": "ellipse(20px 30px 40px)"}, + {"name": "ellipse(20% 30% 40%)"}, + {"name": "ellipse(20px, 30px, 40px)"}, + {"name": "ellipse(20%, 30%, 40%)"}, + {"name": "ellipse(20px 30px closest-side)"}, + {"name": "ellipse(20px 30px farthest-side)"}, + {"name": "ellipse(closest-side 20px 30px)"}, + {"name": "ellipse(farthest-side 20px 30px)"}, + {"name": "ellipse(20% 30% closest-side)"}, + {"name": "ellipse(20% 30% farthest-side)"}, + {"name": "ellipse(closest-side 20% 30%)"}, + {"name": "ellipse(farthest-side 20% 30%)"}, + {"name": "ellipse(closest-side farthest-side 20px)"}, + {"name": "ellipse(closest-side farthest-side 20%)"}, + {"name": "ellipse(farthest-side closest-side closest-side)"}, + {"name": "ellipse(farthest-side, closest-side, closest-side)"} + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(invalid_ellipse_radiii_tests) ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-008.html new file mode 100644 index 0000000000..35f454bd21 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-008.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Ellipse Invalid Position Argument Values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="This test verifies that invalid position arguments on ellipse() don't parse"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var invalid_ellipse_position_tests = [ + {"name": "ellipse(at foo)"}, + {"name": "ellipse(at 50)"}, + {"name": "ellipse(at 10px 20px 30px)"}, + {"name": "ellipse(at 20% 30% 40%)"}, + {"name": "ellipse(at 20px, 30px)"}, + {"name": "ellipse(at 20%, 30%)"}, + {"name": "ellipse(at 20px, 30px, 40px)"}, + {"name": "ellipse(at 20%, 30%, 40%)"}, + {"name": "ellipse(at closest-side)"}, + {"name": "ellipse(at farthest-side)"}, + {"name": "ellipse(at 20px 30px closest-side)"}, + {"name": "ellipse(at 20px 30px farthest-side)"}, + {"name": "ellipse(at 20px 30px foo)"}, + {"name": "ellipse(at closest-side 20px 30px)"}, + {"name": "ellipse(at farthest-side 20px 30px)"}, + {"name": "ellipse(at 20% 30% closest-side)"}, + {"name": "ellipse(at 20% 30% farthest-side)"}, + {"name": "ellipse(at closest-side 20% 30%)"}, + {"name": "ellipse(at farthest-side 20% 30%)"}, + {"name": "ellipse(at closest-side farthest-side 20px)"}, + {"name": "ellipse(at closest-side farthest-side 20%)"}, + {"name": "ellipse(at farthest-side closest-side closest-side)"}, + {"name": "ellipse(at farthest-side, closest-side, closest-side)"}, + {"name": "ellipse(at left 50x top 50px bottom)"} + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(invalid_ellipse_position_tests) ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-009.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-009.html new file mode 100644 index 0000000000..36db61825b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-009.html @@ -0,0 +1,124 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Ellipse Position Arguments - positive/negative, decimal/non-decimal</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="An ellipse's position arguments may be in signed positive/negative or + decimal/non-decimal format."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_ellipse_radii_tests = [ + { + "actual": "ellipse(at +50px)", + "expected_inline": "ellipse(at 50px 50%)", + "expected_computed": "ellipse(at 50px 50%)" + }, + { + "actual": "ellipse(at -50px)", + "expected_inline": "ellipse(at -50px 50%)", + "expected_computed": "ellipse(at -50px 50%)" + }, + { + "actual": "ellipse(at +50%)", + "expected_inline": "ellipse(at 50% 50%)", + "expected_computed": "ellipse(at 50% 50%)" + }, + { + "actual": "ellipse(at -50%)", + "expected_inline": "ellipse(at -50% 50%)", + "expected_computed": "ellipse(at -50% 50%)" + }, + { + "actual": "ellipse(at left +50px)", + "expected_inline": "ellipse(at 0% 50px)", + "expected_computed": "ellipse(at 0% 50px)" + }, + { + "actual": "ellipse(at left +50%)", + "expected_inline": "ellipse(at 0% 50%)", + "expected_computed": "ellipse(at 0% 50%)" + }, + { + "actual": "ellipse(at right -50px)", + "expected_inline": "ellipse(at 100% -50px)", + "expected_computed": "ellipse(at 100% -50px)" + }, + { + "actual": "ellipse(at right -50%)", + "expected_inline": "ellipse(at 100% -50%)", + "expected_computed": "ellipse(at 100% -50%)" + }, + { + "actual": "ellipse(at +50px top)", + "expected_inline": "ellipse(at 50px 0%)", + "expected_computed": "ellipse(at 50px 0%)" + }, + { + "actual": "ellipse(at +50% top)", + "expected_inline": "ellipse(at 50% 0%)", + "expected_computed": "ellipse(at 50% 0%)" + }, + { + "actual": "ellipse(at -50px bottom)", + "expected_inline": "ellipse(at -50px 100%)", + "expected_computed": "ellipse(at -50px 100%)" + }, + { + "actual": "ellipse(at -50% bottom)", + "expected_inline": "ellipse(at -50% 100%)", + "expected_computed": "ellipse(at -50% 100%)" + }, + { + "actual": "ellipse(at +50px +50px)", + "expected_inline": "ellipse(at 50px 50px)", + "expected_computed": "ellipse(at 50px 50px)" + }, + { + "actual": "ellipse(at +50% +50%)", + "expected_inline": "ellipse(at 50% 50%)", + "expected_computed": "ellipse(at 50% 50%)" + }, + { + "actual": "ellipse(at -50px -50px)", + "expected_inline": "ellipse(at -50px -50px)", + "expected_computed": "ellipse(at -50px -50px)" + }, + { + "actual": "ellipse(at +50px -50px)", + "expected_inline": "ellipse(at 50px -50px)", + "expected_computed": "ellipse(at 50px -50px)" + }, + { + "actual": "ellipse(at -50px +50px)", + "expected_inline": "ellipse(at -50px 50px)", + "expected_computed": "ellipse(at -50px 50px)" + }, + { + "actual": "ellipse(at +50% -50%)", + "expected_inline": "ellipse(at 50% -50%)", + "expected_computed": "ellipse(at 50% -50%)" + }, + { + "actual": "ellipse(at -50% +50%)", + "expected_inline": "ellipse(at -50% 50%)", + "expected_computed": "ellipse(at -50% 50%)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_ellipse_radii_tests, "inline") ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_ellipse_radii_tests, "computed") ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-010.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-010.html new file mode 100644 index 0000000000..07cd1e593b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-010.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Ellipse args - calc() values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"> + <meta name="assert" content="An ellipse's arguments may be in calc() values."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var ellipse_calc_tests = []; + var defaultPosition = ' at 50% 50%'; + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = ['ellipse(farthest-side '+ value[0] +')', + 'ellipse(farthest-side '+ value[1] + defaultPosition +')']; + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ + 'ellipse(farthest-side '+ value[2][0] + defaultPosition +')', + 'ellipse(farthest-side '+ value[2][1] + defaultPosition +')' + ]); + } else { + testCase.push('ellipse(farthest-side '+ value[2] + defaultPosition +')'); + } + ellipse_calc_tests.push(testCase); + }); + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = ['ellipse('+ value[0] +' '+ value[0] +')', + 'ellipse('+ value[1] +' '+ value[1] + defaultPosition +')']; + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ + 'ellipse('+ value[2][0] +' '+ value[2][0] + defaultPosition +')', + 'ellipse('+ value[2][1] +' '+ value[2][1] + defaultPosition +')' + ]); + } else { + testCase.push('ellipse('+ value[2] +' '+ value[2] + defaultPosition +')'); + } + + ellipse_calc_tests.push(testCase); + }); + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildCalcTests(ellipse_calc_tests, 'value')); + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildCalcTests(ellipse_calc_tests, 'computed')); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-011.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-011.html new file mode 100644 index 0000000000..acbbf2474f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-011.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Ellipse position args - calc() values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"> + <meta name="assert" content="An ellipse's <position> arguments may be in calc() values."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var ellipse_position_calc_tests = []; + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = ['ellipse(at '+ value[0] +' 50%)', + 'ellipse(at '+ value[1] +' 50%)']; + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ + 'ellipse(at '+ value[2][0] +' 50%)', + 'ellipse(at '+ value[2][1] +' 50%)' + ]); + } else { + testCase.push('ellipse(at '+ value[2] +' 50%)'); + } + ellipse_position_calc_tests.push(testCase); + }); + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = ['ellipse(closest-side farthest-side at '+ value[0] +' '+ value[0] +')', + 'ellipse(closest-side farthest-side at '+ value[1] +' '+ value[1] +')']; + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ + 'ellipse(closest-side farthest-side at '+ value[2][0] +' '+ value[2][0] +')', + 'ellipse(closest-side farthest-side at '+ value[2][1] +' '+ value[2][1] +')' + ]); + } else { + testCase.push('ellipse(closest-side farthest-side at '+ value[2] +' '+ value[2] +')'); + } + ellipse_position_calc_tests.push(testCase); + }); + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildCalcTests(ellipse_position_calc_tests, 'inline')); + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildCalcTests(ellipse_position_calc_tests, 'computed')); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-000.html new file mode 100644 index 0000000000..bb6d8ea278 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-000.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Inset Valid Formats</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="An inset has 1 to 4 insets, and optional border radii that follow the border-radius format"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_inset_tests = [ + { + "name": "1 inset", + "actual": "inset(10px)", + "expected_inline": "inset(10px)", + "expected_computed": "inset(10px)" + }, + { + "name": "2 insets", + "actual": "inset(10px 20px)", + "expected_inline": "inset(10px 20px)", + "expected_computed": "inset(10px 20px)" + }, + { + "name": "3 insets", + "actual": "inset(10px 20px 30px)", + "expected_inline": "inset(10px 20px 30px)", + "expected_computed": "inset(10px 20px 30px)" + }, + { + "name": "4 insets", + "actual": "inset(10px 20px 30px 40px)", + "expected_inline": "inset(10px 20px 30px 40px)", + "expected_computed": "inset(10px 20px 30px 40px)" + }, + { + "name": "1 inset and round", + "actual": "inset(10px round 20px)", + "expected_inline": "inset(10px round 20px)", + "expected_computed": "inset(10px round 20px)" + }, + { + "name": "2 insets and round", + "actual": "inset(10px 20px round 30px)", + "expected_inline": "inset(10px 20px round 30px)", + "expected_computed": "inset(10px 20px round 30px)" + }, + { + "name": "3 insets and round", + "actual": "inset(10px 20px 30px round 40px)", + "expected_inline": "inset(10px 20px 30px round 40px)", + "expected_computed": "inset(10px 20px 30px round 40px)" + }, + { + "name": "4 insets and round", + "actual": "inset(10px 20px 30px 40px round 50px)", + "expected_inline": "inset(10px 20px 30px 40px round 50px)", + "expected_computed": "inset(10px 20px 30px 40px round 50px)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_inset_tests, "inline") ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_inset_tests, "computed") ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-001.html new file mode 100644 index 0000000000..c3b274d974 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Inset Valid Insets</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="An inset has 1 to 4 insets as percentages or length in any unit"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildInsetTests(ParsingUtils.validUnits, "%", "inline") ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildInsetTests(ParsingUtils.validUnits, "%", "computed") ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-0010.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-0010.html new file mode 100644 index 0000000000..b82abea82a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-0010.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This checks that a float 'shadowing' a shape-outside float works as expected."> +<style> +#container { width: 100px; line-height: 0; } +#float_1 { float: right; width: 30px; height: 30px; background: green; } +#float_2 { float: left; width: 20px; height: 100px; background: green; shape-outside: inset(0 20px 0 0); } +#float_3 { float: left; width: 30px; height: 50px; background: green; } +.atomic { display: inline-block; background: green; } +</style> +<p>Test passes if there is a filled green square.</p> +<div id="container"> + <div id="float_1"></div> + <div id="float_2"></div> + <div id="float_3"></div> + <div class="atomic" style="width: 20px; height: 30px;"></div> + <div class="atomic" style="width: 50px; height: 20px;"></div> + <div class="atomic" style="width: 80px; height: 50px;"></div><div class="atomic" style="width: 20px; height: 50px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-002.html new file mode 100644 index 0000000000..295db30617 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-002.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Inset Valid Rounds</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="An inset's radial component has 1 to 4 length/percentages, optionally followed by a '/' + and an additional 1 to 4 length/percentages and lengths can be in any unit."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.generateInsetRoundCases('px', 'inline')); + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.generateInsetRoundCases('%', 'inline')); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.generateInsetRoundCases('px', 'computed')); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.generateInsetRoundCases('%', 'computed')); + + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-003.html new file mode 100644 index 0000000000..abb9972d05 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-003.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Inset Valid Round Length Units</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#lengths"> + <meta name="assert" content="An inset's radial component's values can be in any length unit"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + setup({explicit_done: true}); + ParsingUtils.validUnits.forEach(function(unit) { + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.generateInsetRoundCases(unit, 'inline')); + }); + ParsingUtils.setupFonts(); + document.fonts.ready.then(()=> { + ParsingUtils.validUnits.forEach(function(unit) { + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.generateInsetRoundCases(unit, 'computed')); + }); + ParsingUtils.restoreFonts(); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-004.html new file mode 100644 index 0000000000..08c83c55fa --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-004.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Inset - positive/negative, decimal/non-decimal args</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="These tests verify that shape-outside inset() arguments can be numbers that are signed in + positive and negative and/or decimal/non-decimal form."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_inset_args_tests = [ + { + "actual": "inset(+10px -20px +30px -40px)", + "expected_inline": "inset(10px -20px 30px -40px)", + "expected_computed": "inset(10px -20px 30px -40px)" + }, + { + "actual": "inset(-10px +20px -30px +40px)", + "expected_inline": "inset(-10px 20px -30px 40px)", + "expected_computed": "inset(-10px 20px -30px 40px)" + }, + { + "actual": "inset(10.1200px 20.34px 30.56px 40.780px)", + "expected_inline": "inset(10.12px 20.34px 30.56px 40.78px)", + "expected_computed": "inset(10.12px 20.34px 30.56px 40.78px)" + }, + { + "actual": "inset(10.123px 20.00px 30.10px 40.5678px)", + "expected_inline": "inset(10.123px 20px 30.1px 40.5678px)", + "expected_computed": "inset(10.123px 20px 30.1px 40.5678px)" + }, + { + "actual": "inset(+10.1200px -20.340px +30.56px -40.780px)", + "expected_inline": "inset(10.12px -20.34px 30.56px -40.78px)", + "expected_computed": "inset(10.12px -20.34px 30.56px -40.78px)" + }, + { + "actual": "inset(-10.123px +20.00px -30.10px +40.5678px)", + "expected_inline": "inset(-10.123px 20px -30.1px 40.5678px)", + "expected_computed": "inset(-10.123px 20px -30.1px 40.5678px)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_inset_args_tests, "inline") ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_inset_args_tests, "computed") ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-005.html new file mode 100644 index 0000000000..ac38b0d9d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-005.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Inset - Invalid args</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="These tests verifies that invalid inset() arguments don't parse."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var invalid_inset_args_tests = [ + // no units + {"name": "inset(10 20px 30px 40px)"}, + {"name": "inset(10px 20 30px 40px)"}, + {"name": "inset(10px, 20px 30 40px)"}, + {"name": "inset(10px 20px 30px 40)"}, + {"name": "inset(10 20 30 40)"}, + // comma delimited args + {"name": "inset(10px, 20px, 30px, 40px)"}, + {"name": "inset(10px, 20px, 30px 40px)"}, + {"name": "inset(10px, 20px 30px 40px)"}, + {"name": "inset(10px 20px, 30px, 40px)"}, + {"name": "inset(10px 20px 30px, 40px)"}, + // bogus args + {"name": "inset(foo bar blah woo)"}, + {"name": "inset(10px roo 30px coo)"}, + {"name": "inset(may 20px blah 40px)"} + ]; + generate_tests(ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(invalid_inset_args_tests) ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-006.html new file mode 100644 index 0000000000..3a8f8aaf21 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-006.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Inset Radial Args - positive/negative, decimal/non-decimal</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="These tests verify that shape-outside inset() radial component can be numbers that are in + signed positive and/or decimal/non-decimal form. Negative values are not allowed"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_inset_radial_args_tests = [ + { + "actual": "inset(10px round +10px +20px +30px +40px)", + "expected_inline": "inset(10px round 10px 20px 30px 40px)", + "expected_computed": "inset(10px round 10px 20px 30px 40px)" + }, + { + "actual": "inset(10px round 10.1200px 20.34px 30.56px 40.780px)", + "expected_inline": "inset(10px round 10.12px 20.34px 30.56px 40.78px)", + "expected_computed": "inset(10px round 10.12px 20.34px 30.56px 40.78px)" + }, + { + "actual": "inset(10px round 10.123px 20.00px 30.10px 40.5678px)", + "expected_inline": "inset(10px round 10.123px 20px 30.1px 40.5678px)", + "expected_computed": "inset(10px round 10.123px 20px 30.1px 40.5678px)" + }, + { + "actual": "inset(10px round +10.1200px +20.340px +30.56px +40.780px)", + "expected_inline": "inset(10px round 10.12px 20.34px 30.56px 40.78px)", + "expected_computed": "inset(10px round 10.12px 20.34px 30.56px 40.78px)" + }, + { + "actual": "inset(10px round +10px +20px +30px +40px / +10px +20px +30px +40px )", + "expected_inline": "inset(10px round 10px 20px 30px 40px)", + "expected_computed": "inset(10px round 10px 20px 30px 40px)" + }, + { + "actual": "inset(10px round 10.1200px 20.34px 30.56px 40.780px / 10.1200px 20.34px 30.56px 40.780px)", + "expected_inline": "inset(10px round 10.12px 20.34px 30.56px 40.78px)", + "expected_computed": "inset(10px round 10.12px 20.34px 30.56px 40.78px)" + }, + { + "actual": "inset(10px round 10.123px 20.00px 30.10px 40.5678px / 10.123px 20.00px 30.10px 40.5678px)", + "expected_inline": "inset(10px round 10.123px 20px 30.1px 40.5678px)", + "expected_computed": "inset(10px round 10.123px 20px 30.1px 40.5678px)" + }, + { + "actual": "inset(10px round +10.1200px +20.340px +30.56px +40.780px / +10.1200px +20.340px +30.56px +40.780px)", + "expected_inline": "inset(10px round 10.12px 20.34px 30.56px 40.78px)", + "expected_computed": "inset(10px round 10.12px 20.34px 30.56px 40.78px)" + }, + { + "actual": "inset(10px round +10.123px +20.00px +30.10px +40.5678px / 10.123px +20.00px +30.10px +40.5678px)", + "expected_inline": "inset(10px round 10.123px 20px 30.1px 40.5678px)", + "expected_computed": "inset(10px round 10.123px 20px 30.1px 40.5678px)" + } + ]; + invalid_radial_args_tests = [ + {"name": "inset(10px round -10px -20px -30px -40px)"}, + {"name": "inset(10px round -10.1200px -20.340px -30.56px -40.780px)"}, + {"name": "inset(10px round -10px -20px -30px -40px / -10px -20px -30px -40px)"}, + {"name": "inset(10px round -10.123px -20.00px -30.10px -40.5678px / 10.123px -20.00px -30.10px -40.5678px)"} + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_inset_radial_args_tests, 'inline') ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_inset_radial_args_tests, 'computed') ); + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(invalid_radial_args_tests) ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-007.html new file mode 100644 index 0000000000..83655bf001 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-007.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Inset Radial Args - Invalid</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="These tests verify invalid radial component arguments don't parse."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var invalid_radial_args_tests = [ + // no units + {"name": "inset(10px round 10 20 30 40)"}, + {"name": "inset(10px round 10px 20 30 40)"}, + {"name": "inset(10px round 10px 20px 30 40)"}, + {"name": "inset(10px round 10px 20px 30px 40)"}, + {"name": "inset(10px round 10px 20px 30px 40px / 10 20 30 40)"}, + {"name": "inset(10px round 10px 20px 30px 40px / 10px 20 30 40)"}, + {"name": "inset(10px round 10px 20px 30px 40px / 10px 20px 30 40)"}, + {"name": "inset(10px round 10px 20px 30px 40px / 10px 20px 30px 40)"}, + // commas + {"name": "inset(10px round 10px, 20px, 30px, 40px)"}, + {"name": "inset(10px round 10px, 20px, 30px 40px)"}, + {"name": "inset(10px round 10px, 20px 30px 40px)"}, + {"name": "inset(10px round 10px 20px, 30px, 40px)"}, + {"name": "inset(10px round 10px 20px 30px, 40px)"}, + {"name": "inset(10px round 10px, 20px, 30px, 40px / 10px, 20px, 30px, 40px)"}, + {"name": "inset(10px round 10px 20px, 30px, 40px / 10px 20px, 30px, 40)"}, + {"name": "inset(10px round 10px 20px 30px, 40px / 10px 20px 30px, 40)"}, + // bogus args + {"name": "inset(10px round foo, bar, boo, $$)"}, + {"name": "inset(10px round 10px, xx, px pt)"}, + {"name": "inset(10px round word)"} + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(invalid_radial_args_tests) ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-008.html new file mode 100644 index 0000000000..c53949d1e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-008.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Inset Args - calc() values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"> + <meta name="assert" content="An inset's arguments may be in calc() values."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var inset_calc_tests = []; + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = ['inset('+ value[0] +')', + 'inset('+ value[1] +')']; + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ 'inset('+ value[2][0] +')', 'inset('+ value[2][1] +')' ]); + } else { + testCase.push('inset('+ value[2] +')'); + } + inset_calc_tests.push(testCase); + }); + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = ['inset('+ value[0] +' '+ value[0] +')', + 'inset('+ value[1] +')']; + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ 'inset('+ value[2][0] +')', 'inset('+ value[2][1] +')' ]); + } else { + testCase.push('inset('+ value[2] +')'); + } + inset_calc_tests.push(testCase); + }); + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildCalcTests(inset_calc_tests, 'value')); + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildCalcTests(inset_calc_tests, 'computed')); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-009.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-009.html new file mode 100644 index 0000000000..a826a8700e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-009.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Inset round args - calc() values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"> + <meta name="assert" content="An inset's radial component arguments may be in calc() values."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var fullInset = '10px 10px 10px 10px'; + var serializedInset = "10px"; + + var inset_round_calc_tests = []; + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = ['inset('+ fullInset +' round '+ value[0] +')', + 'inset('+ serializedInset +' round '+ value[1] +')']; + // array check + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ + 'inset('+ serializedInset +' round '+ value[2][0] +')', + 'inset('+ serializedInset +' round '+ value[2][1] +')' + ]); + } else { + testCase.push('inset('+ serializedInset +' round '+ value[2] +')'); + } + inset_round_calc_tests.push(testCase); + }); + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = ['inset('+ fullInset +' round '+ value[0] +' '+ value[0] +')', + 'inset('+ serializedInset +' round '+ value[1] +')']; + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ + 'inset('+ serializedInset +' round '+ value[2][0] +')', + 'inset('+ serializedInset +' round '+ value[2][1] +')' + ]); + } else { + testCase.push('inset('+ serializedInset +' round '+ value[2] +')'); + } + inset_round_calc_tests.push(testCase); + }); + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildCalcTests(inset_round_calc_tests, 'inline')); + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildCalcTests(inset_round_calc_tests, 'computed')); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-000.html new file mode 100644 index 0000000000..d4e9ca30fc --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-000.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Polygon Valid Formats</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="A polygonal basic shape has an optional fill-rule and one or more pairs of coordinates"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_polygon_tests = [ + { + "name": "Single point", + "actual": "polygon(1px 2px)", + "expected_inline": "polygon(1px 2px)", + "expected_computed": "polygon(1px 2px)" + }, + { + "name": "Single point with fill-rule", + "actual": "polygon(evenodd, 1px 2px)", + "expected_inline": "polygon(evenodd, 1px 2px)", + "expected_computed": "polygon(evenodd, 1px 2px)" + }, + { + "name": "Multiple points", + "actual": "polygon(1px 2px, 3px 4px, 5px 6px)", + "expected_inline": "polygon(1px 2px, 3px 4px, 5px 6px)", + "expected_computed": "polygon(1px 2px, 3px 4px, 5px 6px)" + }, + { + "name": "Multiple points with fill-rule", + "actual": "polygon(evenodd, 1px 2px, 3px 4px, 5px 6px)", + "expected_inline": "polygon(evenodd, 1px 2px, 3px 4px, 5px 6px)", + "expected_computed": "polygon(evenodd, 1px 2px, 3px 4px, 5px 6px)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_polygon_tests, "inline") ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_polygon_tests, "computed") ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-001.html new file mode 100644 index 0000000000..242d56187a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-001.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Polygon Valid Fill-Rules</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="A polygonal basic shape's optional fill-rule may be either 'nonzero' or 'evenodd'"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_fill_rule_tests = [ + { + "name": "Nonzero", + "actual": "polygon(nonzero, 1px 2px)", + "expected_inline": "polygon(1px 2px)", + "expected_computed": "polygon(1px 2px)" + }, + { + "name": "Evenodd", + "actual": "polygon(evenodd, 1px 2px)", + "expected_inline": "polygon(evenodd, 1px 2px)", + "expected_computed": "polygon(evenodd, 1px 2px)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_fill_rule_tests, 'inline') ); + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_fill_rule_tests, 'computed') ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-002.html new file mode 100644 index 0000000000..cb78c28a56 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-002.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Polygon Valid Points</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="A polygonal basic shape's points may be either lengths or percentages"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_polygon_points_tests = [ + { + "name": "Lengths", + "actual": "polygon(1px 2px, 3px 4px, 5px 6px)", + "expected_inline": "polygon(1px 2px, 3px 4px, 5px 6px)", + "expected_computed": "polygon(1px 2px, 3px 4px, 5px 6px)" + }, + { + "name": "Percentages", + "actual": "polygon(1% 2%, 3% 4%, 5% 6%)", + "expected_inline": "polygon(1% 2%, 3% 4%, 5% 6%)", + "expected_computed": "polygon(1% 2%, 3% 4%, 5% 6%)" + }, + { + "name": "Mixed Lengths and Percentages", + "actual": "polygon(1px 2px, 3px 4%, 5% 6px, 7% 8%)", + "expected_inline": "polygon(1px 2px, 3px 4%, 5% 6px, 7% 8%)", + "expected_computed": "polygon(1px 2px, 3px 4%, 5% 6px, 7% 8%)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_polygon_points_tests, 'inline') ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_polygon_points_tests, 'computed') ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-003.html new file mode 100644 index 0000000000..a9344bda0d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-003.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Polygon Invalid Points</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="A polygonal basic shape's points may be either lengths or percentages"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var invalid_polygon_points_tests = [ + {"name": "polygon()"}, + {"name": "polygon(evenodd)"}, + {"name": "polygon(nonzero)"}, + {"name": "polygon(evenodd, foo bar)"}, + {"name": "polygon(nonzero, bar foo)"}, + {"name": "polygon(foo, 1px 2px)"}, + {"name": "polygon(evenodd 1px 2px)"}, + {"name": "polygon(nonzero 1px 2px)"}, + {"name": "polygon(1px)"}, + {"name": "polygon(1px 2px 3px)"}, + {"name": "polygon(1px 2px 3px 4px)"}, + {"name": "polygon(1px, 2px)"}, + {"name": "polygon(1px 2px evenodd)"}, + {"name": "polygon(1px 2px nonzero)"}, + {"name": "polygon(evenodd, 10 20)"}, + {"name": "polygon(nonzero, 10 20)"} + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(invalid_polygon_points_tests) ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-004.html new file mode 100644 index 0000000000..5edde7dfad --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-004.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Polygon - Argument Length Units</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#lengths"> + <meta name="assert" content="A polygon's veritices may in percentage or any valid <length> units."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + setup({explicit_done: true}); + var arg_length_units_tests = [ + ['%', 'px', 'px'], + ['px', '%', 'px'], + ['px', 'px', '%'], + ['%', '%', '%'], + ['em', 'em', 'ex'], + ['vw', 'vh', '%'], + ['cm', 'mm', 'pc'], + ['vmin', 'vmin', 'vmax'], + ['rem', 'ch', 'rem'], + ['in', 'pt', '%'] + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildPolygonTests(arg_length_units_tests, 'inline') ); + ParsingUtils.setupFonts(); + document.fonts.ready.then(()=> { + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildPolygonTests(arg_length_units_tests, 'computed') ); + ParsingUtils.restoreFonts(); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-005.html new file mode 100644 index 0000000000..cde27d5d32 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-005.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Polygon Valid Points</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="A polygon's vertices can be in signed positive/negative or decimal/non-decimal format"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_polygon_points_tests = [ + { + "actual": "polygon(+1px +2px, +3px +4px, +5px +6px)", + "expected_inline": "polygon(1px 2px, 3px 4px, 5px 6px)", + "expected_computed": "polygon(1px 2px, 3px 4px, 5px 6px)" + }, + { + "actual": "polygon(-1px -2px, -3px -4px, -5px -6px)", + "expected_inline": "polygon(-1px -2px, -3px -4px, -5px -6px)", + "expected_computed": "polygon(-1px -2px, -3px -4px, -5px -6px)" + }, + { + "actual": "polygon(+1px +2px, -3px -4px, +5px +6px)", + "expected_inline": "polygon(1px 2px, -3px -4px, 5px 6px)", + "expected_computed": "polygon(1px 2px, -3px -4px, 5px 6px)" + }, + { + "actual": "polygon(-1px -2px, +3px +4px, -5px -6px)", + "expected_inline": "polygon(-1px -2px, 3px 4px, -5px -6px)", + "expected_computed": "polygon(-1px -2px, 3px 4px, -5px -6px)" + }, + { + "actual": "polygon(1.0px 2.22px, 3.40px 4.555px, 5.607px 6.99px)", + "expected_inline": "polygon(1px 2.22px, 3.4px 4.555px, 5.607px 6.99px)", + "expected_computed": "polygon(1px 2.22px, 3.4px 4.555px, 5.607px 6.99px)" + }, + { + "actual": "polygon(+1.0px -2.22px, +3.40px -4.550px, 5.67px -6.99px)", + "expected_inline": "polygon(1px -2.22px, 3.4px -4.55px, 5.67px -6.99px)", + "expected_computed": "polygon(1px -2.22px, 3.4px -4.55px, 5.67px -6.99px)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_polygon_points_tests, "inline") ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_polygon_points_tests, "computed") ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-006.html new file mode 100644 index 0000000000..9912f39bb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-006.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Polygon args - calc() values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"> + <meta name="assert" content="A polygon's arguments may be in calc() values."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var polygon_calc_tests = []; + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = ['polygon('+ value[0] +' '+ value[0] +')', + 'polygon('+ value[1] +' '+ value[1] +')']; + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ + 'polygon('+ value[2][0] +' '+ value[2][0] +')', + 'polygon('+ value[2][1] +' '+ value[2][1] +')' + ]); + } else { + testCase.push('polygon('+ value[2] +' '+ value[2] +')'); + } + polygon_calc_tests.push(testCase); + }); + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = ['polygon(evenodd, '+ value[0] +' '+ value[0] +', '+ value[0] +' '+ value[0] +')', + 'polygon(evenodd, '+ value[1] +' '+ value[1] +', '+ value[1] +' '+ value[1] +')']; + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ + 'polygon(evenodd, '+ value[2][0] +' '+ value[2][0] +', '+ value[2][0] +' '+ value[2][0] +')', + 'polygon(evenodd, '+ value[2][1] +' '+ value[2][1] +', '+ value[2][1] +' '+ value[2][1] +')' + ]); + } else { + testCase.push('polygon(evenodd, '+ value[2] +' '+ value[2] +', '+ value[2] +' '+ value[2] +')'); + } + polygon_calc_tests.push(testCase); + }); + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildCalcTests(polygon_calc_tests, 'inline')); + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildCalcTests(polygon_calc_tests, 'computed')); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-arguments-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-arguments-000.html new file mode 100644 index 0000000000..2c2c959c8c --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-arguments-000.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Basic Shape 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="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#typedef-basic-shape"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/cssom-1/#serializing-css-values"> + <meta name="assert" content="A basic basic shape can contain any length unit type, or percentage"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + // relative units: em, ex, ch, rem, vw, vh, vmin, vmax + // fixed units: cm, mm, in, px, pt, pc + // percentage unit: % + // zero length: 0 + setup({explicit_done: true}); + var basic_shape_args_tests = [ + { + "name": "0-valued", + "actual": "polygon(nonzero, 0 0)", + "expected_inline": "polygon(0px 0px)", + "expected_computed": "polygon(0px 0px)" + }, + { + "name": "Font relative units", + "actual": "polygon(nonzero, 1em 1ex, 1ch 1rem)", + "expected_inline": "polygon(1em 1ex, 1ch 1rem)", + "expected_computed": "polygon(1em 1ex, 1ch 1rem)" // converted to px by the framework + }, + { + "name": "View relative units", + "actual": "polygon(nonzero, 1vw 1vh, 1vmin 1vmax)", + "expected_inline": "polygon(1vw 1vh, 1vmin 1vmax)", + "expected_computed": "polygon(1vw 1vh, 1vmin 1vmax)" // converted to px by the framework + }, + { + "name": "Fixed units", + "actual": "polygon(nonzero, 1cm 1mm, 1in 1px, 1pt 1pc)", + "expected_inline": "polygon(1cm 1mm, 1in 1px, 1pt 1pc)", + "expected_computed": "polygon(1cm 1mm, 1in 1px, 1pt 1pc)" // converted to px by the framework + }, + { + "name": "Percentage units", + "actual": "polygon(nonzero, 1% 2%)", + "expected_inline": "polygon(1% 2%)", + "expected_computed": "polygon(1% 2%)" + } + ]; + + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(basic_shape_args_tests, "inline") ); + ParsingUtils.setupFonts(); + document.fonts.ready.then(()=> { + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(basic_shape_args_tests, "computed") ); + ParsingUtils.restoreFonts(); + done(); + }); + + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-arguments-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-arguments-001.html new file mode 100644 index 0000000000..04fac808c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-arguments-001.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Shape Number Values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#typedef-basic-shape"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/cssom-1/#serializing-css-values"> + <meta name="assert" content="The basic shape can contain all valid number formats"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + // number forms: d, +d, -d, .d, +.d, -.d, d.d, +d.d, -d.d + var shape_number_values_tests = [ + { + "name": "Positive number variations", + "actual": "polygon(nonzero, 1px +2px, .3px +.4px, 5.5px +6.6px)", + "expected_inline": "polygon(1px 2px, 0.3px 0.4px, 5.5px 6.6px)", + "expected_computed": "polygon(1px 2px, 0.3px 0.4px, 5.5px 6.6px)" + }, + { + "name": "Negative number variations", + "actual": "polygon(nonzero, -1px -.2px, -1.1px 0px)", + "expected_inline": "polygon(-1px -0.2px, -1.1px 0px)", + "expected_computed": "polygon(-1px -0.2px, -1.1px 0px)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(shape_number_values_tests, "inline") ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(shape_number_values_tests, "computed") ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-box-pair-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-box-pair-000.html new file mode 100644 index 0000000000..1b6e9b2398 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-box-pair-000.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Box Shape and Box Valid Values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#typedef-shape-box"> + <meta name="assert" content="Shape-outside may be a pair of shape and box values"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var shape_box_valid_tests = [ + { + "actual": "polygon(nonzero, 1px 1px) content-box", + "expected_inline": "polygon(1px 1px) content-box", + "expected_computed": "polygon(1px 1px) content-box" + }, + { + "actual": "polygon(nonzero, 1px 1px) padding-box", + "expected_inline": "polygon(1px 1px) padding-box", + "expected_computed": "polygon(1px 1px) padding-box" + }, + { + "actual": "polygon(nonzero, 1px 1px) border-box", + "expected_inline": "polygon(1px 1px) border-box", + "expected_computed": "polygon(1px 1px) border-box" + }, + { + "actual": "polygon(nonzero, 1px 1px) margin-box", + "expected_inline": "polygon(1px 1px)", + "expected_computed": "polygon(1px 1px)" + }, + { + "actual": " content-box polygon(nonzero, 1px 1px)", + "expected_inline": "polygon(1px 1px) content-box", + "expected_computed": "polygon(1px 1px) content-box" + }, + { + "actual": "padding-box polygon(nonzero, 1px 1px)", + "expected_inline": "polygon(1px 1px) padding-box", + "expected_computed": "polygon(1px 1px) padding-box" + }, + { + "actual": "border-box polygon(nonzero, 1px 1px)", + "expected_inline": "polygon(1px 1px) border-box", + "expected_computed": "polygon(1px 1px) border-box" + }, + { + "actual": "margin-box polygon(nonzero, 1px 1px)", + "expected_inline": "polygon(1px 1px)", + "expected_computed": "polygon(1px 1px)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(shape_box_valid_tests, "inline") ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(shape_box_valid_tests, "computed") ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-inherit-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-inherit-000.html new file mode 100644 index 0000000000..8929911809 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-inherit-000.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Box Inherit Value</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="Shape-outside takes can be assigned the 'inherit' value."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + test(function() { + var outer = document.createElement("div"); + var inner = document.createElement("div"); + outer.appendChild(inner); + outer.style.setProperty("shape-outside", "content-box"); + inner.style.setProperty("shape-outside", "inherit"); + document.body.appendChild(outer); + var inline = inner.style.getPropertyValue("shape-outside"); + var style = getComputedStyle(inner); + var computed = style.getPropertyValue("shape-outside"); + document.body.removeChild(outer); + assert_equals(inline, "inherit"); + assert_equals(computed, "content-box"); + }, "shape-outside can be assigned 'inherit' value"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-initial-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-initial-000.html new file mode 100644 index 0000000000..b2ab33542e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-initial-000.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Box Initial Value</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="Shape-outside takes its default value of none when assigned the 'initial' value"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + test(function() { + ParsingUtils.testInlineStyle("initial", "initial"); + }, "shape-outside can be assigned 'initial' value"); + test(function() { + ParsingUtils.testComputedStyle("initial", "none"); + }, "'initial' value computes to the default value"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-none-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-none-000.html new file mode 100644 index 0000000000..de14375177 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-none-000.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside - none</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="shape-outside can be explicitly assigned the default value of none."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + test(function() { + ParsingUtils.testInlineStyle("none", "none"); + }, "shape-outside can be assigned 'none' value"); + test(function() { + ParsingUtils.testComputedStyle("none", "none"); + }, "'none' value computes to none"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-notation-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-notation-000.html new file mode 100644 index 0000000000..e2a1f251bc --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-notation-000.html @@ -0,0 +1,40 @@ + <!DOCTYPE html> +<html> + <head> + <title>Shape Outside Valid Basic Shape Functional Notation</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/cssom-1/#serializing-css-values"> + <meta name="assert" content="Basic shapes use functional notation, and may contain optional whitespace inside the parentheses"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var shape_functional_notation_tests = [ + { + "name": "No whitespace", + "actual": "polygon(nonzero,1px 2px,3px 4px)", + "expected_inline": "polygon(1px 2px, 3px 4px)", + "expected_computed": "polygon(1px 2px, 3px 4px)" + }, + { + "name": "Extra whitespace", + "actual": "polygon( nonzero , 1px 2px\n\t,\n\t3px\n\t4px\n\t)", + "expected_inline": "polygon(1px 2px, 3px 4px)", + "expected_computed": "polygon(1px 2px, 3px 4px)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(shape_functional_notation_tests, "inline") ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(shape_functional_notation_tests, "computed") ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/support/parsing-utils.js b/testing/web-platform/tests/css/css-shapes/shape-outside/values/support/parsing-utils.js new file mode 100644 index 0000000000..b7c637746e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/support/parsing-utils.js @@ -0,0 +1,845 @@ +var ParsingUtils = (function() { +function testInlineStyle(value, expected) { + var div = document.createElement('div'); + div.style.setProperty('shape-outside', value); + var actual = div.style.getPropertyValue('shape-outside'); + assert_equals(actual, expected); +} + +function testComputedStyle(value, expected) { + var div = document.createElement('div'); + div.style.setProperty('shape-outside', value); + document.body.appendChild(div); + var style = getComputedStyle(div); + var actual = style.getPropertyValue('shape-outside'); + actual = roundResultStr(actual); + document.body.removeChild(div); + + // Some of the tests in this suite have either/or expected results + // so this check allows for testing that at least one of them passes. + // Description of the 2 expecteds is below near calcTestValues. + if(Object.prototype.toString.call( expected ) === '[object Array]' && expected.length == 2) { + assert_in_array(actual, expected); + } else { + assert_equals(actual, typeof expected !== 'undefined' ? expected : value); + } +} + +function testShapeMarginInlineStyle(value, expected) { + var div = document.createElement('div'); + div.style.setProperty('shape-outside', "border-box inset(10px)"); + div.style.setProperty('shape-margin', value); + var actual = div.style.getPropertyValue('shape-margin'); + actual = roundResultStr(actual); + expected = roundResultStr(expected); + assert_equals(actual, expected); +} + +function testShapeMarginComputedStyle(value, expected) { + + var outerDiv = document.createElement('div'); + outerDiv.style.setProperty('width', '100px'); + + var innerDiv = document.createElement('div'); + innerDiv.style.setProperty('shape-outside', "border-box inset(10px)"); + innerDiv.style.setProperty('shape-margin', value); + + outerDiv.appendChild(innerDiv); + document.body.appendChild(outerDiv); + + var style = getComputedStyle(innerDiv); + var actual = style.getPropertyValue('shape-margin'); + + assert_not_equals(actual, null); + if(actual.indexOf('calc') == -1 ) + actual = roundResultStr(actual); + document.body.removeChild(outerDiv); + + // See comment above about multiple expected results + if(Object.prototype.toString.call( expected ) === '[object Array]' && expected.length == 2) { + assert_in_array(actual, expected); + } else { + assert_equals(actual, !expected ? '0px' : expected); + } +} + +function testShapeThresholdInlineStyle(value, expected) { + var div = document.createElement('div'); + div.style.setProperty('shape-outside', 'url(someimage.png)'); + div.style.setProperty('shape-image-threshold', value); + var actual = div.style.getPropertyValue('shape-image-threshold'); + assert_equals(actual, expected); +} + +function testShapeThresholdComputedStyle(value, expected) { + + var div = document.createElement('div'); + div.style.setProperty('shape-outside', 'url(someimage.png)'); + div.style.setProperty('shape-image-threshold', value); + document.body.appendChild(div); + + var style = getComputedStyle(div); + var actual = style.getPropertyValue('shape-image-threshold'); + + assert_not_equals(actual, null); + if(actual.indexOf('calc') == -1 ) + actual = roundResultStr(actual); + document.body.removeChild(div); + + // See comment above about multiple expected results + if(Object.prototype.toString.call( expected ) === '[object Array]' && expected.length == 2) { + assert_in_array(actual, expected); + } else { + assert_equals(actual, !expected ? '0' : expected); + } +} + +// Builds an array of test cases to send to testharness.js where one test case is: [name, actual, expected] +// These test cases will verify results from testInlineStyle() or testComputedStyle() +function buildTestCases(testCases, testType) { + var results = []; + + // If test_type isn't specified, test inline style + var type = typeof testType == 'undefined' ? 'invalid': testType; + + testCases.forEach(function(test) { + oneTestCase = []; + + // name - annotated by type (inline vs. computed) + if ( test.hasOwnProperty('name') ) { + oneTestCase.push(test['name'] +' - '+ type); + } else { + // If test_name isn't specified, use the actual + oneTestCase.push(test['actual'] +' - '+ type); + } + + // actual + oneTestCase.push(test['actual']) + + // expected + if( type.indexOf('invalid') != -1 ){ + oneTestCase.push("") + } else if( type == 'inline' ) { + oneTestCase.push(test['expected_inline']); + } else if( type == 'computed' ){ + oneTestCase.push( convertToPx(test['expected_computed']) ); + } + results.push(oneTestCase); + }); + return results; +} + + +function buildPositionTests(shape, valid, type, units) { + var results = new Array(); + var convert = type.indexOf('computed') != -1 ? true : false; + + if(Object.prototype.toString.call( units ) === '[object Array]') { + units.forEach(function(unit) { + positionTests = buildPositionTests(shape, valid, type, unit); + results = results.concat(positionTests); + }); + } else { + if (valid) { + validPositions.forEach(function(test) { + var testCase = [], testName, actual, expected; + // skip if this isn't explicitly testing length units + if( !(type.indexOf('lengthUnit') != -1 && test[0].indexOf("u1") == -1)) { + // actual + actual = shape + '(at ' + setUnit(test[0], false, units) +')'; + + // expected + // if(convert && shape == 'circle') + // expected = shape + '(at ' + setUnit(test[1], convert, units) +')'; + // else if(convert && shape == 'ellipse') + // expected = shape + '(at ' + setUnit(test[1], convert, units) +')'; + // else + expected = shape + '(at ' + setUnit(test[1], convert, units) +')'; + + // name + if (type == 'lengthUnit + inline') + testName = 'test unit (inline): ' + units +' - '+ actual; + else if (type == 'lengthUnit + computed') + testName = 'test unit (computed): ' + units +' - '+ actual; + else + testName = (actual + ' serializes as ' + expected +' - '+ type); + + testCase.push(testName) + testCase.push(actual); + testCase.push(expected); + results.push(testCase); + } + }); + } else { + invalidPositions.forEach(function(test) { + var testValue = shape + '(at ' + setUnit(test, false, units) +')'; + testCase = new Array(); + testCase.push(testValue + ' is invalid'); + testCase.push(testValue); + testCase.push(""); + results.push(testCase); + }); + } + } + return unique(results); +} + +function buildRadiiTests(shape, type, units) { + var results = new Array(); + var testUnits = typeof units == 'undefined' ? 'px': units; + var convert = type.indexOf('computed') != -1 ? true : false; + + if(Object.prototype.toString.call( testUnits ) === '[object Array]') { + testUnits.forEach(function(unit) { + radiiTests = buildRadiiTests(shape, type, unit); + results = results.concat(radiiTests); + }); + } else { + var validRadii = shape == 'circle' ? validCircleRadii : validEllipseRadii; + validRadii.forEach(function(test) { + var testCase = [], name, actual, expected; + + // skip if this isn't explicitly testing length units + if( !(type.indexOf('lengthUnit') != -1 && test[0].indexOf("u1") == -1) ) { + actual = shape + '(' + setUnit(test[0], false, testUnits) +')'; + // name + if (type.indexOf('lengthUnit') != -1) { + name = 'test unit: ' + units +' - '+ actual; + if(type.indexOf('computed') != -1) + name = name + ' - computed'; + else + name = name + ' - inline'; + } + else + name = actual +' - '+ type; + + testCase.push(name); + + // actual + testCase.push(actual); + + // expected + if(type.indexOf('computed') != -1 && test.length == 3) { + expected = shape + '(' + setUnit(test[2], convert, testUnits) +')'; + } else { + expected = shape + '(' + setUnit(test[1], convert, testUnits) +')'; + } + testCase.push(expected); + results.push(testCase); + } + }); + } + return unique(results); +} + +function buildInsetTests(unit1, unit2, type) { + var results = new Array(); + var convert = type == 'computed' ? true : false; + + if(Object.prototype.toString.call( unit1 ) === '[object Array]') { + unit1.forEach(function(unit) { + insetTests = buildInsetTests(unit, unit2, type); + results = results.concat(insetTests); + }); + } else { + validInsets.forEach(function(test) { + var testCase = [], name, actual, expected; + + name = setUnit(test[0], false, unit1, unit2) +' - '+ type; + actual = 'inset(' + setUnit(test[1], convert, unit1, unit2) +')'; + expected = actual; + + testCase.push(name); + testCase.push(actual); + testCase.push(expected); + + results.push(testCase); + }); + } + return unique(results); +} + +function buildPolygonTests(unitSet, type) { + var results = new Array(); + var convert = type == 'computed' ? true : false; + + unitSet.forEach(function(set) { + validPolygons.forEach(function(test) { + var testCase = []; + // name + testCase.push(setUnit(test[0], false, set[0], set[1], set[2]) +' - '+ type); + // actual + testCase.push('polygon(' + setUnit(test[1], false, set[0], set[1], set[2]) +')'); + // expected + testCase.push('polygon(' + setUnit(test[1], convert, set[0], set[1], set[2]) +')'); + results.push(testCase); + }); + }); + return unique(results); +} + +function buildCalcTests(testCases, type) { + var results = new Array(); + testCases.forEach(function(test){ + var testCase = []; + if(type == 'computed') { + testCase.push(test[0] + ' - computed style'); + testCase.push(test[0]); + testCase.push(test[2]); + } + else { + testCase.push(test[0] + ' - inline style'); + testCase.push(test[0]); + testCase.push(test[1]); + } + testCase.push(type); + results.push(testCase) + }); + return unique(results); +} + +function unique(tests) { + var list = tests.concat(); + for(var i = 0; i< list.length; ++i) { + for(var j = i+1; j < list.length; ++j) { + if(list[i][0] === list[j][0]) + list.splice(j--, 1); + } + } + return list; +} + +function setUnit(str, convert, unit1, unit2, unit3) { + var retStr = str; + if(typeof unit1 !== 'undefined') { + retStr = retStr.replace(new RegExp('u1', 'g'), unit1); + } + if(typeof unit2 !== 'undefined') { + retStr = retStr.replace(new RegExp("u2", 'g'), unit2); + } + if(typeof unit3 !== 'undefined') { + retStr = retStr.replace(new RegExp("u3", 'g'), unit3); + } + retStr = convert ? convertToPx(retStr) : retStr; + return retStr; +} + +function roundCssNumber(n) { + // See https://drafts.csswg.org/cssom/#serializing-css-values for numbers. + return parseFloat(n.toPrecision(6)); +} + +function convertToPx(origValue) { + + var valuesToConvert = origValue.match(/[0-9]+(\.[0-9]+)?([a-z]{2,4}|%|)/g); + if(!valuesToConvert) + return origValue; + + var retStr = origValue; + for(var i = 0; i < valuesToConvert.length; i++) { + var unit = (valuesToConvert[i].match(/[a-z]{2,4}|%/) || '').toString(); + var numberStr = valuesToConvert[i].match(/[0-9]+(\.[0-9]+)?/)[0]; + + var number = parseFloat(numberStr); + var convertedUnit = 'px'; + if( typeof number !== 'NaN' ) + { + if (unit == 'in') { + number = (96 * number); + } else if (unit == 'cm') { + number = (37.795275591 * number); + } else if (unit == 'mm') { + number = (3.779527559 * number); + } else if (unit == 'pt') { + number = (1.333333333333 * number); + } else if (unit == 'pc') { + number = (16 * number); + } else if (unit == 'em') { + number = (16 * number); + } else if (unit == 'ex') { + number = (12.8 * number); + } else if (unit == 'ch') { + number = (16 * number); + } else if (unit == 'rem') { + number = (16 * number); + } else if (unit == 'vw') { + number = ((.01 * window.innerWidth) * number); + } else if (unit == 'vh') { + number = ((.01 * window.innerHeight) * number); + } else if (unit == 'vmin') { + number = Math.min( (.01 * window.innerWidth), (.01 * window.innerHeight) ) * number; + } else if (unit == 'vmax') { + number = Math.max( (.01 * window.innerWidth), (.01 * window.innerHeight) ) * number; + } + else { + convertedUnit = unit; + } + number = roundCssNumber(number); + var find = valuesToConvert[i]; + var replace = number.toString() + convertedUnit; + retStr = retStr.replace(valuesToConvert[i], number.toString() + convertedUnit); + } + } + return retStr.replace(',,', ','); +} + +function roundResultStr(str) { + if(Object.prototype.toString.call( str ) !== '[object String]') + return str; + + var numbersToRound = str.match(/[0-9]+\.[0-9]+/g); + if(!numbersToRound) + return str; + + var retStr = str; + for(var i = 0; i < numbersToRound.length; i++) { + num = parseFloat(numbersToRound[i]); + if( !isNaN(num) ) { + roundedNum = roundCssNumber(num); + retStr = retStr.replace(numbersToRound[i].toString(), roundedNum.toString()); + } + } + + return retStr; +} + +function generateInsetRoundCases(units, testType) { + var convert = testType.indexOf('computed') != -1 ? true : false; + var testUnit = units; + var sizes = [ + '10' + units, + '20' + units, + '30' + units, + '40' + units + ]; + + function insetRound(value) { + return 'inset(10' +testUnit+ ' round ' + value + ')'; + } + + function serializedInsetRound(lhsValues, rhsValues, convert) { + var retStr = ''; + if(!rhsValues) + retStr = 'inset(10' +testUnit+ ' round ' + lhsValues +')'; + else + retStr = 'inset(10' +testUnit+ ' round ' + lhsValues +' / '+ rhsValues +')'; + + if(convert) + return convertToPx(retStr); + + return retStr; + } + + var results = [], left, lhs, right, rhs; + for (left = 1; left <= 4; left++) { + lhs = sizes.slice(0, left).join(' '); + results.push([insetRound(lhs) +' - '+ testType, insetRound(lhs), serializedInsetRound(lhs, null, convert)]); + for (right = 1; right <= 4; right++) { + rhs = sizes.slice(0, right).join(' '); + if(lhs == rhs) + results.push([insetRound(lhs + ' / ' + rhs) +' - '+ testType, insetRound(lhs + ' / ' + rhs), serializedInsetRound(lhs, null, convert)]); + else + results.push([insetRound(lhs + ' / ' + rhs) +' - '+ testType, insetRound(lhs + ' / ' + rhs), serializedInsetRound(lhs, rhs, convert)]); + } + } + return results; +} + +function each(object, func) { + for (var prop in object) { + if (object.hasOwnProperty(prop)) { + func(prop, object[prop]); + } + } +} + +/// For saving and restoring font properties +var savedFontValues = { }; + +function setupFonts() { + var fontProperties = { + 'font-family': 'Ahem', + 'font-size': '16px', + 'line-height': '1' + }; + savedFontValues = { }; + each(fontProperties, function (key, value) { + savedFontValues[key] = document.body.style.getPropertyValue(key); + document.body.style.setProperty(key, value); + }); +} + +function restoreFonts() { + each(savedFontValues, function (key, value) { + if (value) { + document.body.style.setProperty(key, value); + } + else { + document.body.style.removeProperty(key); + } + }); + savedFontValues = { }; +} + +var validUnits = [ + "cm","mm","in","pt","pc", // Absolute length units (omitting px b/c we default to that in all tests) + "em","ex","ch","rem", // Font relative length units + "vw","vh","vmin","vmax" // Viewport percentage units + ] + +/// [actual, expected] +var validPositions = [ + +/// [ percent ], [ length ], [ percent | percent ], [ percent | length ], [ length | percent ], [ length | length ] + ["50%", "50% 50%"], + ["50u1", "50u1 50%"], + ["50% 50%", "50% 50%"], + ["50% 50u1", "50% 50u1"], + ["50u1 50%", "50u1 50%"], + ["50u1 50u1", "50u1 50u1"], + +///// [ keyword ], [ keyword keyword ] x 5 keywords + ["left", "0% 50%"], + ["top", "50% 0%"], + ["right", "100% 50%"], + ["bottom", "50% 100%"], + ["center", "50% 50%"], + + ["left top", "0% 0%"], + ["left bottom", "0% 100%"], + ["left center", "0% 50%"], + + ["top left", "0% 0%"], + ["top right", "100% 0%"], + ["top center", "50% 0%"], + + ["right top", "100% 0%"], + ["right bottom", "100% 100%"], + ["right center", "100% 50%"], + + ["bottom left", "0% 100%"], + ["bottom right", "100% 100%"], + ["bottom center", "50% 100%"], + + ["center top", "50% 0%"], + ["center left", "0% 50%"], + ["center right", "100% 50%"], + ["center bottom", "50% 100%"], + ["center center", "50% 50%"], + +////// [ keyword | percent ], [ keyword | length ], [ percent | keyword ], [ length | keyword ] x 5 keywords + ["left 50%", "0% 50%"], + ["left 50u1", "0% 50u1"], + + ["50% top", "50% 0%"], + ["50u1 top", "50u1 0%"], + + ["right 80%", "100% 80%"], + ["right 80u1", "100% 80u1"], + + ["70% bottom", "70% 100%"], + ["70u1 bottom", "70u1 100%"], + + ["center 60%", "50% 60%"], + ["center 60u1", "50% 60u1"], + ["60% center", "60% 50%"], + ["60u1 center", "60u1 50%"], + +////// [ keyword percent | keyword percent], [ keyword percent | keyword length], +////// [ keyword length | keyword length], [ keyword length | keyword percent] x 5 keywords + ["left 50% top 50%", "50% 50%"], + ["left 50% top 50u1", "50% 50u1"], + ["left 50% bottom 70%", "50% 30%"], + ["left 50% bottom 70u1", "left 50% bottom 70u1"], + ["left 50u1 top 50%", "50u1 50%"], + ["left 50u1 top 50u1", "50u1 50u1"], + ["left 50u1 bottom 70%", "50u1 30%"], + ["left 50u1 bottom 70u1", "left 50u1 bottom 70u1"], + + ["top 50% left 50%", "50% 50%"], + ["top 50% left 50u1", "50u1 50%"], + ["top 50% right 80%", "20% 50%"], + ["top 50% right 80u1", "right 80u1 top 50%"], + ["top 50u1 left 50%", "50% 50u1"], + ["top 50u1 left 50u1", "50u1 50u1"], + ["top 50u1 right 80%", "20% 50u1"], + ["top 50u1 right 80u1", "right 80u1 top 50u1"], + + ["bottom 70% left 50%", "50% 30%"], + ["bottom 70% left 50u1", "50u1 30%"], + ["bottom 70% right 80%", "20% 30%"], + ["bottom 70% right 80u1", "right 80u1 top 30%"], + ["bottom 70u1 left 50%", "left 50% bottom 70u1"], + ["bottom 70u1 left 50u1", "left 50u1 bottom 70u1"], + ["bottom 70u1 right 80%", "left 20% bottom 70u1"], + ["bottom 70u1 right 80u1", "right 80u1 bottom 70u1"], + + ["right 80% top 50%", "20% 50%"], + ["right 80% top 50u1", "20% 50u1"], + ["right 80% bottom 70%", "20% 30%"], + ["right 80% bottom 70u1", "left 20% bottom 70u1"], + ["right 80u1 top 50%", "right 80u1 top 50%"], + ["right 80u1 top 50u1", "right 80u1 top 50u1"], + ["right 80u1 bottom 70%", "right 80u1 top 30%"], + ["right 80u1 bottom 70u1", "right 80u1 bottom 70u1"], +]; + +var invalidPositions = [ +////// [ keyword | percent ], [ keyword | length ], [ percent | keyword ], [ length | keyword ] x 5 keywords + "50% left", + "50px left", + "top 50%", + "80% right", + "80px right", + "bottom 70%", + "bottom 70px", + +////// [ keyword | keyword percent ], [ keyword | keyword length ] x 5 keywords + "center center 60%", + "center center 60px", + + "left center 60%", + "left center 60px", + "left right 80%", + "left right 80px", + "left left 50%", + "left left 50px", + + "top center 60%", + "top center 60px", + "top bottom 80%", + "top bottom 80px", + "top top 50%", + "top top 50px", + + "bottom center 60%", + "bottom center 60px", + "bottom top 50%", + "bottom top 50px", + "bottom bottom 50%", + "bottom bottom 50px", + + "right center 60%", + "right center 60px", + "right left 50%", + "right left 50px", + "right right 70%", + "right right 70px", + +////// [ keyword percent | keyword], [ keyword length | keyword ] x 5 keywords + "center 60% top", + "center 60px top", + "center 60% bottom", + "center 60px bottom", + "center 60% left", + "center 60px left", + "center 60% right", + "center 60px right", + "center 60% center", + "center 60px center", + + "left 50% right", + "left 50px right", + "left 50% left", + "left 50px left", + + "top 50% bottom", + "top 50px bottom", + "top 50% top", + "top 50px top", + + "bottom 70% top", + "bottom 70px top", + "bottom 70% bottom", + "bottom 70px bottom", + + "right 80% left", + "right 80px left", + +////// [ keyword percent | keyword percent], [ keyword percent | keyword length], +////// [ keyword length | keyword length], [ keyword length | keyword percent] x 5 keywords + "center 60% top 50%", + "center 60% top 50px", + "center 60% bottom 70%", + "center 60% bottom 70px", + "center 60% left 50%", + "center 60% left 50px", + "center 60% right 70%", + "center 60% right 70px", + "center 60% center 65%", + "center 60% center 65px", + "center 60px top 50%", + "center 60px top 50px", + "center 60px bottom 70%", + "center 60px bottom 70px", + "center 60px left 50%", + "center 60px left 50px", + "center 60px right 70%", + "center 60px right 70px", + "center 60px center 65%", + "center 60px center 65px", + + "left 50% center 60%", + "left 50% center 60px", + "left 50% right 80%", + "left 50% right 80px", + "left 50% left 50%", + "left 50% left 50px", + "left 50px center 60%", + "left 50px center 60px", + "left 50px right 80%", + "left 50px right 80px", + "left 50px left 50%", + "left 50px left 50px", + + "top 50% center 60%", + "top 50% center 60px", + "top 50% bottom 50%", + "top 50% bottom 50px", + "top 50% top 50%", + "top 50% top 50px", + "top 50px center 60%", + "top 50px center 60px", + "top 50px bottom 70%", + "top 50px bottom 70px", + "top 50px top 50%", + "top 50px top 50px", + + "bottom 70% center 60%", + "bottom 70% center 60px", + "bottom 70% top 50%", + "bottom 70% top 50px", + "bottom 70% bottom 50%", + "bottom 70% bottom 50px", + "bottom 70px center 60%", + "bottom 70px center 60px", + "bottom 70px top 50%", + "bottom 70px top 50px", + "bottom 70px bottom 50%", + "bottom 70px bottom 50px", + + "right 80% center 60%", + "right 80% center 60px", + "right 80% left 50%", + "right 80% left 50px", + "right 80% right 85%", + "right 80% right 85px", + "right 80px center 60%", + "right 80px center 60px", + "right 80px left 50%", + "right 80px left 50px", + "right 80px right 85%", + "right 80px right 85px" +]; + +// valid radii values for circle + ellipse +// [value, expected_inline, [expected_computed?]] +var validCircleRadii = [ + ['', 'at 50% 50%', 'at 50% 50%'], + ['50u1', '50u1 at 50% 50%'], + ['50%', '50% at 50% 50%'], + ['closest-side', 'at 50% 50%'], + ['farthest-side', 'farthest-side at 50% 50%'] +] +var validEllipseRadii = [ + ['', 'at 50% 50%', 'at 50% 50%'], + ['50u1 100u1', '50u1 100u1 at 50% 50%'], + ['100u1 100px', '100u1 100px at 50% 50%'], + ['25% 50%', '25% 50% at 50% 50%'], + ['50u1 25%', '50u1 25% at 50% 50%'], + ['25% 50u1', '25% 50u1 at 50% 50%'], + ['25% closest-side', '25% closest-side at 50% 50%'], + ['25u1 closest-side', '25u1 closest-side at 50% 50%'], + ['closest-side 75%', 'closest-side 75% at 50% 50%'], + ['closest-side 75u1', 'closest-side 75u1 at 50% 50%'], + ['25% farthest-side', '25% farthest-side at 50% 50%'], + ['25u1 farthest-side', '25u1 farthest-side at 50% 50%'], + ['farthest-side 75%', 'farthest-side 75% at 50% 50%'], + ['farthest-side 75u1', 'farthest-side 75u1 at 50% 50%'], + ['closest-side closest-side', 'at 50% 50%'], + ['farthest-side farthest-side', 'farthest-side farthest-side at 50% 50%'], + ['closest-side farthest-side', 'closest-side farthest-side at 50% 50%'], + ['farthest-side closest-side', 'farthest-side closest-side at 50% 50%'] +] + +var validInsets = [ + ["One arg - u1", "10u1"], + ["One arg - u2", "10u2"], + ["Two args - u1 u1", "10u1 20u1"], + ["Two args - u1 u2", "10u1 20u2"], + ["Two args - u2 u1", "10u2 20u1"], + ["Two args - u2 u2", "10u2 20u2"], + ["Three args - u1 u1 u1", "10u1 20u1 30u1"], + ["Three args - u1 u1 u2", "10u1 20u1 30u2"], + ["Three args - u1 u2 u1", "10u1 20u2 30u1"], + ["Three args - u1 u2 u2 ", "10u1 20u2 30u2"], + ["Three args - u2 u1 u1", "10u2 20u1 30u1"], + ["Three args - u2 u1 u2 ", "10u2 20u1 30u2"], + ["Three args - u2 u2 u1 ", "10u2 20u2 30u1"], + ["Three args - u2 u2 u2 ","10u2 20u2 30u2"], + ["Four args - u1 u1 u1 u1", "10u1 20u1 30u1 40u1"], + ["Four args - u1 u1 u1 u2", "10u1 20u1 30u1 40u2"], + ["Four args - u1 u1 u2 u1", "10u1 20u1 30u2 40u1"], + ["Four args - u1 u1 u2 u2", "10u1 20u1 30u2 40u2"], + ["Four args - u1 u2 u1 u1", "10u1 20u2 30u1 40u1"], + ["Four args - u1 u2 u1 u2", "10u1 20u2 30u1 40u2"], + ["Four args - u1 u2 u2 u1", "10u1 20u2 30u2 40u1"], + ["Four args - u1 u2 u2 u2", "10u1 20u2 30u2 40u2"], + ["Four args - u2 u1 u1 u1", "10u2 20u1 30u1 40u1"], + ["Four args - u2 u1 u1 u2", "10u2 20u1 30u1 40u2"], + ["Four args - u2 u1 u2 u1", "10u2 20u1 30u2 40u1"], + ["Four args - u2 u1 u2 u2", "10u2 20u1 30u2 40u2"], + ["Four args - u2 u2 u1 u1", "10u2 20u2 30u1 40u1"], + ["Four args - u2 u2 u1 u2", "10u2 20u2 30u1 40u2"], + ["Four args - u2 u2 u2 u1", "10u2 20u2 30u2 40u1"], + ["Four args - u2 u2 u2 u2", "10u2 20u2 30u2 40u2"] +] + +var validPolygons = [ + ["One vertex - u1 u1", "10u1 20u1"], + ["One vertex - u1 u2", "10u1 20u2"], + ["Two vertices - u1 u1, u1 u1", "10u1 20u1, 30u1 40u1"], + ["Two vertices - u1 u1, u2 u2", "10u1 20u1, 30u2 40u2"], + ["Two vertices - u2 u2, u1 u1", "10u2 20u2, 30u1 40u1"], + ["Two vertices - u1 u2, u2 u1", "10u1 20u2, 30u2 40u1"], + ["Three vertices - u1 u1, u1 u1, u1 u1", "10u1 20u1, 30u1 40u1, 50u1 60u1"], + ["Three vertices - u2 u2, u2 u2, u2 u2", "10u2 20u2, 30u2 40u2, 50u2 60u2"], + ["Three vertices - u3 u3, u3 u3, u3 u3", "10u3 20u3, 30u3 40u3, 50u3 60u3"], + ["Three vertices - u1 u1, u2 u2, u3 u3", "10u1 20u1, 30u2 40u2, 50u3 60u3"], + ["Three vertices - u3 u3, u1, u1, u2 u2", "10u3 20u3, 30u1 40u1, 50u2 60u2"], +] + +// [test value, expected property value, expected computed style] +// See https://github.com/w3c/csswg-drafts/issues/4399#issuecomment-556160413 +// for the latest resolution to this respect. +var calcTestValues = [ + ["calc(10in)", "calc(960px)", "960px"], + ["calc(10in + 20px)", "calc(980px)", "980px"], + ["calc(30%)", "calc(30%)", "30%"], + ["calc(100%/4)", "calc(25%)", "25%"], + ["calc(25%*3)", "calc(75%)", "75%"], + ["calc(25%*3 - 10in)", "calc(75% - 960px)", "calc(75% - 960px)"], + ["calc((12.5%*6 + 10in) / 4)", "calc(18.75% + 240px)", "calc(18.75% + 240px)"] +] + +return { + testInlineStyle: testInlineStyle, + testComputedStyle: testComputedStyle, + testShapeMarginInlineStyle: testShapeMarginInlineStyle, + testShapeMarginComputedStyle: testShapeMarginComputedStyle, + testShapeThresholdInlineStyle: testShapeThresholdInlineStyle, + testShapeThresholdComputedStyle: testShapeThresholdComputedStyle, + buildTestCases: buildTestCases, + buildRadiiTests: buildRadiiTests, + buildPositionTests: buildPositionTests, + buildInsetTests: buildInsetTests, + buildPolygonTests: buildPolygonTests, + generateInsetRoundCases: generateInsetRoundCases, + buildCalcTests: buildCalcTests, + validUnits: validUnits, + calcTestValues: calcTestValues, + roundResultStr: roundResultStr, + setupFonts: setupFonts, + restoreFonts: restoreFonts, +} +})(); |