layout/style/test/test_shorthand_property_getters.html

Wed, 31 Dec 2014 13:27:57 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 13:27:57 +0100
branch
TOR_BUG_3246
changeset 6
8bccb770b82d
permissions
-rw-r--r--

Ignore runtime configuration files generated during quality assurance.

michael@0 1 <!DOCTYPE HTML>
michael@0 2 <html>
michael@0 3 <!--
michael@0 4 https://bugzilla.mozilla.org/show_bug.cgi?id=376075
michael@0 5 -->
michael@0 6 <head>
michael@0 7 <title>Test for Bug 376075</title>
michael@0 8 <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
michael@0 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
michael@0 10 </head>
michael@0 11 <body>
michael@0 12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=376075">Mozilla Bug 376075</a>
michael@0 13 <p id="display"></p>
michael@0 14 <div id="content" style="display: none">
michael@0 15
michael@0 16 </div>
michael@0 17 <pre id="test">
michael@0 18 <script type="application/javascript">
michael@0 19
michael@0 20 /** Test for Bug 376075 **/
michael@0 21
michael@0 22 var e = document.getElementById("display");
michael@0 23
michael@0 24 var borderExtras = ";-moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none";
michael@0 25
michael@0 26 // Test that we only serialize the 'border' shorthand when appropriate.
michael@0 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);
michael@0 28 isnot(e.style.border, "", "should be able to serialize border");
michael@0 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);
michael@0 30 is(e.style.border, "", "should not be able to serialize border");
michael@0 31 e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: green" + borderExtras);
michael@0 32 isnot(e.style.border, "", "should be able to serialize border");
michael@0 33 e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: green blue blue blue" + borderExtras);
michael@0 34 is(e.style.border, "", "should not be able to serialize border");
michael@0 35 e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: blue green blue blue" + borderExtras);
michael@0 36 is(e.style.border, "", "should not be able to serialize border");
michael@0 37 e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: blue blue green blue" + borderExtras);
michael@0 38 is(e.style.border, "", "should not be able to serialize border");
michael@0 39 e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: blue blue blue green" + borderExtras);
michael@0 40 is(e.style.border, "", "should not be able to serialize border");
michael@0 41 e.setAttribute("style", "border-width: 3px 2px 3px 3px; border-style: solid; border-color: green" + borderExtras);
michael@0 42 is(e.style.border, "", "should not be able to serialize border");
michael@0 43 e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid dashed; border-color: green" + borderExtras);
michael@0 44 is(e.style.border, "", "should not be able to serialize border");
michael@0 45
michael@0 46 // Test suppression of -moz-use-text-color in border shorthands.
michael@0 47 e.setAttribute("style", "border: medium solid");
michael@0 48 ok(e.style.border == "medium solid" ||
michael@0 49 e.style.border == "solid medium",
michael@0 50 "implied default color omitted serializing border");
michael@0 51 ok(e.style.borderLeft == "medium solid" ||
michael@0 52 e.style.borderLeft == "solid medium",
michael@0 53 "implied default color omitted serializing border-left");
michael@0 54 ok(e.style.cssText == "border: medium solid;" ||
michael@0 55 e.style.cssText == "border: solid medium;",
michael@0 56 "implied default color omitted serializing declaration");
michael@0 57 e.setAttribute("style", "border-right: medium solid");
michael@0 58 ok(e.style.borderRight == "medium solid" ||
michael@0 59 e.style.borderRight == "solid medium",
michael@0 60 "implied default color omitted serializing border-right");
michael@0 61 ok(e.style.borderRight == "medium solid" ||
michael@0 62 e.style.borderRight == "solid medium",
michael@0 63 "implied default color omitted serializing border-right");
michael@0 64 ok(e.style.cssText == "border-right: medium solid;" ||
michael@0 65 e.style.cssText == "border-right: solid medium;",
michael@0 66 "implied default color omitted serializing declaration");
michael@0 67
michael@0 68 // Test that we shorten box properties to the shortest possible.
michael@0 69 e.setAttribute("style", "margin: 7px");
michael@0 70 is(e.style.margin, "7px", "should condense to shortest possible");
michael@0 71 is(e.style.cssText, "margin: 7px;", "should condense to shortest possible");
michael@0 72 e.setAttribute("style", "padding: 7px 7px 7px");
michael@0 73 is(e.style.padding, "7px", "should condense to shortest possible");
michael@0 74 is(e.style.cssText, "padding: 7px;", "should condense to shortest possible");
michael@0 75 e.setAttribute("style", "border-width: 7px 7px 7px 7px");
michael@0 76 is(e.style.borderWidth, "7px", "should condense to shortest possible");
michael@0 77 is(e.style.cssText, "border-width: 7px;", "should condense to shortest possible");
michael@0 78 e.setAttribute("style", "margin: 7px 7px 7px 6px");
michael@0 79 is(e.style.margin, "7px 7px 7px 6px", "should not condense");
michael@0 80 is(e.style.cssText, "margin: 7px 7px 7px 6px;", "should not condense");
michael@0 81 e.setAttribute("style", "border-style: solid dotted none dotted");
michael@0 82 is(e.style.borderStyle, "solid dotted none", "should condense");
michael@0 83 is(e.style.cssText, "border-style: solid dotted none;", "should condense");
michael@0 84 e.setAttribute("style", "border-color: green blue");
michael@0 85 is(e.style.borderColor, "green blue", "should condense");
michael@0 86 is(e.style.cssText, "border-color: green blue;", "should condense");
michael@0 87 e.setAttribute("style", "border-color: green blue green");
michael@0 88 is(e.style.borderColor, "green blue", "should condense");
michael@0 89 is(e.style.cssText, "border-color: green blue;", "should condense");
michael@0 90 e.setAttribute("style", "border-color: green blue green blue");
michael@0 91 is(e.style.borderColor, "green blue", "should condense");
michael@0 92 is(e.style.cssText, "border-color: green blue;", "should condense");
michael@0 93 e.setAttribute("style", "border-color: currentColor currentColor currentcolor CURRENTcolor");
michael@0 94 is(e.style.borderColor, "currentcolor", "should condense to canonical case");
michael@0 95 is(e.style.cssText, "border-color: currentcolor;", "should condense to canonical case");
michael@0 96 e.setAttribute("style", "border-style: ridge none none none");
michael@0 97 is(e.style.borderStyle, "ridge none none", "should condense");
michael@0 98 is(e.style.cssText, "border-style: ridge none none;", "should condense");
michael@0 99 e.setAttribute("style", "border-radius: 1px 1px 1px 1px");
michael@0 100 is(e.style.borderRadius, "1px", "should condense to shortest possible");
michael@0 101 is(e.style.cssText, "border-radius: 1px;", "should condense to shortest possible");
michael@0 102 e.setAttribute("style", "border-radius: 1px 1px 1px 1px / 2px 2px 2px 2px");
michael@0 103 is(e.style.borderRadius, "1px / 2px", "should condense to shortest possible");
michael@0 104 is(e.style.cssText, "border-radius: 1px / 2px;", "should condense to shortest possible");
michael@0 105 e.setAttribute("style", "border-radius: 1px 2px 1px 2px / 1% 2% 3% 2%");
michael@0 106 is(e.style.borderRadius, "1px 2px / 1% 2% 3%", "should condense to shortest possible");
michael@0 107 is(e.style.cssText, "border-radius: 1px 2px / 1% 2% 3%;", "should condense to shortest possible");
michael@0 108
michael@0 109 // Test that we refuse to serialize the 'background' and 'font'
michael@0 110 // shorthands when some subproperties that can't be expressed in the
michael@0 111 // shorthand syntax are present.
michael@0 112 e.setAttribute("style", "font: medium serif");
michael@0 113 isnot(e.style.font, "", "should have font shorthand");
michael@0 114 e.setAttribute("style", "font: medium serif; font-size-adjust: 0.45");
michael@0 115 is(e.style.font, "", "should not have font shorthand");
michael@0 116 e.setAttribute("style", "font: medium serif; font-stretch: condensed");
michael@0 117 is(e.style.font, "", "should not have font shorthand");
michael@0 118
michael@0 119 // Test that all combinations of background-clip and background-origin
michael@0 120 // can be expressed in the shorthand (which wasn't the case previously).
michael@0 121 e.setAttribute("style", "background: red");
michael@0 122 isnot(e.style.background, "", "should have background shorthand");
michael@0 123 e.setAttribute("style", "background: red; background-origin: border-box");
michael@0 124 isnot(e.style.background, "", "should have background shorthand (origin:border-box)");
michael@0 125 e.setAttribute("style", "background: red; background-clip: padding-box");
michael@0 126 isnot(e.style.background, "", "should have background shorthand (clip:padding-box)");
michael@0 127 e.setAttribute("style", "background: red; background-origin: content-box");
michael@0 128 isnot(e.style.background, "", "should have background shorthand (origin:content-box)");
michael@0 129 e.setAttribute("style", "background: red; background-clip: content-box");
michael@0 130 isnot(e.style.background, "", "should have background shorthand (clip:content-box)");
michael@0 131 e.setAttribute("style", "background: red; background-clip: content-box; background-origin: content-box;");
michael@0 132 isnot(e.style.background, "", "should have background shorthand (clip:content-box;origin:content-box)");
michael@0 133
michael@0 134 // Test background-size in the background shorthand.
michael@0 135 e.setAttribute("style", "background: red; background-size: 100% 100%");
michael@0 136 isnot(e.style.background, "", "should have background shorthand (size:100% 100%)");
michael@0 137 e.setAttribute("style", "background: red; background-size: 100% auto");
michael@0 138 isnot(e.style.background, "", "should have background shorthand (size:100% auto)");
michael@0 139 e.setAttribute("style", "background: red; background-size: auto 100%");
michael@0 140 isnot(e.style.background, "", "should have background shorthand (size:auto 100%)");
michael@0 141
michael@0 142 // Test background-inline-policy not interacting with the background shorthand.
michael@0 143 e.setAttribute("style", "background: red; -moz-background-inline-policy: each-box");
michael@0 144 isnot(e.style.background, "", "should have background shorthand (-moz-background-inline-policy not relevant)");
michael@0 145
michael@0 146 // Check that we only serialize background when the lists (of layers) for
michael@0 147 // the subproperties are the same length.
michael@0 148 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");
michael@0 149 isnot(e.style.background, "", "should have background shorthand (all lists length 3)");
michael@0 150 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");
michael@0 151 is(e.style.background, "", "should not have background shorthand (background-clip too long)");
michael@0 152 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");
michael@0 153 is(e.style.background, "", "should not have background shorthand (background-origin too short)");
michael@0 154 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");
michael@0 155 is(e.style.background, "", "should not have background shorthand (background-image too long)");
michael@0 156 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");
michael@0 157 is(e.style.background, "", "should not have background shorthand (background-attachment too short)");
michael@0 158 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");
michael@0 159 is(e.style.background, "", "should not have background shorthand (background-position too long)");
michael@0 160 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");
michael@0 161 is(e.style.background, "", "should not have background shorthand (background-repeat too short)");
michael@0 162 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");
michael@0 163 is(e.style.background, "", "should not have background shorthand (background-size too long)");
michael@0 164
michael@0 165 // Check that we only serialize transition when the lists are the same length.
michael@0 166 e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s");
michael@0 167 isnot(e.style.transition, "", "should have transition shorthand (lists same length)");
michael@0 168 e.setAttribute("style", "transition-property: color, width, left; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s");
michael@0 169 is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
michael@0 170 e.setAttribute("style", "transition-property: all; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s");
michael@0 171 is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
michael@0 172 e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms, 300ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s");
michael@0 173 is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
michael@0 174 e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear, ease-out; transition-delay: 0s, 1s");
michael@0 175 is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
michael@0 176 e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s, 0s");
michael@0 177 is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
michael@0 178
michael@0 179 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;");
michael@0 180 isnot(e.style.animation, "", "should have animation shorthand (lists same length)");
michael@0 181 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;");
michael@0 182 is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
michael@0 183 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;");
michael@0 184 is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
michael@0 185 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;");
michael@0 186 is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
michael@0 187 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;");
michael@0 188 is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
michael@0 189 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;");
michael@0 190 is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
michael@0 191 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;");
michael@0 192 is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
michael@0 193 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;");
michael@0 194 is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
michael@0 195 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;");
michael@0 196 is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
michael@0 197
michael@0 198 // Check that the 'border' shorthand resets 'border-image' and
michael@0 199 // '-moz-border-*-colors', but that other 'border-*' shorthands don't
michael@0 200 // (bug 482692).
michael@0 201 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');
michael@0 202 is(e.style.cssText,
michael@0 203 'border-image: url("foo.png") 5 5 5 5 / 5 5 5 5 / 5 5 5 5 repeat repeat; border-left: medium solid green;',
michael@0 204 "border-left does NOT reset border-image");
michael@0 205 e.setAttribute("style", 'border-image: url("foo.png") 5 5 5 5; border: medium solid green');
michael@0 206 is(e.style.cssText,
michael@0 207 'border: medium solid green;',
michael@0 208 "border DOES reset border-image");
michael@0 209 e.setAttribute("style", '-moz-border-left-colors: fuchsia blue; border-left: medium solid green');
michael@0 210 is(e.style.cssText,
michael@0 211 '-moz-border-left-colors: fuchsia blue; border-left: medium solid green;',
michael@0 212 "border-left does NOT reset -moz-border-left-colors");
michael@0 213 e.setAttribute("style", '-moz-border-left-colors: fuchsia blue; border: medium solid green');
michael@0 214 is(e.style.cssText,
michael@0 215 'border: medium solid green;',
michael@0 216 "border DOES reset -moz-border-left-colors");
michael@0 217
michael@0 218 </script>
michael@0 219 </pre>
michael@0 220 </body>
michael@0 221 </html>

mercurial