page-rule-declarations-000.html (3651B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Paged Media: parsing @page declarations</title> 4 <link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/> 5 <link rel="help" href="https://drafts.csswg.org/css-page/#at-page-rule"/> 6 <meta name="assert" content="Test that @page declarations are parsed correctly."> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <style type="text/css"> 11 :root { 12 print-color-adjust: exact; 13 } 14 15 @page :visited { /* :visited is invalid for @page */ 16 color: red; 17 } 18 @page a_page_name:visited { /* :visited is invalid for @page */ 19 background-color: red; 20 } 21 @page { 22 margin-top:5cm; 23 margin-bottom:10cm; 24 } 25 @page :left { 26 margin-right:3cm; 27 } 28 @page :right { 29 margin-left:3cm; 30 } 31 @page :first { 32 border-width:1px; 33 } 34 @page hello { 35 color:green; 36 } 37 @page world:right { 38 background-color:green; 39 } 40 @page auto_page { 41 size: auto; 42 } 43 @page square_page { 44 size: 4in; 45 } 46 @page letter_page { 47 size: letter; 48 } 49 @page page_width_height { 50 size: 10cm 15cm; 51 } 52 @page page_size_orientation { 53 size: ledger landscape; 54 } 55 @page page_orientation_size { 56 size: portrait a4; 57 } 58 @page page_jis_size_orientation { 59 size: jis-b5 portrait; 60 } 61 @page page_orientation_jis_size { 62 size: landscape jis-b4; 63 } 64 @page err_empty_size { 65 size:; 66 } 67 @page err_unknow_page_size { 68 size: yotsugiri; 69 } 70 @page err_length_and_page_size { 71 size: 10cm letter; 72 } 73 @page err_length_and_orientation { 74 size: 10cm landscape; 75 } 76 @page err_orientations { 77 size: portrait landscape; 78 } 79 @page err_too_many_params { 80 size: a5 landscape auto; 81 } 82 83 </style> 84 <script type="text/javascript"> 85 86 let expectedForSelector = { 87 "" : "margin-top: 5cm; margin-bottom: 10cm;", 88 ":left" : "margin-right: 3cm;", 89 ":right" : "margin-left: 3cm;", 90 ":first" : "border-width: 1px;", 91 "hello" : "color: green;", 92 "world:right" : "background-color: green;", 93 "auto_page" : "size: auto;", 94 "square_page" : "size: 4in;", 95 "letter_page" : "size: letter;", 96 "page_width_height" : "size: 10cm 15cm;", 97 "page_size_orientation" : "size: ledger landscape;", 98 "page_orientation_size" : "size: a4 portrait;", 99 "page_jis_size_orientation" : "size: jis-b5 portrait;", 100 "page_orientation_jis_size" : "size: jis-b4 landscape;", 101 "err_empty_size" : "", 102 "err_unknow_page_size" : "", 103 "err_length_and_page_size" : "", 104 "err_length_and_orientation" : "", 105 "err_orientations" : "", 106 "err_too_many_params" : "" 107 }; 108 let styleSheets = document.styleSheets; 109 for (let i = 0; i < styleSheets.length; i++) { 110 let rules = styleSheets[i].cssRules; 111 for (let rule of rules) { 112 if (rule.type == CSSRule.PAGE_RULE) { 113 let expected = expectedForSelector[rule.selectorText]; 114 test(function(){ 115 assert_equals(rule.style.cssText, expected, "unexpected @page contents"); 116 }, "unexpected contents for selector ['" + rule.selectorText + "']"); 117 delete expectedForSelector[rule.selectorText]; 118 } 119 } 120 } 121 test(function() { 122 assert_equals(Object.keys(expectedForSelector).length, 0, "missing @page selectors"); 123 }); 124 125 </script>