2008-12-23 06:06:57 -08:00
<!DOCTYPE HTML>
< html >
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=376075
-->
< head >
< title > Test for Bug 376075< / title >
2009-05-06 13:46:04 -07:00
< script type = "application/javascript" src = "/MochiKit/packed.js" > < / script >
2008-12-23 06:06:57 -08:00
< 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");
// 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");
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");
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");
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");
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");
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");
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");
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");
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");
is(e.style.border, "", "should not be able to serialize border");
2008-12-23 06:06:57 -08:00
// 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");
2008-12-23 06:06:57 -08:00
// 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");
2008-12-23 06:06:57 -08:00
2008-12-23 06:06:57 -08:00
// 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");
2009-02-19 21:29:21 -08:00
// 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.
2008-12-23 06:06:57 -08:00
e.setAttribute("style", "background: red");
isnot(e.style.background, "", "should have background shorthand");
e.setAttribute("style", "background: red; -moz-background-origin: border");
2009-02-19 21:29:21 -08:00
is(e.style.background, "", "should not have background shorthand (origin:border)");
2008-12-23 06:06:57 -08:00
e.setAttribute("style", "background: red; -moz-background-clip: padding");
2009-02-19 21:29:21 -08:00
is(e.style.background, "", "should not have background shorthand (clip:padding)");
e.setAttribute("style", "background: red; -moz-background-origin: content");
is(e.style.background, "", "should not have background shorthand (origin:content)");
// -moz-background-clip:content not yet supported
//e.setAttribute("style", "background: red; -moz-background-clip: content");
//is(e.style.background, "", "should not have background shorthand (clip:content)");
//e.setAttribute("style", "background: red; -moz-background-clip: content; -moz-background-origin: content;");
//isnot(e.style.background, "", "should have background shorthand (clip:content;origin:content)");
2008-12-23 06:06:57 -08:00
e.setAttribute("style", "background: red; -moz-background-inline-policy: each-box");
2009-02-19 21:29:21 -08:00
isnot(e.style.background, "", "should have background shorthand (-moz-background-inline-policy not relevant)");
2008-12-23 06:06:57 -08:00
2009-08-20 14:52:47 -07:00
// Check that we only serialize background when the lists (of layers) for
// the subproperties are the same length.
// XXX Should change background-clip to border,padding,border and
// background-origin to border,padding,padding once serialization does
// clip/origin.
e.setAttribute("style", "-moz-background-clip: border, border, border; -moz-background-origin: padding, padding, padding; -moz-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");
isnot(e.style.background, "", "should have background shorthand (all lists length 3)");
e.setAttribute("style", "-moz-background-clip: border, border, border, border; -moz-background-origin: padding, padding, padding; -moz-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");
is(e.style.background, "", "should not have background shorthand (background-clip too long)");
e.setAttribute("style", "-moz-background-clip: border, border, border; -moz-background-origin: border, padding; -moz-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");
is(e.style.background, "", "should not have background shorthand (background-origin too short)");
e.setAttribute("style", "-moz-background-clip: border, border, border; -moz-background-origin: padding, padding, padding; -moz-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");
is(e.style.background, "", "should not have background shorthand (background-image too long)");
e.setAttribute("style", "-moz-background-clip: border, border, border; -moz-background-origin: padding, padding, padding; -moz-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");
is(e.style.background, "", "should not have background shorthand (background-attachment too short)");
e.setAttribute("style", "-moz-background-clip: border, border, border; -moz-background-origin: padding, padding, padding; -moz-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");
is(e.style.background, "", "should not have background shorthand (background-position too long)");
e.setAttribute("style", "-moz-background-clip: border, border, border; -moz-background-origin: padding, padding, padding; -moz-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");
is(e.style.background, "", "should not have background shorthand (background-repeat too short)");
e.setAttribute("style", "-moz-background-clip: border, border, border; -moz-background-origin: padding, padding, padding; -moz-background-size: cover, auto, contain, cover; 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 (-moz-background-size too long)");
// Check that we only serialize transition when the lists are the same length.
2009-11-04 18:36:18 -08:00
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");
2009-08-20 14:52:47 -07:00
isnot(e.style.MozTransition, "", "should have -moz-transition shorthand (lists same length)");
2009-11-04 18:36:18 -08:00
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");
2009-08-20 14:52:47 -07:00
is(e.style.MozTransition, "", "should not have -moz-transition shorthand (lists different lengths)");
2009-11-04 18:36:18 -08:00
e.setAttribute("style", "-moz-transition-property: all; -moz-transition-duration: 1s, 200ms; -moz-transition-timing-function: ease-in, linear; -moz-transition-delay: 0s, 1s");
2009-08-20 14:52:47 -07:00
is(e.style.MozTransition, "", "should not have -moz-transition shorthand (lists different lengths)");
2009-11-04 18:36:18 -08:00
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");
2009-08-20 14:52:47 -07:00
is(e.style.MozTransition, "", "should not have -moz-transition shorthand (lists different lengths)");
2009-11-04 18:36:18 -08:00
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");
2009-08-20 14:52:47 -07:00
is(e.style.MozTransition, "", "should not have -moz-transition shorthand (lists different lengths)");
2009-11-04 18:36:18 -08:00
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");
2009-08-20 14:52:47 -07:00
is(e.style.MozTransition, "", "should not have -moz-transition shorthand (lists different lengths)");
2008-12-23 06:06:57 -08:00
< / script >
< / pre >
< / body >
< / html >
