DXR is a code search and navigation tool aimed at making sense of large projects. It supports full-text and regex searches as well as structural queries.

Mercurial (a81015259a98)

VCS Links

Line Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=376075
-->
<head>
  <title>Test for Bug 376075</title>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=376075">Mozilla Bug 376075</a>
<p id="display"></p>
<div id="content" style="display: none">
  
</div>
<pre id="test">
<script type="application/javascript">

/** Test for Bug 376075 **/

var e = document.getElementById("display");

var borderExtras = ";-moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-image: none";

// Test that we only serialize the 'border' shorthand when appropriate.
e.setAttribute("style", "border-left: medium solid blue; border-right: medium solid blue; border-top: medium blue solid; border-bottom: blue medium solid" + borderExtras);
isnot(e.style.border, "", "should be able to serialize border");
e.setAttribute("style", "border-left: medium solid blue; border-right: medium solid blue; border-top: medium blue solid; border-bottom: green medium solid" + borderExtras);
is(e.style.border, "", "should not be able to serialize border");
e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: green" + borderExtras);
isnot(e.style.border, "", "should be able to serialize border");
e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: green blue blue blue" + borderExtras);
is(e.style.border, "", "should not be able to serialize border");
e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: blue green blue blue" + borderExtras);
is(e.style.border, "", "should not be able to serialize border");
e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: blue blue green blue" + borderExtras);
is(e.style.border, "", "should not be able to serialize border");
e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: blue blue blue green" + borderExtras);
is(e.style.border, "", "should not be able to serialize border");
e.setAttribute("style", "border-width: 3px 2px 3px 3px; border-style: solid; border-color: green" + borderExtras);
is(e.style.border, "", "should not be able to serialize border");
e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid dashed; border-color: green" + borderExtras);
is(e.style.border, "", "should not be able to serialize border");

// Test suppression of -moz-use-text-color in border shorthands.
e.setAttribute("style", "border: medium solid");
ok(e.style.border == "medium solid" ||
   e.style.border == "solid medium",
   "implied default color omitted serializing border");
ok(e.style.borderLeft == "medium solid" ||
   e.style.borderLeft == "solid medium",
   "implied default color omitted serializing border-left");
ok(e.style.cssText == "border: medium solid;" ||
   e.style.cssText == "border: solid medium;",
   "implied default color omitted serializing declaration");
e.setAttribute("style", "border-right: medium solid");
ok(e.style.borderRight == "medium solid" ||
   e.style.borderRight == "solid medium",
   "implied default color omitted serializing border-right");
ok(e.style.borderRight == "medium solid" ||
   e.style.borderRight == "solid medium",
   "implied default color omitted serializing border-right");
ok(e.style.cssText == "border-right: medium solid;" ||
   e.style.cssText == "border-right: solid medium;",
   "implied default color omitted serializing declaration");

// Test that we shorten box properties to the shortest possible.
e.setAttribute("style", "margin: 7px");
is(e.style.margin, "7px", "should condense to shortest possible");
is(e.style.cssText, "margin: 7px;", "should condense to shortest possible");
e.setAttribute("style", "padding: 7px 7px 7px");
is(e.style.padding, "7px", "should condense to shortest possible");
is(e.style.cssText, "padding: 7px;", "should condense to shortest possible");
e.setAttribute("style", "border-width: 7px 7px 7px 7px");
is(e.style.borderWidth, "7px", "should condense to shortest possible");
is(e.style.cssText, "border-width: 7px;", "should condense to shortest possible");
e.setAttribute("style", "margin: 7px 7px 7px 6px");
is(e.style.margin, "7px 7px 7px 6px", "should not condense");
is(e.style.cssText, "margin: 7px 7px 7px 6px;", "should not condense");
e.setAttribute("style", "border-style: solid dotted none dotted");
is(e.style.borderStyle, "solid dotted none", "should condense");
is(e.style.cssText, "border-style: solid dotted none;", "should condense");
e.setAttribute("style", "border-color: green blue");
is(e.style.borderColor, "green blue", "should condense");
is(e.style.cssText, "border-color: green blue;", "should condense");
e.setAttribute("style", "border-color: green blue green");
is(e.style.borderColor, "green blue", "should condense");
is(e.style.cssText, "border-color: green blue;", "should condense");
e.setAttribute("style", "border-color: green blue green blue");
is(e.style.borderColor, "green blue", "should condense");
is(e.style.cssText, "border-color: green blue;", "should condense");
e.setAttribute("style", "border-color: currentColor currentColor currentcolor CURRENTcolor");
is(e.style.borderColor, "currentcolor", "should condense to canonical case");
is(e.style.cssText, "border-color: currentcolor;", "should condense to canonical case");
e.setAttribute("style", "border-style: ridge none none none");
is(e.style.borderStyle, "ridge none none", "should condense");
is(e.style.cssText, "border-style: ridge none none;", "should condense");

// Test that we refuse to serialize the 'background' and 'font'
// shorthands when some subproperties that can't be expressed in the
// shorthand syntax are present.
e.setAttribute("style", "font: medium serif");
isnot(e.style.font, "", "should have font shorthand");
e.setAttribute("style", "font: medium serif; font-size-adjust: 0.45");
is(e.style.font, "", "should not have font shorthand");
e.setAttribute("style", "font: medium serif; font-stretch: condensed");
is(e.style.font, "", "should not have font shorthand");

