| <!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"> |
| |
| 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]; |
| test(function(){ |
| assert_equals(rule.style.cssText, expected, "unexpected @page contents"); |
| }, "unexpected contents for selector ['" + rule.selectorText + "']"); |
| delete expectedForSelector[rule.selectorText]; |
| } |
| } |
| } |
| test(function() { |
| assert_equals(Object.keys(expectedForSelector).length, 0, "missing @page selectors"); |
| }); |
| |
| </script> |
