fune/testing/web-platform/tests/css/css-align/resources/alignment-parsing-utils.js
Eric Willigers 50acf0b4ed Bug 1566860 [wpt PR 17882] - CSS: place* computed value matches specified value, a=testonly
Automatic update from web-platform-tests
CSS: place* computed value matches specified value

If align-content and justify-content have the same value,
such as flex-start, the computed value for parse-content
no longer repeats the value, for consistency with
specified value serialization of parse-content.

https://drafts.csswg.org/css-align-3/#place-content

Similar for place-items and place-self.

WPTs added for place-content, place-items, place-self computed value.

Bug: 983752
Change-Id: I72c66b48af57399669a917df1a2d5294c452fe96
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1698139
Commit-Queue: Emil A Eklund <eae@chromium.org>
Reviewed-by: Emil A Eklund <eae@chromium.org>
Cr-Commit-Position: refs/heads/master@{#678321}

--

wpt-commits: 0ca96cdaf74be010db9036077ba01fad5d8ac945
wpt-pr: 17882
2019-07-24 13:35:09 +01:00

132 lines
6.5 KiB
JavaScript

var selfPositionClasses = {"Start":"start", "End":"end", "SelfStart":"self-start", "SelfEnd":"self-end", "Center":"center", "FlexStart":"flex-start", "FlexEnd":"flex-end"};
var contentPositionClasses = {"Start":"start", "End":"end", "Center":"center", "FlexStart":"flex-start", "FlexEnd":"flex-end"};
var distributionClasses = {"Stretch":"stretch", "SpaceAround":"space-around", "SpaceBetween":"space-between", "SpaceEvenly":"space-evenly"};
var baselineClasses = {"Baseline":"baseline", "FirstBaseline":"first baseline", "LastBaseline":"last baseline"};
var overflowClasses = {"SafeFlexEnd":"safe flex-end", "UnsafeEnd":"unsafe end", "SafeEnd":"safe end", "UnsafeFlexStart":"unsafe flex-start", "SafeCenter":"safe center"};
var legacyClasses = {"LegacyLeft":"legacy left", "LegacyCenter":"legacy center", "LegacyRight":"legacy right"};
var invalidPositionValues = ["auto safe", "auto left", "normal unsafe", "normal stretch", "baseline normal",
"baseline center", "first baseline center", "last baseline center", "baseline last",
"baseline first", "stretch unsafe", "stretch right", "unsafe unsafe", "unsafe safe",
"center start", "unsafe stretch", "safe stretch", "baseline safe", "unsafe baseline",
"unsafe safe left", "unsafe left safe", "left safe unsafe safe", "start safe", "safe"];
var invalidLegacyValues = ["legacy start", "legacy end", "legacy right unsafe", "legacy auto", "legacy stretch",
"legacy left right"];
var invalidDistributionValues = ["space-between left", "space-around center", "space-evenly right",
"stretch safe start", "space-around unsafe", "space-evenly safe flex-start",
"space-between safe", "space-between stretch", "stretch start",
"stretch baseline", "first baseline space-around"];
function checkPlaceShorhand(shorthand, shorthandValue, alignValue, justifyValue)
{
var div = document.createElement("div");
div.style[shorthand] = shorthandValue;
document.body.appendChild(div);
if (alignValue === "first baseline")
alignValue = "baseline";
if (justifyValue === "first baseline")
justifyValue = "baseline";
if (justifyValue === "")
justifyValue = alignValue;
let specifiedValue = (alignValue + " " + justifyValue).trim();
if (alignValue === justifyValue)
specifiedValue = alignValue;
var resolvedValue = getComputedStyle(div).getPropertyValue(shorthand);
var expectedResolvedValue = (alignValue + " " + justifyValue).trim();
if (alignValue === justifyValue)
expectedResolvedValue = alignValue;
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");
}
function checkPlaceShorhandLonghands(shorthand, alignLonghand, justifyLonghand, alignValue, justifyValue = "")
{
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],
alignValue, alignLonghand + " expanded value");
assert_equals(div.style[justifyLonghand],
justifyValue, justifyLonghand + " expanded value");
}
function checkPlaceShorthandInvalidValues(shorthand, alignLonghand, justifyLonghand, value)
{
var div = document.createElement("div");
var css = alignLonghand + ": start; " + justifyLonghand + ": end;" + shorthand + ": " + value;
div.setAttribute("style", css);
document.body.appendChild(div);
assert_equals(div.style[alignLonghand],
"start", alignLonghand + " expanded value");
assert_equals(div.style[justifyLonghand],
"end", justifyLonghand + " expanded value");
}
function checkValues(element, property, propertyID, value, computedValue)
{
window.element = element;
var elementID = element.id || "element";
assert_equals(eval('element.style.' + property), value, propertyID + ' specified value is not what it should.');
assert_equals(eval("window.getComputedStyle(" + elementID + ", '').getPropertyValue('" + propertyID + "')"), computedValue, propertyID + " computed style is not what is should.");
}
function checkBadValues(element, property, propertyID, value)
{
var elementID = element.id || "element";
element.style[property] = "";
var initialValue = eval("window.getComputedStyle(" + elementID + " , '').getPropertyValue('" + propertyID + "')");
element.style[property] = value;
checkValues(element, property, propertyID, "", initialValue);
}
function checkInitialValues(element, property, propertyID, value, initial)
{
element.style[property] = value;
checkValues(element, property, propertyID, value, value);
element.style[property] = "initial";
checkValues(element, property, propertyID, "initial", initial);
}
function checkInheritValues(property, propertyID, value)
{
var parentElement = document.createElement("div");
document.body.appendChild(parentElement);
parentElement.style[property] = value;
checkValues(parentElement, property, propertyID, value, value);
var element = document.createElement("div");
parentElement.appendChild(element);
element.style[property] = "inherit";
checkValues(element, property, propertyID, "inherit", value);
}
function checkLegacyValues(property, propertyID, value)
{
var parentElement = document.createElement("div");
document.body.appendChild(parentElement);
parentElement.style[property] = value;
checkValues(parentElement, property, propertyID, value, value);
var element = document.createElement("div");
parentElement.appendChild(element);
checkValues(element, property, propertyID, "", value);
}
function checkSupportedValues(elementID, property)
{
var value = eval("window.getComputedStyle(" + elementID + " , '').getPropertyValue('" + property + "')");
var value1 = eval("window.getComputedStyle(" + elementID + " , '')");
shouldBeTrue("CSS.supports('" + property + "', '" + value + "')");
}