Commit d5299a49 authored by Eric Willigers's avatar Eric Willigers Committed by Commit Bot

CSS: WPTs for CSS Fragmentation parsing

Test parsing, serialiation and computed values for properties defined
in CSS Fragmentation Module Level 3
https://drafts.csswg.org/css-break/

Blink has expected failures for keywords relating to CSS Regions.

Change-Id: Ie5a930ba2d805c7bd45aa84c293bc8ff5922da98
Reviewed-on: https://chromium-review.googlesource.com/c/1351190
Commit-Queue: Emil A Eklund <eae@chromium.org>
Reviewed-by: default avatarEmil A Eklund <eae@chromium.org>
Cr-Commit-Position: refs/heads/master@{#611257}
parent b39cccfb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: getComputedValue().boxDecorationBreak</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-box-decoration-break">
<meta name="assert" content="box-decoration-break computed value is as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("box-decoration-break", "slice");
test_computed_value("box-decoration-break", "clone");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing box-decoration-break with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-box-decoration-break">
<meta name="assert" content="box-decoration-break supports only the grammar 'slice | clone'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("box-decoration-break", "auto");
test_invalid_value("box-decoration-break", "slice clone");
</script>
</body>
</html>
This is a testharness.js-based test.
FAIL e.style['box-decoration-break'] = "slice" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['box-decoration-break'] = "clone" should set the property value assert_not_equals: property should be set got disallowed value ""
Harness: the test ran to completion.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing box-decoration-break with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-box-decoration-break">
<meta name="assert" content="box-decoration-break supports the full grammar 'slice | clone'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("box-decoration-break", "slice");
test_valid_value("box-decoration-break", "clone");
</script>
</body>
</html>
This is a testharness.js-based test.
PASS Property break-after value 'auto' computes to 'auto'
PASS Property break-after value 'avoid' computes to 'avoid'
PASS Property break-after value 'avoid-page' computes to 'avoid-page'
PASS Property break-after value 'page' computes to 'page'
PASS Property break-after value 'left' computes to 'left'
PASS Property break-after value 'right' computes to 'right'
PASS Property break-after value 'recto' computes to 'recto'
PASS Property break-after value 'verso' computes to 'verso'
PASS Property break-after value 'avoid-column' computes to 'avoid-column'
PASS Property break-after value 'column' computes to 'column'
FAIL Property break-after value 'avoid-region' computes to 'avoid-region' assert_equals: expected "avoid-region" but got "auto"
FAIL Property break-after value 'region' computes to 'region' assert_equals: expected "region" but got "auto"
Harness: the test ran to completion.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: getComputedValue().breakAfter</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-after">
<meta name="assert" content="break-after computed value is as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("break-after", "auto");
test_computed_value("break-after", "avoid");
test_computed_value("break-after", "avoid-page");
test_computed_value("break-after", "page");
test_computed_value("break-after", "left");
test_computed_value("break-after", "right");
test_computed_value("break-after", "recto");
test_computed_value("break-after", "verso");
test_computed_value("break-after", "avoid-column");
test_computed_value("break-after", "column");
test_computed_value("break-after", "avoid-region");
test_computed_value("break-after", "region");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing break-after with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-after">
<meta name="assert" content="break-after supports only the grammar 'auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("break-after", "none");
test_invalid_value("break-after", "avoid region");
</script>
</body>
</html>
This is a testharness.js-based test.
PASS e.style['break-after'] = "auto" should set the property value
PASS e.style['break-after'] = "avoid" should set the property value
PASS e.style['break-after'] = "avoid-page" should set the property value
PASS e.style['break-after'] = "page" should set the property value
PASS e.style['break-after'] = "left" should set the property value
PASS e.style['break-after'] = "right" should set the property value
PASS e.style['break-after'] = "recto" should set the property value
PASS e.style['break-after'] = "verso" should set the property value
PASS e.style['break-after'] = "avoid-column" should set the property value
PASS e.style['break-after'] = "column" should set the property value
FAIL e.style['break-after'] = "avoid-region" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['break-after'] = "region" should set the property value assert_not_equals: property should be set got disallowed value ""
Harness: the test ran to completion.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing break-after with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-after">
<meta name="assert" content="break-after supports the full grammar 'auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("break-after", "auto");
test_valid_value("break-after", "avoid");
test_valid_value("break-after", "avoid-page");
test_valid_value("break-after", "page");
test_valid_value("break-after", "left");
test_valid_value("break-after", "right");
test_valid_value("break-after", "recto");
test_valid_value("break-after", "verso");
test_valid_value("break-after", "avoid-column");
test_valid_value("break-after", "column");
test_valid_value("break-after", "avoid-region");
test_valid_value("break-after", "region");
</script>
</body>
</html>
This is a testharness.js-based test.
PASS Property break-before value 'auto' computes to 'auto'
PASS Property break-before value 'avoid' computes to 'avoid'
PASS Property break-before value 'avoid-page' computes to 'avoid-page'
PASS Property break-before value 'page' computes to 'page'
PASS Property break-before value 'left' computes to 'left'
PASS Property break-before value 'right' computes to 'right'
PASS Property break-before value 'recto' computes to 'recto'
PASS Property break-before value 'verso' computes to 'verso'
PASS Property break-before value 'avoid-column' computes to 'avoid-column'
PASS Property break-before value 'column' computes to 'column'
FAIL Property break-before value 'avoid-region' computes to 'avoid-region' assert_equals: expected "avoid-region" but got "auto"
FAIL Property break-before value 'region' computes to 'region' assert_equals: expected "region" but got "auto"
Harness: the test ran to completion.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: getComputedValue().breakBefore</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-before">
<meta name="assert" content="break-before computed value is as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("break-before", "auto");
test_computed_value("break-before", "avoid");
test_computed_value("break-before", "avoid-page");
test_computed_value("break-before", "page");
test_computed_value("break-before", "left");
test_computed_value("break-before", "right");
test_computed_value("break-before", "recto");
test_computed_value("break-before", "verso");
test_computed_value("break-before", "avoid-column");
test_computed_value("break-before", "column");
test_computed_value("break-before", "avoid-region");
test_computed_value("break-before", "region");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing break-before with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-before">
<meta name="assert" content="break-before supports only the grammar 'auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("break-before", "none");
test_invalid_value("break-before", "avoid region");
</script>
</body>
</html>
This is a testharness.js-based test.
PASS e.style['break-before'] = "auto" should set the property value
PASS e.style['break-before'] = "avoid" should set the property value
PASS e.style['break-before'] = "avoid-page" should set the property value
PASS e.style['break-before'] = "page" should set the property value
PASS e.style['break-before'] = "left" should set the property value
PASS e.style['break-before'] = "right" should set the property value
PASS e.style['break-before'] = "recto" should set the property value
PASS e.style['break-before'] = "verso" should set the property value
PASS e.style['break-before'] = "avoid-column" should set the property value
PASS e.style['break-before'] = "column" should set the property value
FAIL e.style['break-before'] = "avoid-region" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['break-before'] = "region" should set the property value assert_not_equals: property should be set got disallowed value ""
Harness: the test ran to completion.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing break-before with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-before">
<meta name="assert" content="break-before supports the full grammar 'auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("break-before", "auto");
test_valid_value("break-before", "avoid");
test_valid_value("break-before", "avoid-page");
test_valid_value("break-before", "page");
test_valid_value("break-before", "left");
test_valid_value("break-before", "right");
test_valid_value("break-before", "recto");
test_valid_value("break-before", "verso");
test_valid_value("break-before", "avoid-column");
test_valid_value("break-before", "column");
test_valid_value("break-before", "avoid-region");
test_valid_value("break-before", "region");
</script>
</body>
</html>
This is a testharness.js-based test.
PASS Property break-inside value 'auto' computes to 'auto'
PASS Property break-inside value 'avoid' computes to 'avoid'
PASS Property break-inside value 'avoid-page' computes to 'avoid-page'
PASS Property break-inside value 'avoid-column' computes to 'avoid-column'
FAIL Property break-inside value 'avoid-region' computes to 'avoid-region' assert_equals: expected "avoid-region" but got "auto"
Harness: the test ran to completion.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: getComputedValue().breakAfter</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-inside">
<meta name="assert" content="break-inside computed value is as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("break-inside", "auto");
test_computed_value("break-inside", "avoid");
test_computed_value("break-inside", "avoid-page");
test_computed_value("break-inside", "avoid-column");
test_computed_value("break-inside", "avoid-region");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing break-inside with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-inside">
<meta name="assert" content="break-inside supports only the grammar 'auto | avoid | avoid-page | avoid-column | avoid-region'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("break-inside", "region");
test_invalid_value("break-inside", "auto avoid");
</script>
</body>
</html>
This is a testharness.js-based test.
PASS e.style['break-inside'] = "auto" should set the property value
PASS e.style['break-inside'] = "avoid" should set the property value
PASS e.style['break-inside'] = "avoid-page" should set the property value
PASS e.style['break-inside'] = "avoid-column" should set the property value
FAIL e.style['break-inside'] = "avoid-region" should set the property value assert_not_equals: property should be set got disallowed value ""
Harness: the test ran to completion.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing break-inside with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-inside">
<meta name="assert" content="break-inside supports the full grammar 'auto | avoid | avoid-page | avoid-column | avoid-region'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("break-inside", "auto");
test_valid_value("break-inside", "avoid");
test_valid_value("break-inside", "avoid-page");
test_valid_value("break-inside", "avoid-column");
test_valid_value("break-inside", "avoid-region");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: getComputedValue().orphans</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-orphans">
<meta name="assert" content="orphans computed value is specified integer.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("orphans", "1");
test_computed_value("orphans", "234");
test_computed_value("orphans", "calc(1 + 234)", "235");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing orphans with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-orphans">
<meta name="assert" content="orphans supports only the grammar '<integer>'.">
<meta name="assert" content="Negative values and zero are invalid.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("orphans", "auto");
test_invalid_value("orphans", "1 234");
test_invalid_value("orphans", "-234");
test_invalid_value("orphans", "-1");
test_invalid_value("orphans", "0");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing orphans with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-orphans">
<meta name="assert" content="orphans supports the full grammar '<integer>'.">
<meta name="assert" content="Negative values and zero are invalid.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("orphans", "1");
test_valid_value("orphans", "234");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: getComputedValue().widows</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-widows">
<meta name="assert" content="widows computed value is specified integer.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("widows", "1");
test_computed_value("widows", "234");
test_computed_value("widows", "calc(1 + 234)", "235");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing widows with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-widows">
<meta name="assert" content="widows supports only the grammar '<integer>'.">
<meta name="assert" content="Negative values and zero are invalid.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("widows", "auto");
test_invalid_value("widows", "1 234");
test_invalid_value("widows", "-234");
test_invalid_value("widows", "-1");
test_invalid_value("widows", "0");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fragmentation Module Level 3: parsing widows with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-widows">
<meta name="assert" content="widows supports the full grammar '<integer>'.">
<meta name="assert" content="Negative values and zero are invalid.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("widows", "1");
test_valid_value("widows", "234");
</script>
</body>
</html>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment