Commit 51afc5d9 authored by Jaeyong Bae's avatar Jaeyong Bae Committed by Chromium LUCI CQ

[CSS] Serialize flex property into longhands

Currently, flex with CSS-wide keyword is serialized by shorthands. We
should serialize into longhands per spec. So that it should include
flex-basis, flex-grow, and flex-shrink properties.

Bug: 1149779
Change-Id: I2431f89ac878d6d50686ce9faa75f9f4dd13f6f1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2550331
Commit-Queue: Jaeyong Bae <jdragon.bae@gmail.com>
Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Reviewed-by: default avatarEmilio Cobos Álvarez <emilio@chromium.org>
Cr-Commit-Position: refs/heads/master@{#834240}
parent 1d5f4cd9
...@@ -331,7 +331,6 @@ static bool AllowInitialInShorthand(CSSPropertyID property_id) { ...@@ -331,7 +331,6 @@ static bool AllowInitialInShorthand(CSSPropertyID property_id) {
case CSSPropertyID::kOutline: case CSSPropertyID::kOutline:
case CSSPropertyID::kColumnRule: case CSSPropertyID::kColumnRule:
case CSSPropertyID::kColumns: case CSSPropertyID::kColumns:
case CSSPropertyID::kFlex:
case CSSPropertyID::kFlexFlow: case CSSPropertyID::kFlexFlow:
case CSSPropertyID::kGridColumn: case CSSPropertyID::kGridColumn:
case CSSPropertyID::kGridRow: case CSSPropertyID::kGridRow:
......
This is a testharness.js-based test.
FAIL CSSOM - Flex serialization assert_in_array: Single value flex with non-CSS-wide keyword should serialize correctly. value "flex: 0 1 0%;" not in array ["flex: 0px;", "flex: 0 1 0px;"]
Harness: the test ran to completion.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSSOM - Flex serialization</title>
<link rel="help" href="https://drafts.csswg.org/cssom/#serialize-a-css-value">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div { flex: initial; }
div { flex: 0; }
div { flex: initial; flex-basis: initial; flex-shrink: initial; }
div { flex: initial; flex-shrink: 0; }
div { flex: initial; flex-basis: 0; flex-shrink: 2;}
</style>
<script>
test(function () {
var styleSheet = document.styleSheets[0];
assert_equals(styleSheet.cssRules[0].style.cssText, "flex: initial;", "Single value flex with CSS-wide keyword should serialize correctly.");
assert_in_array(styleSheet.cssRules[1].style.cssText, ["flex: 0px;", "flex: 0 1 0px;"], "Single value flex with non-CSS-wide keyword should serialize correctly.");
assert_equals(styleSheet.cssRules[2].style.cssText, "flex: initial;", "Multiple values flex with CSS-wide keyword should serialize correctly.");
assert_equals(styleSheet.cssRules[3].style.cssText, "flex-grow: initial; flex-basis: initial; flex-shrink: 0;", "Multiple values flex with CSS-wide and non-CSS-wide keyword should serialize correctly.");
assert_equals(styleSheet.cssRules[4].style.cssText, "flex-grow: initial; flex-basis: 0px; flex-shrink: 2;", "Multiple values flex with CSS-wide and non-CSS-wide keyword should serialize correctly.");
});
</script>
</head>
</html>
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