// For background, we can only express the value as a shorthand if
// origin and clip are both their default, or if they're both the same.
// ... or at least we will once we support them in the shorthand.
e.setAttribute("style", "background: red");
isnot(e.style.background, "", "should have background shorthand");
e.setAttribute("style", "background: red; background-origin: border-box");
isnot(e.style.background, "", "should have background shorthand (origin:border-box)");
e.setAttribute("style", "background: red; background-clip: padding-box");
isnot(e.style.background, "", "should have background shorthand (clip:padding-box)");
e.setAttribute("style", "background: red; background-origin: content-box");
is(e.style.background, "", "should not have background shorthand (origin:content-box)");
e.setAttribute("style", "background: red; background-clip: content-box");
is(e.style.background, "", "should not have background shorthand (clip:content-box)");
e.setAttribute("style", "background: red; background-clip: content-box; background-origin: content-box;");
isnot(e.style.background, "", "should have background shorthand (clip:content-box;origin:content-box)");
e.setAttribute("style", "background: red; background-size: 100% 100%");
is(e.style.background, "", "should not have background shorthand (size:100% 100%)");
e.setAttribute("style", "background: red; background-size: 100% auto");
is(e.style.background, "", "should not have background shorthand (size:100% auto)");
e.setAttribute("style", "background: red; background-size: auto 100%");
is(e.style.background, "", "should not have background shorthand (size:auto 100%)");
e.setAttribute("style", "background: red; -moz-background-inline-policy: each-box");
isnot(e.style.background, "", "should have background shorthand (-moz-background-inline-policy not relevant)");

// Check that we only serialize background when the lists (of layers) for
// the subproperties are the same length.
// XXX Should change  background-size to cover,auto,contain once
// background-size is part of shorthand.
e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: auto, auto, auto; 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");
isnot(e.style.background, "", "should have background shorthand (all lists length 3)");
e.setAttribute("style", "background-clip: border-box, padding-box, border-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: auto, auto, auto; 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");
is(e.style.background, "", "should not have background shorthand (background-clip too long)");
e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: padding-box, padding-box; background-size: auto, auto, auto; 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");
is(e.style.background, "", "should not have background shorthand (background-origin too short)");
e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: auto, auto, auto; 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");
is(e.style.background, "", "should not have background shorthand (background-image too long)");
e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: auto, auto, auto; 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");
is(e.style.background, "", "should not have background shorthand (background-attachment too short)");
e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: auto, auto, auto; 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");
is(e.style.background, "", "should not have background shorthand (background-position too long)");
e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: auto, auto, auto; 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");
is(e.style.background, "", "should not have background shorthand (background-repeat too short)");
e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: auto, auto, auto, auto; 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");
is(e.style.background, "", "should not have background shorthand (background-size too long)");

// Check that we only serialize transition when the lists are the same length.
e.setAttribute("style", "-moz-transition-property: color, width; -moz-transition-duration: 1s, 200ms; -moz-transition-timing-function: ease-in, linear; -moz-transition-delay: 0s, 1s");
isnot(e.style.MozTransition, "", "should have -moz-transition shorthand (lists same length)");
e.setAttribute("style", "-moz-transition-property: color, width, left; -moz-transition-duration: 1s, 200ms; -moz-transition-timing-function: ease-in, linear; -moz-transition-delay: 0s, 1s");
is(e.style.MozTransition, "", "should not have -moz-transition shorthand (lists different lengths)");
e.setAttribute("style", "-moz-transition-property: all; -moz-transition-duration: 1s, 200ms; -moz-transition-timing-function: ease-in, linear; -moz-transition-delay: 0s, 1s");
is(e.style.MozTransition, "", "should not have -moz-transition shorthand (lists different lengths)");
e.setAttribute("style", "-moz-transition-property: color, width; -moz-transition-duration: 1s, 200ms, 300ms; -moz-transition-timing-function: ease-in, linear; -moz-transition-delay: 0s, 1s");
is(e.style.MozTransition, "", "should not have -moz-transition shorthand (lists different lengths)");
e.setAttribute("style", "-moz-transition-property: color, width; -moz-transition-duration: 1s, 200ms; -moz-transition-timing-function: ease-in, linear, ease-out; -moz-transition-delay: 0s, 1s");
is(e.style.MozTransition, "", "should not have -moz-transition shorthand (lists different lengths)");
e.setAttribute("style", "-moz-transition-property: color, width; -moz-transition-duration: 1s, 200ms; -moz-transition-timing-function: ease-in, linear; -moz-transition-delay: 0s, 1s, 0s");
is(e.style.MozTransition, "", "should not have -moz-transition shorthand (lists different lengths)");

// Check that the 'border' shorthand resets 'border-image' and
// '-moz-border-*-colors', but that other 'border-*' shorthands don't
// (bug 482692).
e.setAttribute("style", '-moz-border-image: url("foo.png") 5 5 5 5; border-left: medium solid green');
is(e.style.cssText,
   '-moz-border-image: url("foo.png") 5 5 5 5; border-left: medium solid green;',
   "border-left does NOT reset -moz-border-image");
e.setAttribute("style", '-moz-border-image: url("foo.png") 5 5 5 5; border: medium solid green');
is(e.style.cssText,
   'border: medium solid green;',
   "border DOES reset -moz-border-image");
e.setAttribute("style", '-moz-border-left-colors: fuchsia blue; border-left: medium solid green');
is(e.style.cssText,
   '-moz-border-left-colors: fuchsia blue; border-left: medium solid green;',
   "border-left does NOT reset -moz-border-left-colors");
e.setAttribute("style", '-moz-border-left-colors: fuchsia blue; border: medium solid green');
is(e.style.cssText,
   'border: medium solid green;',
   "border DOES reset -moz-border-left-colors");

</script>
</pre>
</body>
</html>