1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/style/test/test_shorthand_property_getters.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,221 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html>
1.6 +<!--
1.7 +https://bugzilla.mozilla.org/show_bug.cgi?id=376075
1.8 +-->
1.9 +<head>
1.10 + <title>Test for Bug 376075</title>
1.11 + <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.12 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
1.13 +</head>
1.14 +<body>
1.15 +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=376075">Mozilla Bug 376075</a>
1.16 +<p id="display"></p>
1.17 +<div id="content" style="display: none">
1.18 +
1.19 +</div>
1.20 +<pre id="test">
1.21 +<script type="application/javascript">
1.22 +
1.23 +/** Test for Bug 376075 **/
1.24 +
1.25 +var e = document.getElementById("display");
1.26 +
1.27 +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";
1.28 +
1.29 +// Test that we only serialize the 'border' shorthand when appropriate.
1.30 +e.setAttribute("style", "border-left: medium solid blue; border-right: medium solid blue; border-top: medium blue solid; border-bottom: blue medium solid" + borderExtras);
1.31 +isnot(e.style.border, "", "should be able to serialize border");
1.32 +e.setAttribute("style", "border-left: medium solid blue; border-right: medium solid blue; border-top: medium blue solid; border-bottom: green medium solid" + borderExtras);
1.33 +is(e.style.border, "", "should not be able to serialize border");
1.34 +e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: green" + borderExtras);
1.35 +isnot(e.style.border, "", "should be able to serialize border");
1.36 +e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: green blue blue blue" + borderExtras);
1.37 +is(e.style.border, "", "should not be able to serialize border");
1.38 +e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: blue green blue blue" + borderExtras);
1.39 +is(e.style.border, "", "should not be able to serialize border");
1.40 +e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: blue blue green blue" + borderExtras);
1.41 +is(e.style.border, "", "should not be able to serialize border");
1.42 +e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: blue blue blue green" + borderExtras);
1.43 +is(e.style.border, "", "should not be able to serialize border");
1.44 +e.setAttribute("style", "border-width: 3px 2px 3px 3px; border-style: solid; border-color: green" + borderExtras);
1.45 +is(e.style.border, "", "should not be able to serialize border");
1.46 +e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid dashed; border-color: green" + borderExtras);
1.47 +is(e.style.border, "", "should not be able to serialize border");
1.48 +
1.49 +// Test suppression of -moz-use-text-color in border shorthands.
1.50 +e.setAttribute("style", "border: medium solid");
1.51 +ok(e.style.border == "medium solid" ||
1.52 + e.style.border == "solid medium",
1.53 + "implied default color omitted serializing border");
1.54 +ok(e.style.borderLeft == "medium solid" ||
1.55 + e.style.borderLeft == "solid medium",
1.56 + "implied default color omitted serializing border-left");
1.57 +ok(e.style.cssText == "border: medium solid;" ||
1.58 + e.style.cssText == "border: solid medium;",
1.59 + "implied default color omitted serializing declaration");
1.60 +e.setAttribute("style", "border-right: medium solid");
1.61 +ok(e.style.borderRight == "medium solid" ||
1.62 + e.style.borderRight == "solid medium",
1.63 + "implied default color omitted serializing border-right");
1.64 +ok(e.style.borderRight == "medium solid" ||
1.65 + e.style.borderRight == "solid medium",
1.66 + "implied default color omitted serializing border-right");
1.67 +ok(e.style.cssText == "border-right: medium solid;" ||
1.68 + e.style.cssText == "border-right: solid medium;",
1.69 + "implied default color omitted serializing declaration");
1.70 +
1.71 +// Test that we shorten box properties to the shortest possible.
1.72 +e.setAttribute("style", "margin: 7px");
1.73 +is(e.style.margin, "7px", "should condense to shortest possible");
1.74 +is(e.style.cssText, "margin: 7px;", "should condense to shortest possible");
1.75 +e.setAttribute("style", "padding: 7px 7px 7px");
1.76 +is(e.style.padding, "7px", "should condense to shortest possible");
1.77 +is(e.style.cssText, "padding: 7px;", "should condense to shortest possible");
1.78 +e.setAttribute("style", "border-width: 7px 7px 7px 7px");
1.79 +is(e.style.borderWidth, "7px", "should condense to shortest possible");
1.80 +is(e.style.cssText, "border-width: 7px;", "should condense to shortest possible");
1.81 +e.setAttribute("style", "margin: 7px 7px 7px 6px");
1.82 +is(e.style.margin, "7px 7px 7px 6px", "should not condense");
1.83 +is(e.style.cssText, "margin: 7px 7px 7px 6px;", "should not condense");
1.84 +e.setAttribute("style", "border-style: solid dotted none dotted");
1.85 +is(e.style.borderStyle, "solid dotted none", "should condense");
1.86 +is(e.style.cssText, "border-style: solid dotted none;", "should condense");
1.87 +e.setAttribute("style", "border-color: green blue");
1.88 +is(e.style.borderColor, "green blue", "should condense");
1.89 +is(e.style.cssText, "border-color: green blue;", "should condense");
1.90 +e.setAttribute("style", "border-color: green blue green");
1.91 +is(e.style.borderColor, "green blue", "should condense");
1.92 +is(e.style.cssText, "border-color: green blue;", "should condense");
1.93 +e.setAttribute("style", "border-color: green blue green blue");
1.94 +is(e.style.borderColor, "green blue", "should condense");
1.95 +is(e.style.cssText, "border-color: green blue;", "should condense");
1.96 +e.setAttribute("style", "border-color: currentColor currentColor currentcolor CURRENTcolor");
1.97 +is(e.style.borderColor, "currentcolor", "should condense to canonical case");
1.98 +is(e.style.cssText, "border-color: currentcolor;", "should condense to canonical case");
1.99 +e.setAttribute("style", "border-style: ridge none none none");
1.100 +is(e.style.borderStyle, "ridge none none", "should condense");
1.101 +is(e.style.cssText, "border-style: ridge none none;", "should condense");
1.102 +e.setAttribute("style", "border-radius: 1px 1px 1px 1px");
1.103 +is(e.style.borderRadius, "1px", "should condense to shortest possible");
1.104 +is(e.style.cssText, "border-radius: 1px;", "should condense to shortest possible");
1.105 +e.setAttribute("style", "border-radius: 1px 1px 1px 1px / 2px 2px 2px 2px");
1.106 +is(e.style.borderRadius, "1px / 2px", "should condense to shortest possible");
1.107 +is(e.style.cssText, "border-radius: 1px / 2px;", "should condense to shortest possible");
1.108 +e.setAttribute("style", "border-radius: 1px 2px 1px 2px / 1% 2% 3% 2%");
1.109 +is(e.style.borderRadius, "1px 2px / 1% 2% 3%", "should condense to shortest possible");
1.110 +is(e.style.cssText, "border-radius: 1px 2px / 1% 2% 3%;", "should condense to shortest possible");
1.111 +
1.112 +// Test that we refuse to serialize the 'background' and 'font'
1.113 +// shorthands when some subproperties that can't be expressed in the
1.114 +// shorthand syntax are present.
1.115 +e.setAttribute("style", "font: medium serif");
1.116 +isnot(e.style.font, "", "should have font shorthand");
1.117 +e.setAttribute("style", "font: medium serif; font-size-adjust: 0.45");
1.118 +is(e.style.font, "", "should not have font shorthand");
1.119 +e.setAttribute("style", "font: medium serif; font-stretch: condensed");
1.120 +is(e.style.font, "", "should not have font shorthand");
1.121 +
1.122 +// Test that all combinations of background-clip and background-origin
1.123 +// can be expressed in the shorthand (which wasn't the case previously).
1.124 +e.setAttribute("style", "background: red");
1.125 +isnot(e.style.background, "", "should have background shorthand");
1.126 +e.setAttribute("style", "background: red; background-origin: border-box");
1.127 +isnot(e.style.background, "", "should have background shorthand (origin:border-box)");
1.128 +e.setAttribute("style", "background: red; background-clip: padding-box");
1.129 +isnot(e.style.background, "", "should have background shorthand (clip:padding-box)");
1.130 +e.setAttribute("style", "background: red; background-origin: content-box");
1.131 +isnot(e.style.background, "", "should have background shorthand (origin:content-box)");
1.132 +e.setAttribute("style", "background: red; background-clip: content-box");
1.133 +isnot(e.style.background, "", "should have background shorthand (clip:content-box)");
1.134 +e.setAttribute("style", "background: red; background-clip: content-box; background-origin: content-box;");
1.135 +isnot(e.style.background, "", "should have background shorthand (clip:content-box;origin:content-box)");
1.136 +
1.137 +// Test background-size in the background shorthand.
1.138 +e.setAttribute("style", "background: red; background-size: 100% 100%");
1.139 +isnot(e.style.background, "", "should have background shorthand (size:100% 100%)");
1.140 +e.setAttribute("style", "background: red; background-size: 100% auto");
1.141 +isnot(e.style.background, "", "should have background shorthand (size:100% auto)");
1.142 +e.setAttribute("style", "background: red; background-size: auto 100%");
1.143 +isnot(e.style.background, "", "should have background shorthand (size:auto 100%)");
1.144 +
1.145 +// Test background-inline-policy not interacting with the background shorthand.
1.146 +e.setAttribute("style", "background: red; -moz-background-inline-policy: each-box");
1.147 +isnot(e.style.background, "", "should have background shorthand (-moz-background-inline-policy not relevant)");
1.148 +
1.149 +// Check that we only serialize background when the lists (of layers) for
1.150 +// the subproperties are the same length.
1.151 +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");
1.152 +isnot(e.style.background, "", "should have background shorthand (all lists length 3)");
1.153 +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");
1.154 +is(e.style.background, "", "should not have background shorthand (background-clip too long)");
1.155 +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");
1.156 +is(e.style.background, "", "should not have background shorthand (background-origin too short)");
1.157 +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");
1.158 +is(e.style.background, "", "should not have background shorthand (background-image too long)");
1.159 +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");
1.160 +is(e.style.background, "", "should not have background shorthand (background-attachment too short)");
1.161 +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");
1.162 +is(e.style.background, "", "should not have background shorthand (background-position too long)");
1.163 +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");
1.164 +is(e.style.background, "", "should not have background shorthand (background-repeat too short)");
1.165 +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");
1.166 +is(e.style.background, "", "should not have background shorthand (background-size too long)");
1.167 +
1.168 +// Check that we only serialize transition when the lists are the same length.
1.169 +e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s");
1.170 +isnot(e.style.transition, "", "should have transition shorthand (lists same length)");
1.171 +e.setAttribute("style", "transition-property: color, width, left; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s");
1.172 +is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
1.173 +e.setAttribute("style", "transition-property: all; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s");
1.174 +is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
1.175 +e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms, 300ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s");
1.176 +is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
1.177 +e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear, ease-out; transition-delay: 0s, 1s");
1.178 +is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
1.179 +e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s, 0s");
1.180 +is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
1.181 +
1.182 +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.183 +isnot(e.style.animation, "", "should have animation shorthand (lists same length)");
1.184 +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;");
1.185 +is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
1.186 +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;");
1.187 +is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
1.188 +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;");
1.189 +is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
1.190 +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;");
1.191 +is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
1.192 +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;");
1.193 +is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
1.194 +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;");
1.195 +is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
1.196 +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;");
1.197 +is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
1.198 +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;");
1.199 +is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
1.200 +
1.201 +// Check that the 'border' shorthand resets 'border-image' and
1.202 +// '-moz-border-*-colors', but that other 'border-*' shorthands don't
1.203 +// (bug 482692).
1.204 +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');
1.205 +is(e.style.cssText,
1.206 + 'border-image: url("foo.png") 5 5 5 5 / 5 5 5 5 / 5 5 5 5 repeat repeat; border-left: medium solid green;',
1.207 + "border-left does NOT reset border-image");
1.208 +e.setAttribute("style", 'border-image: url("foo.png") 5 5 5 5; border: medium solid green');
1.209 +is(e.style.cssText,
1.210 + 'border: medium solid green;',
1.211 + "border DOES reset border-image");
1.212 +e.setAttribute("style", '-moz-border-left-colors: fuchsia blue; border-left: medium solid green');
1.213 +is(e.style.cssText,
1.214 + '-moz-border-left-colors: fuchsia blue; border-left: medium solid green;',
1.215 + "border-left does NOT reset -moz-border-left-colors");
1.216 +e.setAttribute("style", '-moz-border-left-colors: fuchsia blue; border: medium solid green');
1.217 +is(e.style.cssText,
1.218 + 'border: medium solid green;',
1.219 + "border DOES reset -moz-border-left-colors");
1.220 +
1.221 +</script>
1.222 +</pre>
1.223 +</body>
1.224 +</html>
