layout/style/test/test_shorthand_property_getters.html
author Emmanuele Bassi <ebassi@mozilla.com>
Sun, 08 Jul 2012 21:25:10 -0400
changeset 98673 137f4655cf255762958f6a52f55b794a98dc13fd
parent 95342 8ff7563000f527d6bd6c79d107afcfca45fdd83d
child 107187 69e42083a29a6bc319bcf0e6a434de70da479904
permissions -rw-r--r--
Bug 762303 - Unprefix CSS Transition properties and provide temporary aliases for -moz-transition and exposed subproperties. r=dbaron

<!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; 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", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s");
isnot(e.style.transition, "", "should have transition shorthand (lists same length)");
e.setAttribute("style", "transition-property: color, width, left; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s");
is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
e.setAttribute("style", "transition-property: all; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s");
is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms, 300ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s");
is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear, ease-out; transition-delay: 0s, 1s");
is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s, 0s");
is(e.style.transition, "", "should not have 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", 'border-image: url("foo.png") 5 5 5 5 / 5 5 5 5 / 5 5 5 5 repeat repeat; border-left: medium solid green');
is(e.style.cssText,
   'border-image: url("foo.png") 5 5 5 5 / 5 5 5 5 / 5 5 5 5 repeat repeat; border-left: medium solid green;',
   "border-left does NOT reset border-image");
e.setAttribute("style", 'border-image: url("foo.png") 5 5 5 5; border: medium solid green');
is(e.style.cssText,
   'border: medium solid green;',
   "border DOES reset 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>