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/+/2074837
Reviewed-by: Manuel Rego <rego@igalia.com>
Commit-Queue: Manuel Rego <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#745640}
diff --git a/third_party/blink/web_tests/external/wpt/css/css-page/page-rule-declarations-000.html b/third_party/blink/web_tests/external/wpt/css/css-page/page-rule-declarations-000.html
new file mode 100644
index 0000000..227b914
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-page/page-rule-declarations-000.html
@@ -0,0 +1,120 @@
+<!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>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-page/page-rule-declarations-001.html b/third_party/blink/web_tests/external/wpt/css/css-page/page-rule-declarations-001.html
new file mode 100644
index 0000000..e574240
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-page/page-rule-declarations-001.html
@@ -0,0 +1,55 @@
+<!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>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-page/page-rule-declarations-002.html b/third_party/blink/web_tests/external/wpt/css/css-page/page-rule-declarations-002.html
new file mode 100644
index 0000000..183072d
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-page/page-rule-declarations-002.html
@@ -0,0 +1,36 @@
+<!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>
diff --git a/third_party/blink/web_tests/printing/page-rule-css-text-expected.txt b/third_party/blink/web_tests/printing/page-rule-css-text-expected.txt
deleted file mode 100644
index 79d3d68..0000000
--- a/third_party/blink/web_tests/printing/page-rule-css-text-expected.txt
+++ /dev/null
@@ -1,26 +0,0 @@
-@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 { }
-
diff --git a/third_party/blink/web_tests/printing/page-rule-css-text.html b/third_party/blink/web_tests/printing/page-rule-css-text.html
deleted file mode 100644
index 556f42a..0000000
--- a/third_party/blink/web_tests/printing/page-rule-css-text.html
+++ /dev/null
@@ -1,130 +0,0 @@
-<!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>
-