| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| @font-face { |
| font-family: "foobar"; |
| src: local("foobar"); |
| } |
| div { |
| font-family: "foobar"; |
| } |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <script> |
| description("Test the return values for the font properties on the style object.") |
| |
| var testContainer = document.createElement("div"); |
| document.body.appendChild(testContainer); |
| |
| testContainer.innerHTML = '<div id="test">hello</div>'; |
| |
| var e = document.getElementById('test'); |
| var style = e.style; |
| var computedStyle = window.getComputedStyle(e, null); |
| |
| // This function checks the return value of style.font and verifies WebKit can parse it. |
| function checkFontStyleValue() { |
| var before = e.style.getPropertyValue('font'); |
| e.style.font = ''; |
| e.style.font = before; |
| return (e.style.getPropertyValue('font') === before); |
| } |
| |
| style.fontSize = "20px"; |
| // We need all font longhands to build the shorthand. |
| shouldBe("style.font", "''"); |
| shouldBe("computedStyle.font", "'normal normal 400 normal 20px / normal foobar'"); |
| shouldBe("computedStyle.fontSize", "'20px'"); |
| shouldBe("checkFontStyleValue()", "true"); |
| |
| style.fontSize = "20px"; |
| style.fontFamily = "sans-serif"; |
| shouldBe("style.font", "''"); |
| shouldBe("computedStyle.font", "'normal normal 400 normal 20px / normal sans-serif'"); |
| shouldBe("computedStyle.fontFamily", "'sans-serif'"); |
| |
| style.fontStyle = "italic"; |
| shouldBe("style.font", "''"); |
| shouldBe("computedStyle.font", "'italic normal 400 normal 20px / normal sans-serif'"); |
| shouldBe("computedStyle.fontStyle", "'italic'"); |
| |
| style.fontVariant = "small-caps"; |
| shouldBe("style.font", "''"); |
| shouldBe("computedStyle.font", "'italic small-caps 400 normal 20px / normal sans-serif'"); |
| shouldBe("computedStyle.fontVariant", "'small-caps'"); |
| |
| style.fontWeight = "bold"; |
| shouldBe("style.font", "''"); |
| shouldBe("computedStyle.font", "'italic small-caps 700 normal 20px / normal sans-serif'"); |
| shouldBe("computedStyle.fontWeight", "'bold'"); |
| |
| style.lineHeight = "40px"; |
| shouldBe("style.font", "''"); |
| shouldBe("computedStyle.font", "'italic small-caps 700 normal 20px / 40px sans-serif'"); |
| shouldBe("computedStyle.lineHeight", "'40px'"); |
| |
| style.fontStretch = "ultra-expanded"; |
| // All font longhands are set, therefore shorthand is built |
| shouldBe("style.font", "'italic small-caps bold ultra-expanded 20px/40px sans-serif'"); |
| shouldBe("computedStyle.font", "'italic small-caps 700 ultra-expanded 20px / 40px sans-serif'"); |
| shouldBe("checkFontStyleValue()", "true"); |
| |
| style.fontVariantLigatures = "discretionary-ligatures"; |
| // Shorthand cannot be built because of non-normal ligatures value. |
| shouldBe("style.font", "''"); |
| shouldBe("computedStyle.font", "''"); |
| // Reset for next test. |
| style.fontVariantLigatures = "normal"; |
| shouldBe("style.font", "'italic small-caps bold ultra-expanded 20px/40px sans-serif'"); |
| shouldBe("computedStyle.font", "'italic small-caps 700 ultra-expanded 20px / 40px sans-serif'"); |
| |
| style.fontVariantNumeric = "lining-nums"; |
| // Shorthand cannot be built because of non-normal numeric value. |
| shouldBe("style.font", "''"); |
| shouldBe("computedStyle.font", "''"); |
| // Reset for next test. |
| style.fontVariantNumeric = "normal"; |
| shouldBe("style.font", "'italic small-caps bold ultra-expanded 20px/40px sans-serif'"); |
| shouldBe("computedStyle.font", "'italic small-caps 700 ultra-expanded 20px / 40px sans-serif'"); |
| |
| style.font = ""; |
| shouldBe("style.font", "''"); |
| shouldBe("computedStyle.font", "'normal normal 400 normal 16px / normal foobar'"); |
| shouldBe("checkFontStyleValue()", "true"); |
| |
| style.fontVariantCaps = "all-small-caps"; |
| shouldBe("style.fontVariantCaps", "'all-small-caps'"); |
| // Font shorthand is reset to empty string since all-small-caps cannot be represented. |
| shouldBe("computedStyle.font", "''"); |
| shouldBe("style.font", "''"); |
| |
| document.body.removeChild(testContainer); |
| </script> |
| </body> |
| </html> |
