Skip to content

GitLab

T
tangled
Commit 948b8dee authored by Javier Fernandez's avatar Javier Fernandez Committed by Commit Bot
Browse files
Options

[css-align] justify-content doesn't allow <baseline-position> values 

The CSS WG has resolved that it doesn't make sense to define Baseline
Content-Alignment in the inline/main axis.

https://github.com/w3c/csswg-drafts/issues/1184

The spec has been updated so that <baseline-postion> is not valid for
the 'justify-content' property's syntax. This CL updates our parsing
logic to match the new spec, including the parsing logic of the
place-content shorthand.

Additionally, this CL updates the computed value of the
<baseline-position> values to match other browsers.

We don't implement support for <baseline-position> values in the
Content Distribution properties (align-content and justify-content),
so I don't expect this change to break content of sites using the CSS
Box Alignment feature.

Bug: 802248, 803275
Change-Id: I0d3b1b7e7dd28552ee7e131bfe09ef7198565283
Reviewed-on: https://chromium-review.googlesource.com/882362Reviewed-by: default avatarDarren Shen <shend@chromium.org>
Commit-Queue: Javier Fernandez <jfernandez@igalia.com>
Cr-Commit-Position: refs/heads/master@{#532400}
parent 6e19c261
Hide whitespace changes
Inline Side-by-side
Showing with 175 additions and 156 deletions
third_party/WebKit/LayoutTests/TestExpectations
View file @ 948b8dee
......@@ -2358,18 +2358,6 @@ crbug.com/707359 [ Mac ] fast/css-grid-layout/grid-self-baseline-vertical-rl-05.
# [css-align]
crbug.com/726148 external/wpt/css/css-align/default-alignment/parse-justify-items-002.html [ Failure ]
crbug.com/726147 external/wpt/css/css-align/default-alignment/parse-justify-items-004.html [ Failure ]
crbug.com/803275 external/wpt/css/css-align/default-alignment/parse-justify-items-001.html [ Failure ]
crbug.com/803275 external/wpt/css/css-align/default-alignment/parse-justify-items-003.html [ Failure ]
crbug.com/803275 external/wpt/css/css-align/default-alignment/parse-align-items-001.html [ Failure ]
crbug.com/803275 external/wpt/css/css-align/default-alignment/parse-align-items-003.html [ Failure ]
crbug.com/803275 external/wpt/css/css-align/self-alignment/parse-justify-self-001.html [ Failure ]
crbug.com/803275 external/wpt/css/css-align/self-alignment/parse-justify-self-003.html [ Failure ]
crbug.com/803275 external/wpt/css/css-align/self-alignment/parse-align-self-001.html [ Failure ]
crbug.com/803275 external/wpt/css/css-align/self-alignment/parse-align-self-003.html [ Failure ]
crbug.com/803275 external/wpt/css/css-align/content-distribution/parse-justify-content-001.html [ Failure ]
crbug.com/803275 external/wpt/css/css-align/content-distribution/parse-justify-content-003.html [ Failure ]
crbug.com/803275 external/wpt/css/css-align/content-distribution/parse-align-content-001.html [ Failure ]
crbug.com/803275 external/wpt/css/css-align/content-distribution/parse-align-content-003.html [ Failure ]
# [selectors-4]
crbug.com/706118 external/wpt/css/selectors/focus-within-004.html [ Failure ]
......
third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-align-content-001.html
View file @ 948b8dee
......@@ -24,10 +24,10 @@
element.className = "alignContent" + key;
document.body.appendChild(element);
test(function() {
let computedValue = specifiedValue;
if (specifiedValue === "baseline")
computedValue = "first baseline";
checkValues(element, "alignContent", "align-content", "", computedValue);
if (specifiedValue === "first baseline")
checkValues(element, "alignContent", "align-content", "", "baseline");
else
checkValues(element, "alignContent", "align-content", "", specifiedValue);
}, "Checking align-content: " + specifiedValue);
}
</script>
third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-align-content-003.html
View file @ 948b8dee
......@@ -23,11 +23,12 @@
for (var key in classes) {
let specifiedValue = classes[key];
test(function() {
element.style.alignContent = "";
element.style.alignContent = specifiedValue;
let computedValue = specifiedValue;
if (specifiedValue === "baseline")
computedValue = "first baseline";
checkValues(element, "alignContent", "align-content", specifiedValue, computedValue);
if (specifiedValue === "first baseline")
checkValues(element, "alignContent", "align-content", "baseline", "baseline");
else
checkValues(element, "alignContent", "align-content", specifiedValue, specifiedValue);
}, "Checking align-content: " + specifiedValue);
}
</script>
third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-justify-content-001.html
View file @ 948b8dee
......@@ -16,7 +16,7 @@
<div id="log"></div>
<script>
let classes = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses,
distributionClasses, baselineClasses, overflowClasses);
distributionClasses, overflowClasses);
for (var key in classes) {
let specifiedValue = classes[key];
......@@ -24,10 +24,7 @@
element.className = "justifyContent" + key;
document.body.appendChild(element);
test(function() {
let computedValue = specifiedValue;
if (specifiedValue === "baseline")
computedValue = "first baseline";
checkValues(element, "justifyContent", "justify-content", "", computedValue);
checkValues(element, "justifyContent", "justify-content", "", specifiedValue);
}, "Checking justify-content: " + specifiedValue);
}
</script>
third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-justify-content-003.html
View file @ 948b8dee
......@@ -18,16 +18,14 @@
document.body.appendChild(element);
let classes = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses,
distributionClasses, baselineClasses, overflowClasses);
distributionClasses, overflowClasses);
for (var key in classes) {
let specifiedValue = classes[key];
test(function() {
element.style.justifyContent = "";
element.style.justifyContent = specifiedValue;
let computedValue = specifiedValue;
if (specifiedValue === "baseline")
computedValue = "first baseline";
checkValues(element, "justifyContent", "justify-content", specifiedValue, computedValue);
checkValues(element, "justifyContent", "justify-content", specifiedValue, specifiedValue);
}, "Checking justify-content: " + specifiedValue);
}
</script>
third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-justify-content-004.html
View file @ 948b8dee
......@@ -13,7 +13,7 @@
element = document.createElement("div");
document.body.appendChild(element);
let values = ["auto", "legacy", "self-start"].concat(invalidPositionValues, invalidDistributionValues);
let values = ["auto", "legacy", "self-start", "baseline", "first baseline", "last baseline"].concat(invalidPositionValues, invalidDistributionValues);
values.forEach(function(value) {
test(function() {
......
third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/place-content-shorthand-001.html
View file @ 948b8dee
......@@ -5,10 +5,10 @@
<meta name="assert" content="Check that setting a single value to place-content expands to such value set in both 'align-content' and 'justify-content'." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/alignment-parsing-utils.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<script>
let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses, baselineClasses);
let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses);
for (var key in classes) {
let value = classes[key];
test(function() {
......
third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/place-content-shorthand-002.html
View file @ 948b8dee
......@@ -5,13 +5,13 @@
<meta name="assert" content="Check that setting two values to place-content sets the first one to 'align-content' and the second one to 'justify-content'." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/alignment-parsing-utils.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<script>
let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses, baselineClasses);
for (var key1 in classes) {
let alignValue = classes[key1];
let classes2 = Object.assign({"Left":"left", "Right":"right"}, classes);
let classes2 = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses, distributionClasses);
for (var key2 in classes2) {
let justifyValue = classes2[key2];
test(function() {
......
third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/place-content-shorthand-004.html
View file @ 948b8dee
......@@ -5,7 +5,7 @@
<meta name="assert" content="Check that place-content's invalid values are properly detected at parsing time." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/alignment-parsing-utils.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<script>
function checkInvalidValues(value)
......@@ -28,6 +28,13 @@
checkInvalidValues("right center")
}, "Verify 'left' and 'right' values are invalid for block/cross axis alignment");
test(function() {
checkInvalidValues("baseline")
checkInvalidValues("first baseline")
checkInvalidValues("start baseline")
checkInvalidValues("end last baseline")
}, "Verify <baseline-position> values are invalid for the justify-content property");
test(function() {
checkInvalidValues("10px end")
checkInvalidValues("start 10%")
......
third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/place-content-shorthand-006.html
View file @ 948b8dee
......@@ -5,19 +5,19 @@
<meta name="assert" content="Check the place-content's 'specified' and 'resolved' values serialization." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/alignment-parsing-utils.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<div id="test"></div>
<script>
let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses, baselineClasses);
for (var key1 in classes) {
let alignValue = classes[key1];
let classes2 = Object.assign({"Left":"left", "Right":"right"}, classes);
let classes2 = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses, distributionClasses);
for (var key2 in classes2) {
let justifyValue = classes2[key2];
var value = (alignValue + " " + justifyValue).trim();
test(function() {
checkPlaceShorhand("place-content", alignValue, justifyValue)
checkPlaceShorhand("place-content", value, alignValue, justifyValue)
}, "Checking place-content: " + value);
}
}
......
third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/parse-align-items-001.html
View file @ 948b8dee
......@@ -23,10 +23,10 @@
element.className = "alignItems" + key;
document.body.appendChild(element);
test(function() {
let computedValue = specifiedValue;
if (specifiedValue === "baseline")
computedValue = "first baseline";
checkValues(element, "alignItems", "align-items", "", computedValue);
if (specifiedValue === "first baseline")
checkValues(element, "alignItems", "align-items", "", "baseline");
else
checkValues(element, "alignItems", "align-items", "", specifiedValue);
}, "Checking align-items: " + specifiedValue);
}
</script>
third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/parse-align-items-003.html
View file @ 948b8dee
......@@ -22,11 +22,12 @@
for (var key in classes) {
let specifiedValue = classes[key];
test(function() {
element.style.alignItems = "";
element.style.alignItems = specifiedValue;
let computedValue = specifiedValue;
if (specifiedValue === "baseline")
computedValue = "first baseline";
checkValues(element, "alignItems", "align-items", specifiedValue, computedValue);
if (specifiedValue === "first baseline")
checkValues(element, "alignItems", "align-items", "baseline", "baseline");
else
checkValues(element, "alignItems", "align-items", specifiedValue, specifiedValue);
}, "Checking align-items: " + specifiedValue);
}
</script>
third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/parse-justify-items-001.html
View file @ 948b8dee
......@@ -23,10 +23,10 @@
element.className = "justifyItems" + key;
document.body.appendChild(element);
test(function() {
let computedValue = specifiedValue;
if (specifiedValue === "baseline")
computedValue = "first baseline";
checkValues(element, "justifyItems", "justify-items", "", computedValue);
if (specifiedValue === "first baseline")
checkValues(element, "justifyItems", "justify-items", "", "baseline");
else
checkValues(element, "justifyItems", "justify-items", "", specifiedValue);
}, "Checking justify-items: " + specifiedValue);
}
</script>
third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/parse-justify-items-003.html
View file @ 948b8dee
......@@ -22,11 +22,12 @@
for (var key in classes) {
let specifiedValue = classes[key];
test(function() {
element.style.justifyItems = "";
element.style.justifyItems = specifiedValue;
let computedValue = specifiedValue;
if (specifiedValue === "baseline")
computedValue = "first baseline";
checkValues(element, "justifyItems", "justify-items", specifiedValue, computedValue);
if (specifiedValue === "first baseline")
checkValues(element, "justifyItems", "justify-items", "baseline", "baseline");
else
checkValues(element, "justifyItems", "justify-items", specifiedValue, specifiedValue);
}, "Checking justify-items: " + specifiedValue);
}
</script>
third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/place-items-shorthand-001.html
View file @ 948b8dee
......@@ -5,7 +5,7 @@
<meta name="assert" content="Check that setting a single value to place-items expands to such value set in both 'align-items' and 'justify-items'." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/alignment-parsing-utils.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<script>
let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, baselineClasses);
......
third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/place-items-shorthand-002.html
View file @ 948b8dee
......@@ -5,7 +5,7 @@
<meta name="assert" content="Check that setting two values to place-items sets the first one to 'align-items' and the second one to 'justify-items'." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/alignment-parsing-utils.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<script>
let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, baselineClasses);
......
third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/place-items-shorthand-004.html
View file @ 948b8dee
......@@ -5,7 +5,7 @@
<meta name="assert" content="Check that place-items's invalid values are properly detected at parsing time." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/alignment-parsing-utils.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<script>
function checkInvalidValues(value)
......
third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/place-items-shorthand-006.html
View file @ 948b8dee
......@@ -5,7 +5,7 @@
<meta name="assert" content="Check the place-items's 'specified' and 'resolved' values serialization." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/alignment-parsing-utils.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<script>
let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, baselineClasses);
......@@ -16,7 +16,7 @@
let justifyValue = classes2[key2];
var value = (alignValue + " " + justifyValue).trim();
test(function() {
checkPlaceShorhand("place-items", alignValue, justifyValue)
checkPlaceShorhand("place-items", value, alignValue, justifyValue)
}, "Checking place-items: " + value);
}
}
......
third_party/WebKit/LayoutTests/external/wpt/css/css-align/resources/alignment-parsing-utils.js
View file @ 948b8dee
......@@ -17,26 +17,27 @@ var invalidDistributionValues = ["space-between left", "space-around center", "s
"space-between safe", "space-between stretch", "stretch start",
"stretch baseline", "first baseline space-around"];
function checkPlaceShorhand(shorthand, alignValue, justifyValue)
function checkPlaceShorhand(shorthand, shorthandValue, alignValue, justifyValue)
{
var div = document.createElement("div");
var specifiedValue = (alignValue + " " + justifyValue).trim();
div.style[shorthand] = specifiedValue;
div.style[shorthand] = shorthandValue;
document.body.appendChild(div);
if (alignValue === justifyValue)
specifiedValue = alignValue;
var resolvedValue = getComputedStyle(div).getPropertyValue(shorthand);
if (alignValue === "first baseline")
alignValue = "baseline";
if (justifyValue === "first baseline")
justifyValue = "baseline";
if (justifyValue === "")
justifyValue = alignValue;
var expectedResolvedValue = (alignValue + " " + justifyValue).trim()
assert_equals(div.style[shorthand], specifiedValue, shorthand + " specified value");
let specifiedValue = (alignValue + " " + justifyValue).trim();
if (alignValue === justifyValue)
specifiedValue = alignValue;
var resolvedValue = getComputedStyle(div).getPropertyValue(shorthand);
var expectedResolvedValue = (alignValue + " " + justifyValue).trim();
assert_equals(div.style[shorthand], specifiedValue, shorthandValue + " specified value");
// FIXME: We need https://github.com/w3c/csswg-drafts/issues/1041 to clarify which
// value is expected for the shorthand's 'resolved value".
assert_in_array(resolvedValue, ["", expectedResolvedValue], shorthand + " resolved value");
......@@ -47,6 +48,10 @@ function checkPlaceShorhandLonghands(shorthand, alignLonghand, justifyLonghand,
var div = document.createElement("div");
div.setAttribute("style", shorthand + ": " + alignValue + " " + justifyValue);
document.body.appendChild(div);
if (alignValue === "first baseline")
alignValue = "baseline";
if (justifyValue === "first baseline")
justifyValue = "baseline";
if (justifyValue === "")
justifyValue = alignValue;
assert_equals(div.style[alignLonghand],
......
third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/parse-align-self-001.html
View file @ 948b8dee
......@@ -23,10 +23,10 @@
element.className = "alignSelf" + key;
document.body.appendChild(element);
test(function() {
let computedValue = specifiedValue;
if (specifiedValue === "baseline")
computedValue = "first baseline";
checkValues(element, "alignSelf", "align-self", "", computedValue);
if (specifiedValue === "first baseline")
checkValues(element, "alignSelf", "align-self", "", "baseline");
else
checkValues(element, "alignSelf", "align-self", "", specifiedValue);
}, "Checking align-self: " + specifiedValue);
}
</script>
third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/parse-align-self-003.html
View file @ 948b8dee
......@@ -22,11 +22,12 @@
for (var key in classes) {
let specifiedValue = classes[key];
test(function() {
element.style.alignSelf = "";
element.style.alignSelf = specifiedValue;
let computedValue = specifiedValue;
if (specifiedValue === "baseline")
computedValue = "first baseline";
checkValues(element, "alignSelf", "align-self", specifiedValue, computedValue);
if (specifiedValue === "first baseline")
checkValues(element, "alignSelf", "align-self", "baseline", "baseline");
else
checkValues(element, "alignSelf", "align-self", specifiedValue, specifiedValue);
}, "Checking align-self: " + specifiedValue);
}
</script>
third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/parse-justify-self-001.html
View file @ 948b8dee
......@@ -23,10 +23,11 @@
element.className = "justifySelf" + key;
document.body.appendChild(element);
test(function() {
let computedValue = specifiedValue;
if (specifiedValue === "baseline")
computedValue = "first baseline";
checkValues(element, "justifySelf", "justify-self", "", computedValue);
let value = specifiedValue;
if (specifiedValue === "first baseline")
checkValues(element, "justifySelf", "justify-self", "", "baseline");
else
checkValues(element, "justifySelf", "justify-self", "", value);
}, "Checking justify-self: " + specifiedValue);
}
</script>
third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/parse-justify-self-003.html
View file @ 948b8dee
......@@ -22,11 +22,12 @@
for (var key in classes) {
let specifiedValue = classes[key];
test(function() {
element.style.justifySelf = "";
element.style.justifySelf = specifiedValue;
let computedValue = specifiedValue;
if (specifiedValue === "baseline")
computedValue = "first baseline";
checkValues(element, "justifySelf", "justify-self", specifiedValue, computedValue);
if (specifiedValue === "first baseline")
checkValues(element, "justifySelf", "justify-self", "baseline", "baseline");
else
checkValues(element, "justifySelf", "justify-self", specifiedValue, specifiedValue);
}, "Checking justify-self: " + specifiedValue);
}
</script>
third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/place-self-shorthand-001.html
View file @ 948b8dee
......@@ -5,7 +5,7 @@
<meta name="assert" content="Check that setting a single value to place-self expands to such value set in both 'align-self' and 'justify-self'." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/alignment-parsing-utils.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<script>
let classes = Object.assign({"Auto":"auto", "Normal":"normal", "Stretch":"stretch"}, selfPositionClasses,
......
third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/place-self-shorthand-002.html
View file @ 948b8dee
......@@ -5,7 +5,7 @@
<meta name="assert" content="Check that setting two values to place-self sets the first one to 'align-self' and the second one to 'justify-self'." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/alignment-parsing-utils.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<script>
let classes = Object.assign({"Auto":"auto", "Normal":"normal", "Stretch":"stretch"}, selfPositionClasses,
......
third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/place-self-shorthand-004.html
View file @ 948b8dee
......@@ -5,7 +5,7 @@
<meta name="assert" content="Check that place-self's invalid values are properly detected at parsing time." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/alignment-parsing-utils.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<script>
function checkInvalidValues(value)
......
third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/place-self-shorthand-006.html
View file @ 948b8dee
......@@ -5,7 +5,7 @@
<meta name="assert" content="Check the place-self's 'specified' and 'resolved' values serialization." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/alignment-parsing-utils.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<script>
let classes = Object.assign({"Auto":"auto", "Normal":"normal", "Stretch":"stretch"}, selfPositionClasses,
......@@ -17,7 +17,7 @@
let justifyValue = classes2[key2];
var value = (alignValue + " " + justifyValue).trim();
test(function() {
checkPlaceShorhand("place-self", alignValue, justifyValue)
checkPlaceShorhand("place-self", value, alignValue, justifyValue)
}, "Checking place-self: " + value);
}
}
......
third_party/WebKit/LayoutTests/fast/alignment/parse-align-content.html
View file @ 948b8dee
......@@ -246,11 +246,11 @@ test(function() {
element.style.alignContent = "unsafe end";
checkValues(element, "alignContent", "align-content", "unsafe end", "unsafe end");
element.style.justifyContent = "first baseline";
checkValues(element, "justifyContent", "justify-content", "first baseline", "baseline");
element.style.alignContent = "first baseline";
checkValues(element, "alignContent", "align-content", "baseline", "baseline");
element.style.justifyContent = "last baseline";
checkValues(element, "justifyContent", "justify-content", "last baseline", "last baseline");
element.style.alignContent = "last baseline";
checkValues(element, "alignContent", "align-content", "last baseline", "last baseline");
element.style.alignContent = "normal";
checkValues(element, "alignContent", "align-content", "normal", "normal");
......
third_party/WebKit/LayoutTests/fast/alignment/parse-justify-content.html
View file @ 948b8dee
......@@ -4,18 +4,6 @@
justify-content: auto;
}
#justifyContentBaseline {
justify-content: baseline;
}
#justifyContentFirstBaseline {
justify-content: first baseline;
}
#justifyContentLastBaseline {
justify-content: last baseline;
}
#justifyContentSpaceBetween {
justify-content: space-between;
}
......@@ -85,6 +73,18 @@
}
<!-- Invalid CSS cases -->
#justifyContentBaseline {
justify-content: baseline;
}
#justifyContentFirstBaseline {
justify-content: first baseline;
}
#justifyContentLastBaseline {
justify-content: last baseline;
}
#justifyContentSpaceBetweenLeft {
justify-content: space-between left;
}
......@@ -131,9 +131,6 @@
</style>
<p>Test that setting and getting justify-content works as expected</p>
<div id="justifyContentAuto"></div>
<div id="justifyContentBaseline"></div>
<div id="justifyContentFirstBaseline"></div>
<div id="justifyContentLastBaseline"></div>
<div id="justifyContentSpaceBetween"></div>
<div id="justifyContentSpaceAround"></div>
<div id="justifyContentSpaceEvenly"></div>
......@@ -160,6 +157,9 @@
<div id="justifyContentFlexStartUnsafe"></div>
<div id="justifyContentFlexEndSafe"></div>
<div id="justifyContentBaseline"></div>
<div id="justifyContentFirstBaseline"></div>
<div id="justifyContentLastBaseline"></div>
<div id="justifyContentSpaceBetweenLeft"></div>
<div id="justifyContentSpaceAroundCenter"></div>
<div id="justifyContentSpaceEvenlyRight"></div>
......@@ -179,12 +179,6 @@
test(function() {
var justifyContentAuto = document.getElementById("justifyContentAuto");
checkValues(justifyContentAuto, "justifyContent", "justify-content", "", "normal");
var justifyContentBaseline = document.getElementById("justifyContentBaseline");
checkValues(justifyContentBaseline, "justifyContent", "justify-content", "", "baseline");
var justifyContentLastBaseline = document.getElementById("justifyContentFirstBaseline");
checkValues(justifyContentLastBaseline, "justifyContent", "justify-content", "", "baseline");
var justifyContentLastBaseline = document.getElementById("justifyContentLastBaseline");
checkValues(justifyContentLastBaseline, "justifyContent", "justify-content", "", "last baseline");
var justifyContentSpaceBetween = document.getElementById("justifyContentSpaceBetween");
checkValues(justifyContentSpaceBetween, "justifyContent", "justify-content", "", "space-between");
var justifyContentSpaceAround = document.getElementById("justifyContentSpaceAround");
......@@ -222,6 +216,12 @@ test(function() {
}, "Test getting justify-content values previously set through CSS.");
test(function() {
var justifyContentBaseline = document.getElementById("justifyContentBaseline");
checkValues(justifyContentBaseline, "justifyContent", "justify-content", "", "normal");
var justifyContentLastBaseline = document.getElementById("justifyContentFirstBaseline");
checkValues(justifyContentLastBaseline, "justifyContent", "justify-content", "", "normal");
var justifyContentLastBaseline = document.getElementById("justifyContentLastBaseline");
checkValues(justifyContentLastBaseline, "justifyContent", "justify-content", "", "normal");
var justifyContentEndUnsafe = document.getElementById("justifyContentEndUnsafe");
checkValues(justifyContentEndUnsafe, "justifyContent", "justify-content", "", "normal");
var justifyContentCenterUnsafe = document.getElementById("justifyContentCenterUnsafe");
......@@ -279,12 +279,6 @@ test(function() {
element.style.justifyContent = " unsafe right";
checkValues(element, "justifyContent", "justify-content", "unsafe right", "unsafe right");
element.style.justifyContent = "first baseline";
checkValues(element, "justifyContent", "justify-content", "first baseline", "baseline");
element.style.justifyContent = "last baseline";
checkValues(element, "justifyContent", "justify-content", "last baseline", "last baseline");
element.style.justifyContent = "normal";
checkValues(element, "justifyContent", "justify-content", "normal", "normal");
......@@ -333,6 +327,9 @@ test(function() {
checkBadValues(element, "justifyContent", "justify-content", "safe");
checkBadValues(element, "justifyContent", "justify-content", "start safe");
checkBadValues(element, "justifyContent", "justify-content", "end unsafe");
checkBadValues(element, "justifyContent", "justify-content", "baseline");
checkBadValues(element, "justifyContent", "justify-content", "first baseline");
checkBadValues(element, "justifyContent", "justify-content", "last baseline");
}, "Test bad combinations of justify-content");
test(function() {
......
third_party/WebKit/LayoutTests/fast/alignment/parse-place-content.html
View file @ 948b8dee
......@@ -5,9 +5,6 @@
#placeContentNormal {
place-content: normal;
}
#placeContentBaseline {
place-content: baseline;
}
#placeContentStart {
place-content: start;
}
......@@ -29,8 +26,8 @@
#placeContentStartSpaceEvenly {
place-content: start space-evenly;
}
#placeContentStartBaseline {
place-content: start baseline;
#placeContentBaselineStart {
place-content: baseline start;
}
<!-- Invalid CSS cases -->
......@@ -55,6 +52,12 @@
#placeContentStartEndLeft {
place-content: start end left;
}
#placeContentBaseline {
place-content: baseline;
}
#placeContentStartBaseline {
place-content: start baseline;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
......@@ -65,7 +68,6 @@
<div id="log"></div>
<div id="placeContentNormal"></div>
<div id="placeContentBaseline"></div>
<div id="placeContentStart"></div>
<div id="placeContentFlexStart"></div>
<div id="placeContentEnd"></div>
......@@ -73,7 +75,7 @@
<div id="placeContentStretch"></div>
<div id="placeContentStartEnd"></div>
<div id="placeContentStartSpaceEvenly"></div>
<div id="placeContentStartBaseline"></div>
<div id="placeContentBaselineStart"></div>
<div id="placeContentEmpty"></div>
<div id="placeContentAuto"></div>
......@@ -82,6 +84,8 @@
<div id="placeContentStartSafe"></div>
<div id="placeContentBaselineSafe"></div>
<div id="placeContentStartEndLeft"></div>
<div id="placeContentBaseline"></div>
<div id="placeContentStartBaseline"></div>
<script>
function checkPlaceContentValues(element, value, alignValue, justifyValue)
{
......@@ -136,11 +140,6 @@ test(function() {
checkPlaceContentValues(placeContentNormal, "", "normal", "normal");
}, "Test getting the Computed Value of place-content's longhand properties when setting 'normal' value through CSS.");
test(function() {
checkValues(placeContentBaseline, "placeContent", "place-content", "", "baseline baseline");
checkPlaceContentValues(placeContentBaseline, "", "baseline", "baseline");
}, "Test getting the Computed Value of place-content's longhand properties when setting 'baseline' value through CSS.");
test(function() {
checkValues(placeContentStart, "placeContent", "place-content", "", "start start");
checkPlaceContentValues(placeContentStart, "", "start", "start");
......@@ -177,9 +176,9 @@ test(function() {
}, "Test getting the Computed Value of place-content's longhand properties when setting 'start space-evenly' value through CSS.");
test(function() {
checkValues(placeContentStartBaseline, "placeContent", "place-content", "", "start baseline");
checkPlaceContentValues(placeContentStartBaseline, "", "start", "baseline");
}, "Test getting the Computed Value of place-content's longhand properties when setting 'start baseline' value through CSS.");
checkValues(placeContentBaselineStart, "placeContent", "place-content", "", "baseline start");
checkPlaceContentValues(placeContentBaselineStart, "", "baseline", "start");
}, "Test getting the Computed Value of place-content's longhand properties when setting 'baseline start' value through CSS.");
test(function() {
checkValues(placeContentAuto, "placeContent", "place-content", "", "normal normal");
......@@ -206,11 +205,21 @@ test(function() {
checkPlaceContentValues(placeContentStartSafe, "", "normal", "normal");
}, "Test setting 'start safe' as incorrect value through CSS.");
test(function() {
checkValues(placeContentBaseline, "placeContent", "place-content", "", "normal normal");
checkPlaceContentValues(placeContentBaseline, "", "normal", "normal");
}, "Test setting 'baseline' as incorrect value through CSS.");
test(function() {
checkValues(placeContentBaselineSafe, "placeContent", "place-content", "", "normal normal");
checkPlaceContentValues(placeContentBaselineSafe, "", "normal", "normal");
}, "Test setting 'baseline safe' as incorrect value through CSS.");
test(function() {
checkValues(placeContentStartBaseline, "placeContent", "place-content", "", "normal normal");
checkPlaceContentValues(placeContentStartBaseline, "", "normal", "normal");
}, "Test setting 'start baseline' as incorrect value through CSS.");
test(function() {
checkValues(placeContentStartEndLeft, "placeContent", "place-content", "", "normal normal");
checkPlaceContentValues(placeContentStartEndLeft, "", "normal", "normal");
......
third_party/WebKit/Source/core/css/properties/CSSParsingUtils.cpp
View file @ 948b8dee
......@@ -87,32 +87,26 @@ CSSValueID GetBaselineKeyword(CSSValue& value) {
return CSSValueBaseline;
}
DCHECK(ToCSSIdentifierValue(ToCSSValuePair(value).First()).GetValueID() ==
CSSValueLast);
DCHECK(ToCSSIdentifierValue(ToCSSValuePair(value).Second()).GetValueID() ==
CSSValueBaseline);
if (ToCSSIdentifierValue(ToCSSValuePair(value).First()).GetValueID() ==
CSSValueLast) {
return CSSValueLastBaseline;
}
DCHECK(ToCSSIdentifierValue(ToCSSValuePair(value).First()).GetValueID() ==
CSSValueFirst);
return CSSValueFirstBaseline;
return CSSValueLastBaseline;
}
CSSValue* ConsumeBaselineKeyword(CSSParserTokenRange& range) {
CSSValueID id = range.Peek().Id();
if (CSSPropertyParserHelpers::IdentMatches<CSSValueBaseline>(id))
return CSSPropertyParserHelpers::ConsumeIdent(range);
if (CSSIdentifierValue* preference =
CSSPropertyParserHelpers::ConsumeIdent<CSSValueFirst, CSSValueLast>(
range)) {
if (range.Peek().Id() == CSSValueBaseline) {
return CSSValuePair::Create(preference,
CSSPropertyParserHelpers::ConsumeIdent(range),
CSSValuePair::kDropIdenticalValues);
}
CSSIdentifierValue* preference =
CSSPropertyParserHelpers::ConsumeIdent<CSSValueFirst, CSSValueLast>(
range);
CSSIdentifierValue* baseline =
CSSPropertyParserHelpers::ConsumeIdent<CSSValueBaseline>(range);
if (!baseline)
return nullptr;
if (preference && preference->GetValueID() == CSSValueLast) {
return CSSValuePair::Create(preference, baseline,
CSSValuePair::kDropIdenticalValues);
}
return nullptr;
return baseline;
}
CSSValue* ConsumeSteps(CSSParserTokenRange& range) {
......@@ -549,6 +543,7 @@ bool IsContentPositionOrLeftOrRightKeyword(CSSValueID id) {
CSSValue* ConsumeSelfPositionOverflowPosition(
CSSParserTokenRange& range,
IsPositionKeyword is_position_keyword) {
DCHECK(is_position_keyword);
CSSValueID id = range.Peek().Id();
if (IsAutoOrNormalOrStretch(id))
return CSSPropertyParserHelpers::ConsumeIdent(range);
......@@ -570,6 +565,7 @@ CSSValue* ConsumeSelfPositionOverflowPosition(
CSSValue* ConsumeSimplifiedItemPosition(CSSParserTokenRange& range,
IsPositionKeyword is_position_keyword) {
DCHECK(is_position_keyword);
CSSValueID id = range.Peek().Id();
if (IsAutoOrNormalOrStretch(id) || is_position_keyword(id))
return CSSPropertyParserHelpers::ConsumeIdent(range);
......@@ -583,6 +579,7 @@ CSSValue* ConsumeSimplifiedItemPosition(CSSParserTokenRange& range,
CSSValue* ConsumeContentDistributionOverflowPosition(
CSSParserTokenRange& range,
IsPositionKeyword is_position_keyword) {
DCHECK(is_position_keyword);
CSSValueID id = range.Peek().Id();
if (CSSPropertyParserHelpers::IdentMatches<CSSValueNormal>(id)) {
return CSSContentDistributionValue::Create(
......@@ -618,6 +615,7 @@ CSSValue* ConsumeContentDistributionOverflowPosition(
CSSValue* ConsumeSimplifiedContentPosition(
CSSParserTokenRange& range,
IsPositionKeyword is_position_keyword) {
DCHECK(is_position_keyword);
CSSValueID id = range.Peek().Id();
if (CSSPropertyParserHelpers::IdentMatches<CSSValueNormal>(id) ||
is_position_keyword(id)) {
......@@ -2377,10 +2375,19 @@ bool ConsumePlaceAlignment(CSSParserTokenRange& range,
DCHECK(!align_value);
DCHECK(!justify_value);
bool is_baseline = IsBaselineKeyword(range.Peek().Id());
align_value = consume_alignment_value(range, IsSelfPositionKeyword);
if (!align_value)
return false;
// justify-content property does not allow the <baseline-position> values.
if (consume_alignment_value == ConsumeSimplifiedContentPosition) {
if (range.AtEnd() && is_baseline)
return false;
if (IsBaselineKeyword(range.Peek().Id()))
return false;
}
justify_value =
range.AtEnd()
? align_value
......
third_party/WebKit/Source/core/css/properties/longhands/JustifyContentCustom.cpp
View file @ 948b8dee
......@@ -15,6 +15,11 @@ const CSSValue* JustifyContent::ParseSingleValue(
CSSParserTokenRange& range,
const CSSParserContext& context,
const CSSParserLocalContext&) const {
// justify-content property does not allow the <baseline-position> values.
if (CSSPropertyParserHelpers::IdentMatches<CSSValueFirst, CSSValueLast,
CSSValueBaseline>(
range.Peek().Id()))
return nullptr;
return CSSParsingUtils::ConsumeContentDistributionOverflowPosition(
range, CSSParsingUtils::IsContentPositionOrLeftOrRightKeyword);
}
......
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