test_shorthand_property_getters.html (24291B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=376075 5 --> 6 <head> 7 <title>Test for Bug 376075</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 10 </head> 11 <body> 12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=376075">Mozilla Bug 376075</a> 13 <p id="display"></p> 14 <div id="content" style="display: none"> 15 16 </div> 17 <pre id="test"> 18 <script type="application/javascript"> 19 20 /** Test for Bug 376075 */ 21 22 var e = document.getElementById("display"); 23 24 var borderExtras = "; border-image: none"; 25 26 // Test that we only serialize the 'border' shorthand when appropriate. 27 e.setAttribute("style", "border-left: medium solid blue; border-right: medium solid blue; border-top: medium blue solid; border-bottom: blue medium solid" + borderExtras); 28 isnot(e.style.border, "", "should be able to serialize border"); 29 e.setAttribute("style", "border-left: medium solid blue; border-right: medium solid blue; border-top: medium blue solid; border-bottom: green medium solid" + borderExtras); 30 is(e.style.border, "", "should not be able to serialize border"); 31 e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: green" + borderExtras); 32 isnot(e.style.border, "", "should be able to serialize border"); 33 e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: green blue blue blue" + borderExtras); 34 is(e.style.border, "", "should not be able to serialize border"); 35 e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: blue green blue blue" + borderExtras); 36 is(e.style.border, "", "should not be able to serialize border"); 37 e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: blue blue green blue" + borderExtras); 38 is(e.style.border, "", "should not be able to serialize border"); 39 e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: blue blue blue green" + borderExtras); 40 is(e.style.border, "", "should not be able to serialize border"); 41 e.setAttribute("style", "border-width: 3px 2px 3px 3px; border-style: solid; border-color: green" + borderExtras); 42 is(e.style.border, "", "should not be able to serialize border"); 43 e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid dashed; border-color: green" + borderExtras); 44 is(e.style.border, "", "should not be able to serialize border"); 45 46 // Test suppression of currentcolor in border shorthands. 47 e.setAttribute("style", "border: medium solid"); 48 is(e.style.border, "solid", "implied default color omitted serializing border"); 49 is(e.style.borderLeft, "solid", "implied default color omitted serializing border-left"); 50 is(e.style.cssText, "border: solid;", "implied default color omitted serializing declaration"); 51 e.setAttribute("style", "border-right: medium solid"); 52 is(e.style.borderRight, "solid", "implied default color omitted serializing border-right"); 53 is(e.style.cssText, "border-right: solid;", "implied default color omitted serializing declaration"); 54 55 // Test that we shorten box properties to the shortest possible. 56 e.setAttribute("style", "margin: 7px"); 57 is(e.style.margin, "7px", "should condense to shortest possible"); 58 is(e.style.cssText, "margin: 7px;", "should condense to shortest possible"); 59 e.setAttribute("style", "padding: 7px 7px 7px"); 60 is(e.style.padding, "7px", "should condense to shortest possible"); 61 is(e.style.cssText, "padding: 7px;", "should condense to shortest possible"); 62 e.setAttribute("style", "border-width: 7px 7px 7px 7px"); 63 is(e.style.borderWidth, "7px", "should condense to shortest possible"); 64 is(e.style.cssText, "border-width: 7px;", "should condense to shortest possible"); 65 e.setAttribute("style", "margin: 7px 7px 7px 6px"); 66 is(e.style.margin, "7px 7px 7px 6px", "should not condense"); 67 is(e.style.cssText, "margin: 7px 7px 7px 6px;", "should not condense"); 68 e.setAttribute("style", "border-style: solid dotted none dotted"); 69 is(e.style.borderStyle, "solid dotted none", "should condense"); 70 is(e.style.cssText, "border-style: solid dotted none;", "should condense"); 71 e.setAttribute("style", "border-color: green blue"); 72 is(e.style.borderColor, "green blue", "should condense"); 73 is(e.style.cssText, "border-color: green blue;", "should condense"); 74 e.setAttribute("style", "border-color: green blue green"); 75 is(e.style.borderColor, "green blue", "should condense"); 76 is(e.style.cssText, "border-color: green blue;", "should condense"); 77 e.setAttribute("style", "border-color: green blue green blue"); 78 is(e.style.borderColor, "green blue", "should condense"); 79 is(e.style.cssText, "border-color: green blue;", "should condense"); 80 e.setAttribute("style", "border-color: currentColor currentColor currentcolor CURRENTcolor"); 81 is(e.style.borderColor, "currentcolor", "should condense to canonical case"); 82 is(e.style.cssText, "border-color: currentcolor;", "should condense to canonical case"); 83 e.setAttribute("style", "border-style: ridge none none none"); 84 is(e.style.borderStyle, "ridge none none", "should condense"); 85 is(e.style.cssText, "border-style: ridge none none;", "should condense"); 86 e.setAttribute("style", "border-radius: 1px 1px 1px 1px"); 87 is(e.style.borderRadius, "1px", "should condense to shortest possible"); 88 is(e.style.cssText, "border-radius: 1px;", "should condense to shortest possible"); 89 e.setAttribute("style", "border-radius: 1px 1px 1px 1px / 2px 2px 2px 2px"); 90 is(e.style.borderRadius, "1px / 2px", "should condense to shortest possible"); 91 is(e.style.cssText, "border-radius: 1px / 2px;", "should condense to shortest possible"); 92 e.setAttribute("style", "border-radius: 1px 2px 1px 2px / 1% 2% 3% 2%"); 93 is(e.style.borderRadius, "1px 2px / 1% 2% 3%", "should condense to shortest possible"); 94 is(e.style.cssText, "border-radius: 1px 2px / 1% 2% 3%;", "should condense to shortest possible"); 95 96 // Test that we refuse to serialize the 'background' and 'font' 97 // shorthands when some subproperties that can't be expressed in the 98 // shorthand syntax are present. 99 e.setAttribute("style", "font: medium serif"); 100 isnot(e.style.font, "", "should have font shorthand"); 101 e.setAttribute("style", "font: medium serif; font-size-adjust: 0.45"); 102 is(e.style.font, "", "should not have font shorthand"); 103 e.setAttribute("style", "font: medium serif; font-feature-settings: 'liga' off"); 104 is(e.style.font, "", "should not have font shorthand"); 105 106 // Test that all combinations of background-clip and background-origin 107 // can be expressed in the shorthand (which wasn't the case previously). 108 e.setAttribute("style", "background: red"); 109 isnot(e.style.background, "", "should have background shorthand"); 110 e.setAttribute("style", "background: red; background-origin: border-box"); 111 isnot(e.style.background, "", "should have background shorthand (origin:border-box)"); 112 e.setAttribute("style", "background: red; background-clip: padding-box"); 113 isnot(e.style.background, "", "should have background shorthand (clip:padding-box)"); 114 e.setAttribute("style", "background: red; background-origin: content-box"); 115 isnot(e.style.background, "", "should have background shorthand (origin:content-box)"); 116 e.setAttribute("style", "background: red; background-clip: content-box"); 117 isnot(e.style.background, "", "should have background shorthand (clip:content-box)"); 118 e.setAttribute("style", "background: red; background-clip: content-box; background-origin: content-box;"); 119 isnot(e.style.background, "", "should have background shorthand (clip:content-box;origin:content-box)"); 120 121 // Test background-size in the background shorthand. 122 e.setAttribute("style", "background: red; background-size: 100% 100%"); 123 isnot(e.style.background, "", "should have background shorthand (size:100% 100%)"); 124 e.setAttribute("style", "background: red; background-size: 100% auto"); 125 isnot(e.style.background, "", "should have background shorthand (size:100% auto)"); 126 e.setAttribute("style", "background: red; background-size: auto 100%"); 127 isnot(e.style.background, "", "should have background shorthand (size:auto 100%)"); 128 129 // Check that we only serialize background when the lists (of layers) for 130 // the subproperties are the same length. 131 e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: cover, auto, contain; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat, no-repeat"); 132 isnot(e.style.background, "", "should have background shorthand (all lists length 3)"); 133 e.setAttribute("style", "background-clip: border-box, padding-box, border-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: cover, auto, contain; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat, no-repeat"); 134 is(e.style.background, "", "should not have background shorthand (background-clip too long)"); 135 e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: padding-box, padding-box; background-size: cover, auto, contain; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat, no-repeat"); 136 is(e.style.background, "", "should not have background shorthand (background-origin too short)"); 137 e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: cover, auto, contain; background-color: blue; background-image: url(404.png), none, url(404-2.png), none; background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat, no-repeat"); 138 is(e.style.background, "", "should not have background shorthand (background-image too long)"); 139 e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: cover, auto, contain; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat, no-repeat"); 140 is(e.style.background, "", "should not have background shorthand (background-attachment too short)"); 141 e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: cover, auto, contain; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px, bottom; background-repeat: repeat-x, repeat, no-repeat"); 142 is(e.style.background, "", "should not have background shorthand (background-position too long)"); 143 e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: cover, auto, contain; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat"); 144 is(e.style.background, "", "should not have background shorthand (background-repeat too short)"); 145 e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: cover, auto, contain, contain; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat, no-repeat"); 146 is(e.style.background, "", "should not have background shorthand (background-size too long)"); 147 148 // Check that we only serialize background-position when the lists (of layers) for 149 // the -x/-y subproperties are the same length. 150 e.setAttribute("style", "background-position-x: 10%, left 2em, right; background-position-y: top 2em, bottom, 10%"); 151 is(e.style.backgroundPosition, "left 10% top 2em, left 2em bottom, right 10%", "should have background-position shorthand (both lists length 3)"); 152 e.setAttribute("style", "background-position-x: 10%, left 2em; background-position-y: top 2em, bottom, 10%"); 153 is(e.style.backgroundPosition, "", "should not have background-position shorthand (background-position-x too short)"); 154 e.setAttribute("style", "background-position-x: 10%, left 2em, right; background-position-y: top 2em"); 155 is(e.style.backgroundPosition, "", "should not have background-position shorthand (background-position-y too short)"); 156 157 // Check that background-position serialization doesn't produce invalid values. 158 e.setAttribute("style", "background-position: 0px"); 159 is(e.style.backgroundPosition, "0px center", "1-value form should be accepted, with implied center value for background-position-y"); 160 e.setAttribute("style", "background-position: 0px center"); 161 is(e.style.backgroundPosition, "0px center", "2-value form 'x-offset' 'y-edge' should be accepted, and serialize to 2-value form"); 162 e.setAttribute("style", "background-position: left 0px center"); 163 is(e.style.backgroundPosition, "left 0px center", "3-value form 'x-edge' 'x-offset' 'y-edge' should be accepted and serialize to 3-value form"); 164 e.setAttribute("style", "background-position: left top 0px"); 165 is(e.style.backgroundPosition, "left top 0px", "3-value form 'x-edge' 'y-edge' 'y-offset' should be accepted and serialize to 3-value form"); 166 e.setAttribute("style", "background-position: left 0px top 0px"); 167 is(e.style.backgroundPosition, "left 0px top 0px", "4-value form should be accepted and serialize to 4-value form"); 168 e.setAttribute("style", "background-position-x: 0px; background-position-y: center"); 169 is(e.style.backgroundPosition, "0px center", "should always serialize to 2-value form if setting -x and -y with the 1-value form"); 170 e.setAttribute("style", "background-position-x: 0px; background-position-y: 0px"); 171 is(e.style.backgroundPosition, "0px 0px", "should always serialize to 2-value form if setting -x and -y with the 1-value form"); 172 e.setAttribute("style", "background-position-x: center; background-position-y: 0px"); 173 is(e.style.backgroundPosition, "center 0px", "should always serialize to 2-value form if setting -x and -y with the 1-value form"); 174 e.setAttribute("style", "background-position-x: left; background-position-y: top"); 175 is(e.style.backgroundPosition, "left top", "should always serialize to 2-value form if setting -x and -y with the 1-value form"); 176 e.setAttribute("style", "background-position-x: left 0px; background-position-y: center"); 177 is(e.style.backgroundPosition, "left 0px center", "should always serialize to 3-value form if both -x and -y specified an edge"); 178 e.setAttribute("style", "background-position-x: right; background-position-y: top 0px"); 179 is(e.style.backgroundPosition, "right top 0px", "should always serialize to 3-value form if both -x and -y specified an edge"); 180 e.setAttribute("style", "background-position-x: left 0px; background-position-y: 0px"); 181 is(e.style.backgroundPosition, "left 0px top 0px", "should serialize to 4-value form if 3-value form would only have one edge"); 182 e.setAttribute("style", "background-position-x: 0px; background-position-y: top 0px"); 183 is(e.style.backgroundPosition, "left 0px top 0px", "should serialize to 4-value form if 3-value form would only have one edge"); 184 185 // Check that we only serialize transition when the lists are the same length. 186 e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s; transition-behavior: normal, allow-discrete;"); 187 isnot(e.style.transition, "", "should have transition shorthand (lists same length)"); 188 e.setAttribute("style", "transition-property: color, width, left; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s; transition-behavior: normal, allow-discrete;"); 189 is(e.style.transition, "", "should not have transition shorthand (lists different lengths)"); 190 e.setAttribute("style", "transition-property: all; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s; transition-behavior: normal, allow-discrete;"); 191 is(e.style.transition, "", "should not have transition shorthand (lists different lengths)"); 192 e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms, 300ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s; transition-behavior: normal, allow-discrete;"); 193 is(e.style.transition, "", "should not have transition shorthand (lists different lengths)"); 194 e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear, ease-out; transition-delay: 0s, 1s; transition-behavior: normal, allow-discrete;"); 195 is(e.style.transition, "", "should not have transition shorthand (lists different lengths)"); 196 e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s, 0s; transition-behavior: normal, allow-discrete;"); 197 is(e.style.transition, "", "should not have transition shorthand (lists different lengths)"); 198 e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s; transition-behavior: normal, allow-discrete, normal;"); 199 is(e.style.transition, "", "should not have transition shorthand (lists different lengths)"); 200 e.setAttribute("style", "transition: color, width; transition-delay: 0s"); 201 is(e.style.transition, "", "should not have transition shorthand (lists different lengths)"); 202 203 // FIXME: Bug 1824261. The 1st case should be non-empty if animation-timeline is 204 // not reset-only. 205 e.setAttribute("style", "animation-name: bounce, roll; animation-duration: 1s, 200ms; animation-timing-function: ease-in, linear; animation-delay: 0s, 1s; animation-direction: normal, reverse; animation-fill-mode: forwards, backwards; animation-iteration-count: infinite, 2; animation-play-state: paused, running; animation-timeline: auto, auto;"); 206 is(e.style.animation, "", "should have animation shorthand (lists same length, Bug 1824261)"); 207 e.setAttribute("style", "animation-name: bounce, roll, left; animation-duration: 1s, 200ms; animation-timing-function: ease-in, linear; animation-delay: 0s, 1s; animation-direction: normal, reverse; animation-fill-mode: forwards, backwards; animation-iteration-count: infinite, 2; animation-play-state: paused, running; animation-timeline: auto, auto;"); 208 is(e.style.animation, "", "should not have animation shorthand (lists different lengths)"); 209 e.setAttribute("style", "animation-name: bounce; animation-duration: 1s, 200ms; animation-timing-function: ease-in, linear; animation-delay: 0s, 1s; animation-direction: normal, reverse; animation-fill-mode: forwards, backwards; animation-iteration-count: infinite, 2; animation-play-state: paused, running; animation-timeline: auto, auto;"); 210 is(e.style.animation, "", "should not have animation shorthand (lists different lengths)"); 211 e.setAttribute("style", "animation-name: bounce, roll; animation-duration: 1s, 200ms, 300ms; animation-timing-function: ease-in, linear; animation-delay: 0s, 1s; animation-direction: normal, reverse; animation-fill-mode: forwards, backwards; animation-iteration-count: infinite, 2; animation-play-state: paused, running; animation-timeline: auto, auto;"); 212 is(e.style.animation, "", "should not have animation shorthand (lists different lengths)"); 213 e.setAttribute("style", "animation-name: bounce, roll; animation-duration: 1s, 200ms; animation-timing-function: ease-in, linear, ease-out; animation-delay: 0s, 1s; animation-direction: normal, reverse; animation-fill-mode: forwards, backwards; animation-iteration-count: infinite, 2; animation-play-state: paused, running; animation-timeline: auto, auto"); 214 is(e.style.animation, "", "should not have animation shorthand (lists different lengths)"); 215 e.setAttribute("style", "animation-name: bounce, roll; animation-duration: 1s, 200ms; animation-timing-function: ease-in, linear; animation-delay: 0s, 1s, 0s; animation-direction: normal, reverse; animation-fill-mode: forwards, backwards; animation-iteration-count: infinite, 2; animation-play-state: paused, running; animation-timeline: auto, auto;"); 216 is(e.style.animation, "", "should not have animation shorthand (lists different lengths)"); 217 e.setAttribute("style", "animation-name: bounce, roll; animation-duration: 1s, 200ms; animation-timing-function: ease-in, linear; animation-delay: 0s, 1s; animation-direction: normal; animation-fill-mode: forwards, backwards; animation-iteration-count: infinite, 2; animation-play-state: paused, running; animation-timeline: auto, auto;"); 218 is(e.style.animation, "", "should not have animation shorthand (lists different lengths)"); 219 e.setAttribute("style", "animation-name: bounce, roll; animation-duration: 1s, 200ms; animation-timing-function: ease-in, linear; animation-delay: 0s, 1s; animation-direction: normal, reverse; animation-fill-mode: forwards, backwards, both; animation-iteration-count: infinite, 2; animation-play-state: paused, running; animation-timeline: auto, auto;"); 220 is(e.style.animation, "", "should not have animation shorthand (lists different lengths)"); 221 e.setAttribute("style", "animation-name: bounce, roll; animation-duration: 1s, 200ms; animation-timing-function: ease-in, linear; animation-delay: 0s, 1s; animation-direction: normal, reverse; animation-fill-mode: forwards, backwards; animation-iteration-count: infinite, 2, 1; animation-play-state: paused, running; animation-timeline: auto, auto;"); 222 is(e.style.animation, "", "should not have animation shorthand (lists different lengths)"); 223 e.setAttribute("style", "animation-name: bounce, roll; animation-duration: 1s, 200ms; animation-timing-function: ease-in, linear; animation-delay: 0s, 1s; animation-direction: normal, reverse; animation-fill-mode: forwards, backwards; animation-iteration-count: infinite, 2; animation-play-state: paused, running, running; animation-timeline: auto, auto;"); 224 is(e.style.animation, "", "should not have animation shorthand (lists different lengths)"); 225 e.setAttribute("style", "animation-name: bounce, roll; animation-duration: 1s, 200ms; animation-timing-function: ease-in, linear; animation-delay: 0s, 1s; animation-direction: normal, reverse; animation-fill-mode: forwards, backwards; animation-iteration-count: infinite, 2; animation-play-state: paused, running; animation-timeline: auto, auto, auto;"); 226 is(e.style.animation, "", "should not have animation shorthand (lists different lengths)"); 227 228 // Check that the 'border' shorthand resets 'border-image' and 229 // but that other 'border-*' shorthands don't 230 // (bug 482692). 231 e.setAttribute("style", 'border-image: url("foo.png") 5 5 5 5 / 5 5 5 5 / 5 5 5 5 repeat repeat; border-left: medium solid green'); 232 is(e.style.cssText, 233 'border-image: url("foo.png") 5 / 5 / 5 repeat; border-left: solid green;', 234 "border-left does NOT reset border-image"); 235 e.setAttribute("style", 'border-image: url("foo.png") 5 5 5 5; border: solid green'); 236 is(e.style.cssText, 'border: solid green;', "border DOES reset border-image"); 237 238 // Test that the color goes at the beginning of the last item of the 239 // background shorthand. 240 e.setAttribute("style", "background: url(foo.png) blue"); 241 is(e.style.cssText, 242 "background: blue url(\"foo.png\");", 243 "color should be at start of single-item background"); 244 e.setAttribute("style", "background: url(bar.png), url(foo.png) blue"); 245 is(e.style.cssText, 246 "background: url(\"bar.png\"), blue url(\"foo.png\");", 247 "color should be at start of single-item background"); 248 249 </script> 250 </pre> 251 </body> 252 </html>