test_specified_value_serialization.html (10460B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Test for miscellaneous specified value issues</title> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 7 </head> 8 <body> 9 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a> 10 <p id="display"></p> 11 <div id="content" style="display: none"> 12 </div> 13 14 <pre id="test"> 15 <script type="application/javascript"> 16 17 (function test_bug_721136() { 18 // Test for transform property serialization. 19 [ 20 [" mAtRiX(1, 2,3,4, 5,6 ) ", "matrix(1, 2, 3, 4, 5, 6)"], 21 [" mAtRiX3d( 1,2,3,0,4 ,5,6,0,7,8 , 9,0,10, 11,12,1 ) ", 22 "matrix3d(1, 2, 3, 0, 4, 5, 6, 0, 7, 8, 9, 0, 10, 11, 12, 1)"], 23 [" pErSpEcTiVe( 400Px ) ", "perspective(400px)"], 24 [" rOtAtE( 90dEg ) ", "rotate(90deg)"], 25 [" rOtAtE3d( 0,0 , 1 ,180DeG ) ", "rotate3d(0, 0, 1, 180deg)"], 26 [" rOtAtEx( 100GrAD ) ", "rotateX(100grad)"], 27 [" rOtAtEy( 1.57RaD ) ", "rotateY(1.57rad)"], 28 [" rOtAtEz( 0.25TuRn ) ", "rotateZ(0.25turn)"], 29 [" sCaLe( 2 ) ", "scale(2)"], 30 [" sCaLe( 2,3 ) ", "scale(2, 3)"], 31 [" sCaLe3D( 2,4 , -9 ) ", "scale3d(2, 4, -9)"], 32 [" sCaLeX( 2 ) ", "scaleX(2)"], 33 [" sCaLeY( 2 ) ", "scaleY(2)"], 34 [" sCaLeZ( 2 ) ", "scaleZ(2)"], 35 [" sKeW( 45dEg ) ", "skew(45deg)"], 36 [" sKeW( 45dEg,45DeG ) ", "skew(45deg, 45deg)"], 37 [" sKeWx( 45DeG ) ", "skewX(45deg)"], 38 [" sKeWy( 45DeG ) ", "skewY(45deg)"], 39 [" tRaNsLaTe( 1Px ) ", "translate(1px)"], 40 [" tRaNsLaTe( 1Px,3Pt ) ", "translate(1px, 3pt)"], 41 [" tRaNsLaTe3D( 21pX,-6pX , 4pX ) ", "translate3d(21px, -6px, 4px)"], 42 [" tRaNsLaTeX( 1pT ) ", "translateX(1pt)"], 43 [" tRaNsLaTeY( 1iN ) ", "translateY(1in)"], 44 [" tRaNsLaTeZ( 15.4pX ) ", "translateZ(15.4px)"], 45 ["tranSlatex( 16px )rotatez(-90deg) rotate(100grad)\ttranslate3d(12pt, 0pc, 0.0em)", 46 "translateX(16px) rotateZ(-90deg) rotate(100grad) translate3d(12pt, 0pc, 0em)"], 47 ].forEach(function(arr) { 48 document.documentElement.style.transform = arr[0]; 49 is(document.documentElement.style.transform, arr[1], 50 "bug-721136 incorrect serialization"); 51 }); 52 53 var elt = document.documentElement; 54 55 elt.setAttribute("style", 56 "transform: tRANslatEX(5px) TRanslATey(10px) translatez(2px) ROTATEX(30deg) rotateY(30deg) rotatez(5deg) SKEWx(10deg) skewy(10deg) scaleX(2) SCALEY(0.5) scalez(2)"); 57 is(elt.style.getPropertyValue("transform"), 58 "translateX(5px) translateY(10px) translateZ(2px) rotateX(30deg) rotateY(30deg) rotateZ(5deg) skewX(10deg) skewY(10deg) scaleX(2) scaleY(0.5) scaleZ(2)", 59 "bug-721136 expected case canonicalization of transform functions"); 60 61 elt.setAttribute("style", 62 "font-variant-alternates: SWASH(fOo) stYLIStiC(Bar)"); 63 is(elt.style.getPropertyValue("font-variant-alternates"), 64 "stylistic(Bar) swash(fOo)", 65 "expected case and ordering canonicalization of font-variant-alternates functions"); 66 67 elt.setAttribute("style", ""); // leave the page in a useful state 68 })(); 69 70 (function test_bug_1347164() { 71 // Test that specified color values are serialized as "rgb()" 72 // IFF they're fully-opaque (and otherwise as "rgba()"). 73 var color = [ 74 ["rgba(0, 0, 0, 1)", "rgb(0, 0, 0)"], 75 ["rgba(0, 0, 0, 0.5)", "rgba(0, 0, 0, 0.5)"], 76 ["hsla(0, 0%, 0%, 1)", "rgb(0, 0, 0)"], 77 ["hsla(0, 0%, 0%, 0.5)", "rgba(0, 0, 0, 0.5)"], 78 ]; 79 80 var css_color_4 = [ 81 ["rgba(0 0 0 / 1)", "rgb(0, 0, 0)"], 82 ["rgba(0 0 0 / 0.1)", "rgba(0, 0, 0, 0.1)"], 83 ["rgb(0 0 0 / 1)", "rgb(0, 0, 0)"], 84 ["rgb(0 0 0 / 0.2)", "rgba(0, 0, 0, 0.2)"], 85 ["hsla(0 0% 0% / 1)", "rgb(0, 0, 0)"], 86 ["hsla(0deg 0% 0% / 0.3)", "rgba(0, 0, 0, 0.3)"], 87 ["hsl(0 0% 0% / 1)", "rgb(0, 0, 0)"], 88 ["hsl(0 0% 0% / 0.4)", "rgba(0, 0, 0, 0.4)"], 89 ]; 90 91 var frame_container = document.getElementById("display"); 92 var p = document.createElement("p"); 93 frame_container.appendChild(p); 94 95 for (var i = 0; i < color.length; ++i) { 96 var test = color[i]; 97 p.style.color = test[0]; 98 is(p.style.color, test[1], "serialization value of " + test[0]); 99 } 100 for (var i = 0; i < css_color_4.length; ++i) { 101 var test = css_color_4[i]; 102 p.style.color = test[0]; 103 is(p.style.color, test[1], "css-color-4 serialization value of " + test[0]); 104 } 105 106 p.remove(); 107 })(); 108 109 (function test_bug_1357117() { 110 // Test that vendor-prefixed gradient styles round-trip with the same prefix, 111 // or with no prefix. 112 var backgroundImages = [ 113 // [ specified style, 114 // expected serialization, 115 // descriptionOfTestcase ], 116 // Linear gradient with legacy-gradient-line (needs prefixed syntax): 117 [ "-webkit-linear-gradient(10deg, red, blue)", 118 "-webkit-linear-gradient(10deg, red, blue)", 119 "-webkit-linear-gradient with angled legacy-gradient-line" ], 120 121 // Linear gradient with box corner (needs prefixed syntax): 122 [ "-webkit-linear-gradient(top left, red, blue)", 123 "-webkit-linear-gradient(left top, red, blue)", 124 "-webkit-linear-gradient with box corner" ], 125 126 // Servo keeps the original prefix form which is closer to other impls. 127 [ "-webkit-radial-gradient(contain, red, blue)", 128 "-webkit-radial-gradient(closest-side, red, blue)", 129 "-webkit-radial-gradient with legacy 'contain' keyword" ], 130 ]; 131 132 var frame_container = document.getElementById("display"); 133 var p = document.createElement("p"); 134 frame_container.appendChild(p); 135 136 for (var i = 0; i < backgroundImages.length; ++i) { 137 var test = backgroundImages[i]; 138 p.style.backgroundImage = test[0]; 139 is(p.style.backgroundImage, test[1], 140 "serialization value of prefixed gradient expression (" + test[2] + ")"); 141 } 142 143 p.remove(); 144 })(); 145 146 (function test_bug_1357932() { 147 // Test for box-position keyword ordering, in serialization of specified CSS 148 // gradients. 149 var backgroundImages = [ 150 // [ specified style, 151 // expected serialization, 152 // descriptionOfTestcase ], 153 // Linear gradient to box position ordering: 154 [ "linear-gradient(to right top, gray, pink)", 155 "linear-gradient(to right top, gray, pink)", 156 "linear-gradient ordering to right top" ], 157 [ "linear-gradient(to top right, yellow, teal)", 158 "linear-gradient(to right top, yellow, teal)", 159 "linear-gradient ordering to top right" ], 160 ]; 161 162 var frame_container = document.getElementById("display"); 163 var p = document.createElement("p"); 164 frame_container.appendChild(p); 165 166 for (var i = 0; i < backgroundImages.length; ++i) { 167 var test = backgroundImages[i]; 168 p.style.backgroundImage = test[0]; 169 is(p.style.backgroundImage, test[1], 170 "serialization value of gradient expression (" + test[2] + ")"); 171 } 172 173 p.remove(); 174 })(); 175 176 (function test_bug_1367028() { 177 const borderImageSubprops = [ 178 "border-image-slice", 179 "border-image-outset", 180 "border-image-width" 181 ]; 182 const rectValues = [ 183 { 184 values: ["5 5 5 5", "5 5 5", "5 5", "5"], 185 expected: "5", 186 desc: "identical four sides", 187 }, 188 { 189 values: ["5 6 5 6", "5 6 5", "5 6"], 190 expected: "5 6", 191 desc: "identical values on each axis", 192 }, 193 { 194 values: ["5 6 7 6", "5 6 7"], 195 expected: "5 6 7", 196 desc: "identical values on left and right", 197 }, 198 { 199 values: ["5 6 5 7"], 200 desc: "identical values on top and bottom", 201 }, 202 { 203 values: ["5 5 6 6", "5 6 6 5"], 204 desc: "identical values on unrelated sides", 205 }, 206 { 207 values: ["5 6 7 8"], 208 desc: "different values on all sides", 209 }, 210 ]; 211 212 let frameContainer = document.getElementById("display"); 213 let p = document.createElement("p"); 214 frameContainer.appendChild(p); 215 216 for (let prop of borderImageSubprops) { 217 for (let {values, expected, desc} of rectValues) { 218 for (let value of values) { 219 p.style.setProperty(prop, value); 220 is(p.style.getPropertyValue(prop), 221 expected ? expected : value, `${desc} for ${prop}`); 222 p.style.removeProperty(prop); 223 } 224 } 225 } 226 227 p.remove(); 228 })(); 229 230 (function test_bug_1397619() { 231 var borderRadius = [ 232 // [ specified style, 233 // expected serialization, 234 // descriptionOfTestcase ], 235 [ "10px 10px", 236 "10px", 237 "Width and height specified for " ], 238 [ "10px", 239 "10px", 240 "Only width specified for " ], 241 ]; 242 243 244 var frame_container = document.getElementById("display"); 245 var p = document.createElement("p"); 246 frame_container.appendChild(p); 247 248 [ 249 "border-top-left-radius", 250 "border-bottom-left-radius", 251 "border-top-right-radius", 252 "border-bottom-right-radius", 253 "border-spacing", 254 ].forEach(function(property) { 255 for (var i = 0; i < borderRadius.length; ++i) { 256 var test = borderRadius[i]; 257 p.style.setProperty(property, test[0]); 258 is(p.style.getPropertyValue(property), test[1], test[2] + property); 259 } 260 }); 261 262 p.style.paintOrder = "markers"; 263 is(p.style.paintOrder, "markers", 264 "specified value serialization for paint-order doesn't contain repetitive values"); 265 266 p.remove(); 267 })(); 268 269 (function test_bug_1207734() { 270 // Test for rotate property serialization. 271 [ 272 [" 90deg ", "90deg"], 273 [" 100grad ", "100grad"], 274 [" 100gRaD ", "100grad"], 275 [" 0.25turn ", "0.25turn"], 276 [" 0.25tUrN ", "0.25turn"], 277 [" 1.57RaD ", "1.57rad"], 278 ].forEach(function(arr) { 279 document.documentElement.style.rotate = arr[0]; 280 is(document.documentElement.style.rotate, arr[1], 281 "bug-1207734: incorrect rotate serialization"); 282 }); 283 document.documentElement.style.rotate = ""; 284 285 // Test for translate property serialization. 286 [ 287 [" 50% 5px 6px ", "50% 5px 6px"], 288 [" 50% 10px 100px ", "50% 10px 100px"], 289 [" 4px 5px ", "4px 5px"], 290 [" 10% 10% 99px ", "10% 10% 99px"], 291 [" 50px ", "50px"], 292 ].forEach(function(arr) { 293 document.documentElement.style.translate = arr[0]; 294 is(document.documentElement.style.translate, arr[1], 295 "bug-1207734: incorrect translate serialization"); 296 }); 297 document.documentElement.style.translate = ""; 298 299 // Test for scale property serialization. 300 [ 301 [" 10 ", "10"], 302 [" 10 20.5 ", "10 20.5"], 303 [" 10 20 30 ", "10 20 30"], 304 ].forEach(function(arr) { 305 document.documentElement.style.scale = arr[0]; 306 is(document.documentElement.style.scale, arr[1], 307 "bug-1207734: incorrect scale serialization"); 308 }); 309 310 document.documentElement.style.scale = ""; 311 })(); 312 313 </script> 314 </pre> 315 </body> 316 </html>