Skip to content

GitLab

T
tangled
Commit 81ac6e10 authored by jfernandez's avatar jfernandez Committed by Commit bot
Browse files
Options

[css-align] Adapt content-alignment properties to the new baseline syntax 

The baseline-position syntax has changed recently, so we need to update
the CSS properties using the old syntax. This patch address only the
content-alignment (align-content and justify-content).

I used this patch to adapt the implementation of the parsing logic for
these properties to the new Blink's CSS Parsing Design.

The new baseline syntax is "[first | last ]? baseline" which implies
modifying the parsing and computed value logic.

There are several layout tests affected by this change, so I'll update
them accordingly.

BUG=565883

Review-Url: https://codereview.chromium.org/2750843002
Cr-Commit-Position: refs/heads/master@{#457434}
parent 873b27d5
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 502 additions and 744 deletions
third_party/WebKit/LayoutTests/fast/alignment/parse-align-content-expected.txt deleted 100644 → 0
View file @ 873b27d5
Test that setting and getting align-content works as expected
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
Test getting align-content set through CSS
PASS getComputedStyle(alignContentAuto, '').getPropertyValue('align-content') is "normal"
PASS getComputedStyle(alignContentBaseline, '').getPropertyValue('align-content') is "baseline"
PASS getComputedStyle(alignContentLastBaseline, '').getPropertyValue('align-content') is "last-baseline"
PASS getComputedStyle(alignContentSpaceBetween, '').getPropertyValue('align-content') is "space-between"
PASS getComputedStyle(alignContentSpaceAround, '').getPropertyValue('align-content') is "space-around"
PASS getComputedStyle(alignContentSpaceEvenly, '').getPropertyValue('align-content') is "space-evenly"
PASS getComputedStyle(alignContentStretch, '').getPropertyValue('align-content') is "stretch"
PASS getComputedStyle(alignContentStart, '').getPropertyValue('align-content') is "start"
PASS getComputedStyle(alignContentEnd, '').getPropertyValue('align-content') is "end"
PASS getComputedStyle(alignContentCenter, '').getPropertyValue('align-content') is "center"
PASS getComputedStyle(alignContentLeft, '').getPropertyValue('align-content') is "left"
PASS getComputedStyle(alignContentRight, '').getPropertyValue('align-content') is "right"
PASS getComputedStyle(alignContentFlexStart, '').getPropertyValue('align-content') is "flex-start"
PASS getComputedStyle(alignContentFlexEnd, '').getPropertyValue('align-content') is "flex-end"
PASS getComputedStyle(alignContentEndUnsafe, '').getPropertyValue('align-content') is "end unsafe"
PASS getComputedStyle(alignContentCenterUnsafe, '').getPropertyValue('align-content') is "center unsafe"
PASS getComputedStyle(alignContentRightSafe, '').getPropertyValue('align-content') is "right safe"
PASS getComputedStyle(alignContentLeftUnsafe, '').getPropertyValue('align-content') is "left unsafe"
PASS getComputedStyle(alignContentFlexStartUnsafe, '').getPropertyValue('align-content') is "flex-start unsafe"
PASS getComputedStyle(alignContentFlexEndSafe, '').getPropertyValue('align-content') is "flex-end safe"
PASS getComputedStyle(alignContentSpaceBetweenLeft, '').getPropertyValue('align-content') is "space-between left"
PASS getComputedStyle(alignContentSpaceAroundCenter, '').getPropertyValue('align-content') is "space-around center"
PASS getComputedStyle(alignContentSpaceEvenlyRight, '').getPropertyValue('align-content') is "space-evenly right"
PASS getComputedStyle(alignContentStretchStartSafe, '').getPropertyValue('align-content') is "stretch start safe"
PASS getComputedStyle(alignContentSpaceAroundEndUnsafe, '').getPropertyValue('align-content') is "space-around end unsafe"
PASS getComputedStyle(alignContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('align-content') is "space-evenly flex-start safe"
PASS getComputedStyle(alignContentSpaceBetweenSafe, '').getPropertyValue('align-content') is "normal"
PASS getComputedStyle(alignContentSpaceBetweenStretch, '').getPropertyValue('align-content') is "normal"
PASS getComputedStyle(alignContentSafe, '').getPropertyValue('align-content') is "normal"
PASS getComputedStyle(alignContentRightSafeUnsafe, '').getPropertyValue('align-content') is "normal"
PASS getComputedStyle(alignContentCenterLeft, '').getPropertyValue('align-content') is "normal"
Test initial value of align-content through JS
PASS getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
Test getting and setting align-content through JS
PASS element.style.alignContent is "center"
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "center"
PASS element.style.alignContent is "start unsafe"
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start unsafe"
PASS element.style.alignContent is "flex-end safe"
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "flex-end safe"
PASS element.style.alignContent is "space-between right safe"
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "space-between right safe"
PASS element.style.alignContent is "stretch center"
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch center"
PASS element.style.alignContent is "right unsafe"
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "right unsafe"
PASS element.style.alignContent is "normal"
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
PASS element.style.alignContent is "normal"
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
PASS element.style.alignContent is "normal"
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
PASS element.style.alignContent is "flex-end"
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "flex-end"
Test bad combinations of align-content
PASS element.style.alignContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
PASS element.style.alignContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
PASS element.style.alignContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
PASS element.style.alignContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
PASS element.style.alignContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
PASS element.style.alignContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
PASS element.style.alignContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
PASS element.style.alignContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
PASS element.style.alignContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
PASS element.style.alignContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
PASS element.style.alignContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
PASS element.style.alignContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
PASS element.style.alignContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
PASS element.style.alignContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
PASS element.style.alignContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
PASS element.style.alignContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
PASS element.style.alignContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
PASS element.style.alignContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
PASS element.style.alignContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
PASS element.style.alignContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
PASS element.style.alignContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
PASS element.style.alignContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
Test the value 'initial'
PASS element.style.alignContent is "stretch center"
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch center"
PASS element.style.alignContent is "initial"
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
Test the value 'initial' for grid containers
PASS element.style.alignContent is "space-between left"
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "space-between left"
PASS element.style.alignContent is "initial"
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
Test the value 'initial' for flex containers
PASS element.style.alignContent is "right unsafe"
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "right unsafe"
PASS element.style.alignContent is "initial"
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
Test the value 'inherit'
PASS element.style.alignContent is "end"
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "end"
PASS element.style.alignContent is "inherit"
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "end"
PASS element.style.alignContent is "left safe"
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "left safe"
PASS element.style.alignContent is "inherit"
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "left safe"
PASS element.style.alignContent is "stretch center"
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch center"
PASS element.style.alignContent is "inherit"
PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch center"
PASS successfullyParsed is true
TEST COMPLETE
third_party/WebKit/LayoutTests/fast/alignment/parse-justify-content-expected.txt deleted 100644 → 0
View file @ 873b27d5
Test that setting and getting justify-content works as expected
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
Test getting justify-content set through CSS
PASS getComputedStyle(justifyContentAuto, '').getPropertyValue('justify-content') is "normal"
PASS getComputedStyle(justifyContentBaseline, '').getPropertyValue('justify-content') is "baseline"
PASS getComputedStyle(justifyContentLastBaseline, '').getPropertyValue('justify-content') is "last-baseline"
PASS getComputedStyle(justifyContentSpaceBetween, '').getPropertyValue('justify-content') is "space-between"
PASS getComputedStyle(justifyContentSpaceAround, '').getPropertyValue('justify-content') is "space-around"
PASS getComputedStyle(justifyContentSpaceEvenly, '').getPropertyValue('justify-content') is "space-evenly"
PASS getComputedStyle(justifyContentStretch, '').getPropertyValue('justify-content') is "stretch"
PASS getComputedStyle(justifyContentStart, '').getPropertyValue('justify-content') is "start"
PASS getComputedStyle(justifyContentEnd, '').getPropertyValue('justify-content') is "end"
PASS getComputedStyle(justifyContentCenter, '').getPropertyValue('justify-content') is "center"
PASS getComputedStyle(justifyContentLeft, '').getPropertyValue('justify-content') is "left"
PASS getComputedStyle(justifyContentRight, '').getPropertyValue('justify-content') is "right"
PASS getComputedStyle(justifyContentFlexStart, '').getPropertyValue('justify-content') is "flex-start"
PASS getComputedStyle(justifyContentFlexEnd, '').getPropertyValue('justify-content') is "flex-end"
PASS getComputedStyle(justifyContentEndUnsafe, '').getPropertyValue('justify-content') is "end unsafe"
PASS getComputedStyle(justifyContentCenterUnsafe, '').getPropertyValue('justify-content') is "center unsafe"
PASS getComputedStyle(justifyContentRightSafe, '').getPropertyValue('justify-content') is "right safe"
PASS getComputedStyle(justifyContentLeftUnsafe, '').getPropertyValue('justify-content') is "left unsafe"
PASS getComputedStyle(justifyContentFlexStartUnsafe, '').getPropertyValue('justify-content') is "flex-start unsafe"
PASS getComputedStyle(justifyContentFlexEndSafe, '').getPropertyValue('justify-content') is "flex-end safe"
PASS getComputedStyle(justifyContentSpaceBetweenLeft, '').getPropertyValue('justify-content') is "space-between left"
PASS getComputedStyle(justifyContentSpaceAroundCenter, '').getPropertyValue('justify-content') is "space-around center"
PASS getComputedStyle(justifyContentSpaceEvenlyRight, '').getPropertyValue('justify-content') is "space-evenly right"
PASS getComputedStyle(justifyContentStretchStartSafe, '').getPropertyValue('justify-content') is "stretch start safe"
PASS getComputedStyle(justifyContentSpaceAroundEndUnsafe, '').getPropertyValue('justify-content') is "space-around end unsafe"
PASS getComputedStyle(justifyContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('justify-content') is "space-evenly flex-start safe"
PASS getComputedStyle(justifyContentSpaceBetweenSafe, '').getPropertyValue('justify-content') is "normal"
PASS getComputedStyle(justifyContentSpaceBetweenStretch, '').getPropertyValue('justify-content') is "normal"
PASS getComputedStyle(justifyContentSafe, '').getPropertyValue('justify-content') is "normal"
PASS getComputedStyle(justifyContentRightSafeUnsafe, '').getPropertyValue('justify-content') is "normal"
PASS getComputedStyle(justifyContentCenterLeft, '').getPropertyValue('justify-content') is "normal"
Test initial value of justify-content through JS
PASS getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
Test getting and setting justify-content through JS
PASS element.style.justifyContent is "center"
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "center"
PASS element.style.justifyContent is "start unsafe"
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start unsafe"
PASS element.style.justifyContent is "flex-end safe"
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "flex-end safe"
PASS element.style.justifyContent is "space-between right safe"
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "space-between right safe"
PASS element.style.justifyContent is "stretch center"
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "stretch center"
PASS element.style.justifyContent is "right unsafe"
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "right unsafe"
PASS element.style.justifyContent is "normal"
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
PASS element.style.justifyContent is "normal"
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
PASS element.style.justifyContent is "normal"
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
PASS element.style.justifyContent is "flex-end"
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "flex-end"
Test bad combinations of justify-content
PASS element.style.justifyContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
PASS element.style.justifyContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
PASS element.style.justifyContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
PASS element.style.justifyContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
PASS element.style.justifyContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
PASS element.style.justifyContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
PASS element.style.justifyContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
PASS element.style.justifyContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
PASS element.style.justifyContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
PASS element.style.justifyContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
PASS element.style.justifyContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
PASS element.style.justifyContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
PASS element.style.justifyContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
PASS element.style.justifyContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
PASS element.style.justifyContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
PASS element.style.justifyContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
PASS element.style.justifyContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
PASS element.style.justifyContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
PASS element.style.justifyContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
PASS element.style.justifyContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
PASS element.style.justifyContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
PASS element.style.justifyContent is ""
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
Test the value 'initial'
PASS element.style.justifyContent is "stretch center"
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "stretch center"
PASS element.style.justifyContent is "initial"
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
Test the value 'initial' for grid containers
PASS element.style.justifyContent is "space-between left"
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "space-between left"
PASS element.style.justifyContent is "initial"
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
Test the value 'initial' for flex containers
PASS element.style.justifyContent is "right unsafe"
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "right unsafe"
PASS element.style.justifyContent is "initial"
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
Test the value 'inherit'
PASS element.style.justifyContent is "end"
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "end"
PASS element.style.justifyContent is "inherit"
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "end"
PASS element.style.justifyContent is "left safe"
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "left safe"
PASS element.style.justifyContent is "inherit"
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "left safe"
PASS element.style.justifyContent is "stretch center"
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "stretch center"
PASS element.style.justifyContent is "inherit"
PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "stretch center"
PASS successfullyParsed is true
TEST COMPLETE
third_party/WebKit/Source/core/css/CSSContentDistributionValue.cpp
View file @ 81ac6e10
......@@ -25,8 +25,17 @@ String CSSContentDistributionValue::customCSSText() const {
if (m_distribution != CSSValueInvalid)
list->append(*distribution());
if (m_position != CSSValueInvalid)
list->append(*position());
if (m_position != CSSValueInvalid) {
if (m_position == CSSValueFirstBaseline ||
m_position == CSSValueLastBaseline) {
CSSValueID preference =
m_position == CSSValueFirstBaseline ? CSSValueFirst : CSSValueLast;
list->append(*CSSIdentifierValue::create(preference));
list->append(*CSSIdentifierValue::create(CSSValueBaseline));
} else {
list->append(*position());
}
}
if (m_overflow != CSSValueInvalid)
list->append(*overflow());
......
third_party/WebKit/Source/core/css/CSSContentDistributionValue.h
View file @ 81ac6e10
......@@ -7,6 +7,7 @@
#include "core/css/CSSIdentifierValue.h"
#include "core/css/CSSValue.h"
#include "core/css/CSSValuePair.h"
#include "wtf/RefPtr.h"
namespace blink {
......
third_party/WebKit/Source/core/css/CSSPrimitiveValueMappings.h
View file @ 81ac6e10
......@@ -3466,6 +3466,8 @@ inline ItemPosition CSSIdentifierValue::convertTo() const {
return ItemPositionStretch;
case CSSValueBaseline:
return ItemPositionBaseline;
case CSSValueFirstBaseline:
return ItemPositionBaseline;
case CSSValueLastBaseline:
return ItemPositionLastBaseline;
case CSSValueCenter:
......@@ -3537,6 +3539,8 @@ inline ContentPosition CSSIdentifierValue::convertTo() const {
return ContentPositionNormal;
case CSSValueBaseline:
return ContentPositionBaseline;
case CSSValueFirstBaseline:
return ContentPositionBaseline;
case CSSValueLastBaseline:
return ContentPositionLastBaseline;
case CSSValueCenter:
......
third_party/WebKit/Source/core/css/CSSProperties.json5
View file @ 81ac6e10
......@@ -531,6 +531,7 @@
{
name: "align-content",
api_methods: ["parseSingleValue"],
api_class: "CSSPropertyAPIAlignOrJustifyContent",
converter: "convertContentAlignmentData",
initial: "initialContentAlignment",
......@@ -1141,6 +1142,7 @@
{
name: "justify-content",
api_class: "CSSPropertyAPIAlignOrJustifyContent",
api_methods: ["parseSingleValue"],
converter: "convertContentAlignmentData",
initial: "initialContentAlignment",
},
......
third_party/WebKit/Source/core/css/CSSValueKeywords.json5
View file @ 81ac6e10
......@@ -984,6 +984,7 @@
// stretch
// baseline
"last-baseline",
"first-baseline",
"first",
"last",
// center
......
third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp
View file @ 81ac6e10
......@@ -659,16 +659,32 @@ valueForContentPositionAndDistributionWithOverflowAlignment(
const StyleContentAlignmentData& data,
CSSValueID normalBehaviorValueID) {
CSSValueList* result = CSSValueList::createSpaceSeparated();
// Handle content-distribution values
if (data.distribution() != ContentDistributionDefault)
result->append(*CSSIdentifierValue::create(data.distribution()));
if (data.distribution() == ContentDistributionDefault ||
data.position() != ContentPositionNormal) {
if (!RuntimeEnabledFeatures::cssGridLayoutEnabled() &&
data.position() == ContentPositionNormal)
result->append(*CSSIdentifierValue::create(normalBehaviorValueID));
else
// Handle content-position values (either as fallback or actual value)
switch (data.position()) {
case ContentPositionNormal:
// Handle 'normal' value, not valid as content-distribution fallback.
if (data.distribution() == ContentDistributionDefault) {
result->append(*CSSIdentifierValue::create(
RuntimeEnabledFeatures::cssGridLayoutEnabled()
? CSSValueNormal
: normalBehaviorValueID));
}
break;
case ContentPositionLastBaseline:
result->append(
*CSSValuePair::create(CSSIdentifierValue::create(CSSValueLast),
CSSIdentifierValue::create(CSSValueBaseline),
CSSValuePair::DropIdenticalValues));
break;
default:
result->append(*CSSIdentifierValue::create(data.position()));
}
// Handle overflow-alignment (only allowed for content-position values)
if ((data.position() >= ContentPositionCenter ||
data.distribution() != ContentDistributionDefault) &&
data.overflow() != OverflowAlignmentDefault)
......
third_party/WebKit/Source/core/css/parser/CSSPropertyParser.cpp
View file @ 81ac6e10
......@@ -1034,53 +1034,6 @@ static CSSValue* consumeScrollSnapPoints(CSSParserTokenRange& range,
return nullptr;
}
static CSSValue* consumeContentDistributionOverflowPosition(
CSSParserTokenRange& range) {
if (identMatches<CSSValueNormal, CSSValueBaseline, CSSValueLastBaseline>(
range.peek().id()))
return CSSContentDistributionValue::create(
CSSValueInvalid, range.consumeIncludingWhitespace().id(),
CSSValueInvalid);
CSSValueID distribution = CSSValueInvalid;
CSSValueID position = CSSValueInvalid;
CSSValueID overflow = CSSValueInvalid;
do {
CSSValueID id = range.peek().id();
if (identMatches<CSSValueSpaceBetween, CSSValueSpaceAround,
CSSValueSpaceEvenly, CSSValueStretch>(id)) {
if (distribution != CSSValueInvalid)
return nullptr;
distribution = id;
} else if (identMatches<CSSValueStart, CSSValueEnd, CSSValueCenter,
CSSValueFlexStart, CSSValueFlexEnd, CSSValueLeft,
CSSValueRight>(id)) {
if (position != CSSValueInvalid)
return nullptr;
position = id;
} else if (identMatches<CSSValueUnsafe, CSSValueSafe>(id)) {
if (overflow != CSSValueInvalid)
return nullptr;
overflow = id;
} else {
return nullptr;
}
range.consumeIncludingWhitespace();
} while (!range.atEnd());
// The grammar states that we should have at least <content-distribution> or
// <content-position>.
if (position == CSSValueInvalid && distribution == CSSValueInvalid)
return nullptr;
// The grammar states that <overflow-position> must be associated to
// <content-position>.
if (overflow != CSSValueInvalid && position == CSSValueInvalid)
return nullptr;
return CSSContentDistributionValue::create(distribution, position, overflow);
}
static CSSIdentifierValue* consumeBorderImageRepeatKeyword(
CSSParserTokenRange& range) {
return consumeIdent<CSSValueStretch, CSSValueRepeat, CSSValueSpace,
......@@ -2054,10 +2007,6 @@ const CSSValue* CSSPropertyParser::parseSingleValue(
case CSSPropertyScrollSnapPointsX:
case CSSPropertyScrollSnapPointsY:
return consumeScrollSnapPoints(m_range, m_context->mode());
case CSSPropertyJustifyContent:
case CSSPropertyAlignContent:
ASSERT(RuntimeEnabledFeatures::cssGridLayoutEnabled());
return consumeContentDistributionOverflowPosition(m_range);
case CSSPropertyBorderImageRepeat:
case CSSPropertyWebkitMaskBoxImageRepeat:
return consumeBorderImageRepeat(m_range);
......
third_party/WebKit/Source/core/css/properties/CSSPropertyAPIAlignOrJustifyContent.cpp
View file @ 81ac6e10
......@@ -4,4 +4,17 @@
#include "core/css/properties/CSSPropertyAPIAlignOrJustifyContent.h"
namespace blink {} // namespace blink
#include "core/css/properties/CSSPropertyAlignmentUtils.h"
#include "platform/RuntimeEnabledFeatures.h"
namespace blink {
const CSSValue* CSSPropertyAPIAlignOrJustifyContent::parseSingleValue(
CSSParserTokenRange& range,
const CSSParserContext* context) {
DCHECK(RuntimeEnabledFeatures::cssGridLayoutEnabled());
return CSSPropertyAlignmentUtils::consumeContentDistributionOverflowPosition(
range);
}
} // namespace blink
third_party/WebKit/Source/core/css/properties/CSSPropertyAlignmentUtils.cpp
View file @ 81ac6e10
......@@ -4,6 +4,7 @@
#include "core/css/properties/CSSPropertyAlignmentUtils.h"
#include "core/css/CSSContentDistributionValue.h"
#include "core/css/CSSValuePair.h"
#include "core/css/parser/CSSPropertyParserHelpers.h"
......@@ -21,6 +22,28 @@ CSSIdentifierValue* consumeSelfPositionKeyword(CSSParserTokenRange& range) {
return nullptr;
}
bool isContentDistributionKeyword(CSSValueID id) {
return CSSPropertyParserHelpers::identMatches<
CSSValueSpaceBetween, CSSValueSpaceAround, CSSValueSpaceEvenly,
CSSValueStretch>(id);
}
bool isContentPositionKeyword(CSSValueID id) {
return CSSPropertyParserHelpers::identMatches<
CSSValueStart, CSSValueEnd, CSSValueCenter, CSSValueFlexStart,
CSSValueFlexEnd, CSSValueLeft, CSSValueRight>(id);
}
bool isOverflowKeyword(CSSValueID id) {
return CSSPropertyParserHelpers::identMatches<CSSValueUnsafe, CSSValueSafe>(
id);
}
bool isBaselineKeyword(CSSValueID id) {
return CSSPropertyParserHelpers::identMatches<CSSValueFirst, CSSValueLast,
CSSValueBaseline>(id);
}
CSSValue* consumeBaselineKeyword(CSSParserTokenRange& range) {
CSSValueID id = range.peek().id();
if (CSSPropertyParserHelpers::identMatches<CSSValueBaseline>(id))
......@@ -47,9 +70,7 @@ CSSValue* CSSPropertyAlignmentUtils::consumeSelfPositionOverflowPosition(
range.peek().id()))
return CSSPropertyParserHelpers::consumeIdent(range);
if (CSSPropertyParserHelpers::identMatches<CSSValueFirst, CSSValueLast,
CSSValueBaseline>(
range.peek().id()))
if (isBaselineKeyword(range.peek().id()))
return consumeBaselineKeyword(range);
CSSIdentifierValue* overflowPosition =
......@@ -70,4 +91,66 @@ CSSValue* CSSPropertyAlignmentUtils::consumeSelfPositionOverflowPosition(
return selfPosition;
}
CSSValue* CSSPropertyAlignmentUtils::consumeContentDistributionOverflowPosition(
CSSParserTokenRange& range) {
CSSValueID id = range.peek().id();
if (CSSPropertyParserHelpers::identMatches<CSSValueNormal>(id)) {
return CSSContentDistributionValue::create(
CSSValueInvalid, range.consumeIncludingWhitespace().id(),
CSSValueInvalid);
}
if (isBaselineKeyword(id)) {
CSSValue* baseline = consumeBaselineKeyword(range);
if (!baseline)
return nullptr;
CSSValueID baselineID = CSSValueBaseline;
if (baseline->isValuePair()) {
if (toCSSIdentifierValue(toCSSValuePair(baseline)->first())
.getValueID() == CSSValueLast) {
baselineID = CSSValueLastBaseline;
} else {
baselineID = CSSValueFirstBaseline;
}
}
return CSSContentDistributionValue::create(CSSValueInvalid, baselineID,
CSSValueInvalid);
}
CSSValueID distribution = CSSValueInvalid;
CSSValueID position = CSSValueInvalid;
CSSValueID overflow = CSSValueInvalid;
do {
if (isContentDistributionKeyword(id)) {
if (distribution != CSSValueInvalid)
return nullptr;
distribution = id;
} else if (isContentPositionKeyword(id)) {
if (position != CSSValueInvalid)
return nullptr;
position = id;
} else if (isOverflowKeyword(id)) {
if (overflow != CSSValueInvalid)
return nullptr;
overflow = id;
} else {
return nullptr;
}
range.consumeIncludingWhitespace();
id = range.peek().id();
} while (!range.atEnd());
// The grammar states that we should have at least <content-distribution> or
// <content-position>.
if (position == CSSValueInvalid && distribution == CSSValueInvalid)
return nullptr;
// The grammar states that <overflow-position> must be associated to
// <content-position>.
if (overflow != CSSValueInvalid && position == CSSValueInvalid)
return nullptr;
return CSSContentDistributionValue::create(distribution, position, overflow);
}
} // namespace blink
third_party/WebKit/Source/core/css/properties/CSSPropertyAlignmentUtils.h
View file @ 81ac6e10
......@@ -16,6 +16,8 @@ class CSSPropertyAlignmentUtils {
STATIC_ONLY(CSSPropertyAlignmentUtils);
static CSSValue* consumeSelfPositionOverflowPosition(CSSParserTokenRange&);
static CSSValue* consumeContentDistributionOverflowPosition(
CSSParserTokenRange&);
};
} // namespace blink
......
third_party/WebKit/Source/core/css/resolver/StyleBuilderConverter.cpp
View file @ 81ac6e10
......@@ -563,6 +563,7 @@ StyleContentAlignmentData StyleBuilderConverter::convertContentAlignmentData(
if (contentValue.overflow()->getValueID() != CSSValueInvalid)
alignmentData.setOverflow(
contentValue.overflow()->convertTo<OverflowAlignment>());
return alignmentData;
}
......
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