page-descriptors.html (5697B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <link rel="author" title="Mozilla" href="https://mozilla.org"> 5 <link rel="help" href="https://drafts.csswg.org/cssom/#the-cssstyledeclaration-interface"> 6 <title>CSSPageDescriptors properties tests</title> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 @page { 11 size: a3; 12 page-orientation: rotate-right; 13 margin: 1em 24px 2in 101.5mm; 14 } 15 @page { 16 size: jis-b5 landscape; 17 } 18 @page { 19 size: 216mm; 20 } 21 </style> 22 </head> 23 <body> 24 <div id="target"></div> 25 <script> 26 'use strict'; 27 28 let element = document.getElementById("target"); 29 let computedStyle = window.getComputedStyle(element); 30 let style = element.style; 31 let styleSheet = document.styleSheets[0]; 32 let marginNames = ["left", "right", "top", "bottom"]; 33 let pageDescriptors = ["margin", "page-orientation", "size"]; 34 marginNames.forEach(function(n){ 35 pageDescriptors.push("margin-" + n); 36 pageDescriptors.push("margin" + n[0].toUpperCase() + n.slice(1)); 37 }); 38 39 test(t => { 40 // Check that size isn't exposed on all CSS style declarations. 41 assert_equals(computedStyle.size, undefined, 42 "computed style should not have size property"); 43 assert_equals(computedStyle.getPropertyValue("size"), "", 44 "computed style getPropertyValue(\"size\") should be empty"); 45 46 assert_equals(style.size, undefined, 47 "style should not have size property"); 48 assert_equals(style.getPropertyValue("size"), "", 49 "style getPropertyValue(\"size\") should be empty"); 50 for(const val of ["initial", "auto", "100px"]){ 51 style.setProperty("size", val); 52 assert_false(CSS.supports("size", val)); 53 assert_equals(style.size, undefined, 54 "style should not have size property after assigning size=" + val); 55 assert_equals(style.getPropertyValue("size"), "", 56 "style getPropertyValue(\"size\") should be empty after assigning size=" + val); 57 } 58 pageDescriptors.forEach(function(prop){ 59 assert_own_property(styleSheet.cssRules[0].style.__proto__, prop, 60 "CSSPageDescriptors should have property " + prop); 61 }); 62 assert_equals(styleSheet.cssRules[0].style.size, "a3"); 63 assert_equals(styleSheet.cssRules[0].style.pageOrientation, "rotate-right"); 64 assert_equals(styleSheet.cssRules[0].style.getPropertyValue("page-orientation"), "rotate-right", 65 'Value of page-orientation should match pageOrientation from CSS'); 66 assert_equals(styleSheet.cssRules[1].style.size, "jis-b5 landscape"); 67 assert_equals(styleSheet.cssRules[2].style.size, "216mm"); 68 69 // Ensure we can set the size property to a valid value. 70 styleSheet.cssRules[2].style.size = "portrait"; 71 assert_equals(styleSheet.cssRules[2].style.size, "portrait", 72 'Should have been able to set size property to "portrait" on CSSPageDescriptors'); 73 // Ensure we cannot set the size property to an invalid property. 74 styleSheet.cssRules[2].style.size = "notarealsize"; 75 assert_equals(styleSheet.cssRules[2].style.size, "portrait", 76 'Should not have been able to set size property to "notarealsize" on CSSPageDescriptors'); 77 78 // Ensure we can set the orientation property to a valid value. 79 styleSheet.cssRules[2].style.pageOrientation = "rotate-left"; 80 assert_equals(styleSheet.cssRules[2].style.pageOrientation, "rotate-left", 81 'Should have been able to set pageOrientation property to "rotate-left" on CSSPageDescriptors'); 82 assert_equals(styleSheet.cssRules[2].style.getPropertyValue("page-orientation"), "rotate-left", 83 'Value of page-orientation should match pageOrientation after setting from script'); 84 // Ensure we cannot set the orientation property to an invalid property. 85 styleSheet.cssRules[2].style.pageOrientation = "schmotate-schmeft"; 86 assert_equals(styleSheet.cssRules[2].style.pageOrientation, "rotate-left", 87 'Should not have been able to set pageOrientation property to "schmotate-schmeft" on CSSPageDescriptors'); 88 89 // Ensure we cannot set invalid page properties. 90 styleSheet.cssRules[2].style.setProperty("float", "left"); 91 assert_equals(styleSheet.cssRules[2].style.cssFloat, undefined); 92 93 assert_equals(styleSheet.cssRules[0].style.marginLeft, "101.5mm"); 94 assert_equals(styleSheet.cssRules[0].style.marginRight, "24px"); 95 assert_equals(styleSheet.cssRules[0].style.marginTop, "1em"); 96 assert_equals(styleSheet.cssRules[0].style.marginBottom, "2in"); 97 marginNames.forEach(function(name){ 98 let name1 = "margin-" + name; 99 let name2 = "margin" + name[0].toUpperCase() + name.slice(1); 100 assert_equals(styleSheet.cssRules[0].style[name1], 101 styleSheet.cssRules[0].style[name2], 102 "CSSPageDescriptors " + name1 + " and " + name2 + " should be the same."); 103 // Attempt setting through each name and ensure it is represented in the other. 104 styleSheet.cssRules[0].style[name1] = "99px"; 105 assert_equals(styleSheet.cssRules[0].style[name1], "99px", 106 "Should have been able to set " + name1 + " property on CSSPageDescriptors"); 107 assert_equals(styleSheet.cssRules[0].style[name2], "99px", 108 "Setting " + name1 + " on CSSPageDescriptors should also set " + name2); 109 styleSheet.cssRules[0].style[name2] = "216px"; 110 assert_equals(styleSheet.cssRules[0].style[name2], "216px", 111 "Should have been able to set " + name2 + " property on CSSPageDescriptors"); 112 assert_equals(styleSheet.cssRules[0].style[name1], "216px", 113 "Setting " + name2 + " on CSSPageDescriptors should also set " + name1); 114 }); 115 }); 116 </script> 117 </body> 118 </html>