third_party/WebKit/LayoutTests/fast/css/font-shorthand-from-longhands.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 @font-face {
   6     font-family: "foobar";
   7     src: local("foobar");
   8 }
   9 div {
  10     font-family: "foobar";
  11 }
  12 </style>
  13 <script src="../../resources/js-test.js"></script>
  14 </head>
  15 <body>
  16 <script>
  17 description("Test the return values for the font properties on the style object.")
  18
  19 var testContainer = document.createElement("div");
  20 document.body.appendChild(testContainer);
  21
  22 testContainer.innerHTML = '<div id="test">hello</div>';
  23
  24 var e = document.getElementById('test');
  25 var style = e.style;
  26 var computedStyle = window.getComputedStyle(e, null);
  27
  28 // This function checks the return value of style.font and verifies WebKit can parse it.
  29 function checkFontStyleValue() {
  30     var before = e.style.getPropertyValue('font');
  31     e.style.font = '';
  32     e.style.font = before;
  33     return (e.style.getPropertyValue('font') === before);
  34 }
  35
  36 style.fontSize = "20px";
  37 // We need at least the font-family to build the shorthand.
  38 shouldBe("style.font", "''");
  39 shouldBe("computedStyle.font", "'normal normal normal normal 20px / normal foobar'");
  40 shouldBe("computedStyle.fontSize", "'20px'");
  41 shouldBe("checkFontStyleValue()", "true");
  42
  43 style.fontSize = "20px";
  44 style.fontFamily = "sans-serif";
  45 shouldBe("style.font", "'20px sans-serif'");
  46 shouldBe("computedStyle.font", "'normal normal normal normal 20px / normal sans-serif'");
  47 shouldBe("computedStyle.fontFamily", "'sans-serif'");
  48 shouldBe("checkFontStyleValue()", "true");
  49
  50 style.fontStyle = "italic";
  51 shouldBe("style.font", "'italic 20px sans-serif'");
  52 shouldBe("computedStyle.font", "'italic normal normal normal 20px / normal sans-serif'");
  53 shouldBe("computedStyle.fontStyle", "'italic'");
  54 shouldBe("checkFontStyleValue()", "true");
  55
  56 style.fontVariant = "small-caps";
  57 shouldBe("style.font", "'italic small-caps 20px sans-serif'");
  58 shouldBe("computedStyle.font", "'italic small-caps normal normal 20px / normal sans-serif'");
  59 shouldBe("computedStyle.fontVariant", "'small-caps'");
  60 shouldBe("checkFontStyleValue()", "true");
  61
  62 style.fontWeight = "bold";
  63 shouldBe("style.font", "'italic small-caps bold 20px sans-serif'");
  64 shouldBe("computedStyle.font", "'italic small-caps bold normal 20px / normal sans-serif'");
  65 shouldBe("computedStyle.fontWeight", "'bold'");
  66 shouldBe("checkFontStyleValue()", "true");
  67
  68 style.lineHeight = "40px";
  69 shouldBe("style.font", "'italic small-caps bold 20px/40px sans-serif'");
  70 shouldBe("computedStyle.font", "'italic small-caps bold normal 20px / 40px sans-serif'");
  71 shouldBe("computedStyle.lineHeight", "'40px'");
  72 shouldBe("checkFontStyleValue()", "true");
  73
  74 style.font = "";
  75 shouldBe("style.font", "''");
  76 shouldBe("computedStyle.font", "'normal normal normal normal 16px / normal foobar'");
  77 shouldBe("checkFontStyleValue()", "true");
  78
  79 style.fontWeight = "bold";
  80 // It is normal to return null as the font-size is mandatory to build the shorthand.
  81 shouldBe("style.font", "''");
  82 shouldBe("computedStyle.font", "'normal normal bold normal 16px / normal foobar'");
  83 shouldBe("computedStyle.fontWeight", "'bold'");
  84 shouldBe("checkFontStyleValue()", "true");
  85
  86 style.fontSize = "40px";
  87 style.fontFamily = "sans-serif";
  88 style.fontWeight = "bold";
  89 shouldBe("style.font", "'bold 40px sans-serif'");
  90 shouldBe("computedStyle.font", "'normal normal bold normal 40px / normal sans-serif'");
  91 shouldBe("computedStyle.fontSize", "'40px'");
  92 shouldBe("computedStyle.fontFamily", "'sans-serif'");
  93 shouldBe("checkFontStyleValue()", "true");
  94
  95 document.body.removeChild(testContainer);
  96 </script>
  97 </body>
  98 </html>