Commit aa830492 authored by Chris Nardi's avatar Chris Nardi Committed by Commit Bot

Serialize font shorthand like any other shorthand

The font shorthand had a short-circuit in StylePropertySerializer, which
meant that it was never serialized as a shorthand for style.cssText,
citing reasons of web incompatibility. However, it appears that all
other major browsers serialize font as a shorthand instead of having
style.cssText expand to all properties. Remove this short-circuit to
match other browsers.

Bug: 827921
Change-Id: I4d522b41a6153808b6b8dab17831afdd8315fdc3
Reviewed-on: https://chromium-review.googlesource.com/989834
Commit-Queue: Chris Nardi <cnardi@chromium.org>
Reviewed-by: default avatarTimothy Loh <timloh@chromium.org>
Cr-Commit-Position: refs/heads/master@{#547607}
parent 4c161e38
<!doctype html>
<html>
<meta charset="utf-8">
<title>Serialization of font shorthand</title>
<link rel="help" href="https://drafts.csswg.org/cssom-1/#serialize-a-css-declaration-block">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="target" style="font: 10px/1 Ahem;"></div>
<script>
test(function() {
var target = document.getElementById('target');
assert_equals(target.style.cssText, 'font: 10px/1 Ahem;');
assert_equals(target.style.font, '10px/1 Ahem');
}, "The font shorthand should be serialized just like any other shorthand.");
</script>
</html>
This is a testharness.js-based test.
PASS Longhand with variable preserves original serialization: with withespace
FAIL Shorthand with variable preserves original serialization: with withespace assert_equals: expected "font: var(--a);" but got "font-style: ; font-variant: var(--a); font-weight: ; font-stretch: ; font-size: ; line-height: ; font-family: ;"
FAIL Longhand with variable preserves original serialization: without withespace assert_equals: expected "font-size:var(--a);" but got "font-size: var(--a);"
FAIL Shorthand with variable preserves original serialization: without withespace assert_equals: expected "font:var(--a);" but got "font-style: ; font-variant: var(--a); font-weight: ; font-stretch: ; font-size: ; line-height: ; font-family: ;"
PASS Longhand with variable preserves original serialization: with whitespace
PASS Shorthand with variable preserves original serialization: with whitespace
FAIL Longhand with variable preserves original serialization: without whitespace assert_equals: expected "font-size:var(--a);" but got "font-size: var(--a);"
FAIL Shorthand with variable preserves original serialization: without whitespace assert_equals: expected "font:var(--a);" but got "font: var(--a);"
Harness: the test ran to completion.
......@@ -14,23 +14,23 @@
var elem = document.getElementById('longhand-whitespace');
assert_equals(elem.style.cssText, 'font-size: var(--a);');
}, 'Longhand with variable preserves original serialization: with withespace')
}, 'Longhand with variable preserves original serialization: with whitespace')
test(function() {
var elem = document.getElementById('shorthand-whitespace');
assert_equals(elem.style.cssText, 'font: var(--a);');
}, 'Shorthand with variable preserves original serialization: with withespace')
}, 'Shorthand with variable preserves original serialization: with whitespace')
test(function() {
var elem = document.getElementById('longhand');
assert_equals(elem.style.cssText, 'font-size:var(--a);');
}, 'Longhand with variable preserves original serialization: without withespace')
}, 'Longhand with variable preserves original serialization: without whitespace')
test(function() {
var elem = document.getElementById('shorthand');
assert_equals(elem.style.cssText, 'font:var(--a);');
}, 'Shorthand with variable preserves original serialization: without withespace')
}, 'Shorthand with variable preserves original serialization: without whitespace')
</script>
......@@ -3,7 +3,7 @@ Tests that console logging dumps properly styled messages, and that the whole me
console-format-style-whitelist.js:13 Colors are awesome.
Styled text #0: contain: paint; display: inline-block; color: blue;
console-format-style-whitelist.js:14 So are fonts!
Styled text #0: contain: paint; display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 1em; line-height: normal; font-family: Helvetica;
Styled text #0: contain: paint; display: inline-block; font: 1em Helvetica;
console-format-style-whitelist.js:15 And borders and margins and paddings!
Styled text #0: contain: paint; display: inline-block; border: 1px solid red; margin: 20px; padding: 10px;
console-format-style-whitelist.js:16 text-* is fine by us!
......
......@@ -257,11 +257,6 @@ String StylePropertySerializer::AsText() const {
CSSPropertyID shorthand_property = shorthand.id();
int shorthand_property_index = shorthand_property - firstCSSProperty;
// TODO(timloh): Do we actually need this check? A previous comment
// said "old UAs can't recognize them but are important for editing"
// but Firefox doesn't do this.
if (shorthand_property == CSSPropertyFont)
continue;
// We already tried serializing as this shorthand
if (shorthand_appeared.test(shorthand_property_index))
continue;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment