Commit 0e3b0d1c authored by Felipe Erias's avatar Felipe Erias Committed by Commit Bot

Export automated css-page tests to WPT

Export and adapt printing/page-rule-css-text.html to WPT,
providing automated tests for the parsing of different
uses and declarations of the CSS @page rule, including
inside @media rules and for properties of HTML elements.

R=rego@igalia.com

Change-Id: I790370832d3a300f78da683481bb48ca5e53985b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2074837Reviewed-by: default avatarManuel Rego <rego@igalia.com>
Commit-Queue: Manuel Rego <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#745640}
parent 140d1e69
<!doctype html>
<meta charset="utf-8">
<title>CSS Paged Media: parsing @page declarations</title>
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/>
<link rel="help" href="https://drafts.csswg.org/css-page/#at-page-rule"/>
<meta name="assert" content="Test that @page declarations are parsed correctly.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style type="text/css">
@page :visited { /* :visited is invalid for @page */
color: red;
}
@page a_page_name:visited { /* :visited is invalid for @page */
background-color: red;
}
@page {
margin-top:5cm;
margin-bottom:10cm;
}
@page :left {
margin-right:3cm;
}
@page :right {
margin-left:3cm;
}
@page :first {
border-width:1px;
}
@page hello {
color:green;
}
@page world:right {
background-color:green;
}
@page auto_page {
size: auto;
}
@page square_page {
size: 4in;
}
@page letter_page {
size: letter;
}
@page page_width_height {
size: 10cm 15cm;
}
@page page_size_orientation {
size: ledger landscape;
}
@page page_orientation_size {
size: portrait a4;
}
@page page_jis_size_orientation {
size: jis-b5 portrait;
}
@page page_orientation_jis_size {
size: landscape jis-b4;
}
@page err_empty_size {
size:;
}
@page err_unknow_page_size {
size: yotsugiri;
}
@page err_length_and_page_size {
size: 10cm letter;
}
@page err_length_and_orientation {
size: 10cm landscape;
}
@page err_orientations {
size: portrait landscape;
}
@page err_too_many_params {
size: a5 landscape auto;
}
</style>
<script type="text/javascript">
test(function(){
let expectedForSelector = {
"" : "margin-top: 5cm; margin-bottom: 10cm;",
":left" : "margin-right: 3cm;",
":right" : "margin-left: 3cm;",
":first" : "border-width: 1px;",
"hello" : "color: green;",
"world:right" : "background-color: green;",
"auto_page" : "size: auto;",
"square_page" : "size: 4in;",
"letter_page" : "size: letter;",
"page_width_height" : "size: 10cm 15cm;",
"page_size_orientation" : "size: ledger landscape;",
"page_orientation_size" : "size: a4 portrait;",
"page_jis_size_orientation" : "size: jis-b5 portrait;",
"page_orientation_jis_size" : "size: jis-b4 landscape;",
"err_empty_size" : "",
"err_unknow_page_size" : "",
"err_length_and_page_size" : "",
"err_length_and_orientation" : "",
"err_orientations" : "",
"err_too_many_params" : ""
};
let styleSheets = document.styleSheets;
for (let i = 0; i < styleSheets.length; i++) {
let rules = styleSheets[i].cssRules;
for (let rule of rules) {
if (rule.type == CSSRule.PAGE_RULE) {
let expected = expectedForSelector[rule.selectorText];
assert_equals(rule.style.cssText, expected, "unexpected @page contents");
delete expectedForSelector[rule.selectorText];
}
}
}
assert_equals(Object.keys(expectedForSelector).length, 0, "missing @page selectors");
}, "test CSS @page declarations");
</script>
<!doctype html>
<meta charset="utf-8">
<title>CSS Paged Media: parsing @page declarations inside @media</title>
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/>
<link rel="help" href="https://drafts.csswg.org/css-page/#at-page-rule"/>
<meta name="assert" content="Test that @page declarations inside @media are parsed correctly.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style type="text/css">
@media print {
@page {
margin: 3cm;
}
@page :first {
margin-top: 6cm;
}
@page :left {
color: red;
}
@page :right {
color: blue;
}
}
</style>
<script type="text/javascript">
test(function(){
let expectedForSelector = {
"" : "margin: 3cm;",
":first" : "margin-top: 6cm;",
":left" : "color: red;",
":right" : "color: blue;"
};
let styleSheets = document.styleSheets;
for (let i = 0; i < styleSheets.length; i++) {
let rules = styleSheets[i].cssRules;
for (let rule of rules) {
if (rule.type == CSSRule.MEDIA_RULE && rule.conditionText == 'print') {
for (let mediaRule of rule.cssRules) {
if (mediaRule.type == CSSRule.PAGE_RULE) {
let expected = expectedForSelector[mediaRule.selectorText];
assert_equals(mediaRule.style.cssText, expected, "unexpected @page contents");
delete expectedForSelector[mediaRule.selectorText];
}
}
}
}
}
assert_equals(Object.keys(expectedForSelector).length, 0, "missing @page selectors in @media");
}, "test @page inside a @media print rule");
</script>
<!doctype html>
<meta charset="utf-8">
<title>CSS Paged Media: parsing page properties inside HTML elements</title>
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/>
<link rel="help" href="https://drafts.csswg.org/css-page/#using-named-pages"/>
<meta name="assert" content="Test that page properties of HTML elements are parsed correctly.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<style type="text/css">
@page {
size: a4;
}
@page small_page {
size: a5 portrait;
}
@page large_page {
size: a3 landscape;
}
</style>
<script type="text/javascript">
test(function(){
test_valid_value("page", "auto");
test_valid_value("page", "small_page");
test_valid_value("page", "large_page");
test_invalid_value("page", "auto small_page");
test_invalid_value("page", "large_page auto");
test_invalid_value("page", "small_page large_page");
test_invalid_value("page", "1cm");
}, "test page properties in HTML elements");
</script>
@page { margin-top: 5cm; margin-bottom: 10cm; }
@page :left { margin-right: 3cm; }
@page :right { margin-left: 3cm; }
@page :first { border-width: 1px; }
@page hello { color: green; }
@page world:right { background-color: green; }
@media print { @page somepage:first { margin: 3cm; } }
@page auto_page { size: auto; }
@page square_page { size: 4in; }
@page letter_page { size: letter; }
@page page_widht_height { size: 10cm 15cm; }
@page page_size_orientation { size: ledger landscape; }
@page page_orientation_size { size: a4 portrait; }
@page page_jis_size_orientation { size: jis-b5 portrait; }
@page page_orientation_jis_size { size: jis-b4 landscape; }
@page err_empty_size { }
@page err_unknow_page_size { }
@page err_length_and_page_size { }
@page err_length_and_orientation { }
@page err_orientations { }
@page err_too_many_params { }
table { page: Rotated; }
div { page: auto; }
pre { }
p { }
<!doctype html>
<html>
<head>
<style type="text/css">
@page :visited { /* :visited is invalid for @page */
color: red;
}
@page a_page_name:visited { /* :visited is invalid for @page */
background-color: red;
}
@page {
margin-top:5cm;
margin-bottom:10cm;
}
@page :left {
margin-right:3cm;
}
@page :right {
margin-left:3cm;
}
@page :first {
border-width:1px;
}
@page hello {
color:green;
}
@page world:right {
background-color:green;
}
@media print {
@page somepage:first {
margin:3cm;
}
}
@page auto_page {
size: auto;
}
@page square_page {
size: 4in;
}
@page letter_page {
size: letter;
}
@page page_widht_height {
size: 10cm 15cm;
}
@page page_size_orientation {
size: ledger landscape;
}
@page page_orientation_size {
size: portrait a4;
}
@page page_jis_size_orientation {
size: jis-b5 portrait;
}
@page page_orientation_jis_size {
size: landscape jis-b4;
}
@page err_empty_size {
size:;
}
@page err_unknow_page_size {
size: yotsugiri;
}
@page err_length_and_page_size {
size: 10cm letter;
}
@page err_length_and_orientation {
size: 10cm landscape;
}
@page err_orientations {
size: portrait landscape;
}
@page err_too_many_params {
size: a5 landscape auto;
}
table {
page: Rotated;
}
div {
page: Auto;
}
pre {
page: Auto Rotated; /* Invalid */
}
p {
page: 1cm; /* Invalid */
}
/* FIXME: Add the following once margin at-rule is implemented.
@page :first {
@top-left-corner {
content:"TLC";
}
@bottom-center {
content:"BC";
}
}
*/
</style>
<script type="text/javascript">
if (window.testRunner)
testRunner.dumpAsText();
function print(str)
{
document.getElementById("output").innerHTML += str;
}
function printCssTextOfPageRules()
{
var ss = document.styleSheets;
for (var i = 0; i < ss.length; i++) {
for (var j = 0; j < ss[i].cssRules.length; j++) {
print(ss[i].cssRules[j].cssText + "<br/>");
}
}
}
</script>
</head>
<body onload="printCssTextOfPageRules();">
<div id="output"></div>
</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