Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(22)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/fast/alignment/parse-place-items.html

Issue 2737843003: [css-align] Implement place-items alignment shorthand (Closed)
Patch Set: Created 3 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | third_party/WebKit/Source/core/css/CSSProperties.json5 » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/fast/alignment/parse-place-items.html
diff --git a/third_party/WebKit/LayoutTests/fast/alignment/parse-place-items.html b/third_party/WebKit/LayoutTests/fast/alignment/parse-place-items.html
new file mode 100644
index 0000000000000000000000000000000000000000..5f38d89dc6489cfe6608ba38e244fc45d205e8e0
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/alignment/parse-place-items.html
@@ -0,0 +1,256 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+#placeItemsNormal {
+ place-items: normal;
meade_UTC10 2017/03/09 05:39:36 nit: please use 2-indenting for html, css and js.
+}
+#placeItemsCenterAuto {
+ place-items: center auto;
+}
+#placeItemsBaseline {
+ place-items: baseline;
+}
+#placeItemsStart {
+ place-items: start;
+}
+#placeItemsFlexStart {
+ place-items: flex-start;
+}
+#placeItemsEnd {
+ place-items: end;
+}
+#placeItemsSelfStart {
+ place-items: self-start;
+}
+#placeItemsStretch {
+ place-items: stretch;
+}
+#placeItemsStartEnd {
+ place-items: start end;
+}
+#placeItemsStartSelfEnd {
+ place-items: start self-end;
+}
+#placeItemsStartBaseline {
+ place-items: start baseline;
+}
+
+<!-- Invalid CSS cases -->
+#placeItemsEmpty {
+ place-items:;
+}
+#placeItemsAuto {
+ place-items: auto;
+}
+#placeItemsNone {
+ place-items: none;
+}
+#placeItemsSafe {
+ place-items: safe;
+}
+#placeItemsStartSafe {
+ place-items: start safe;
+}
+#placeItemsStartEndLeft {
+ place-items: start end left;
+}
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="resources/alignment-parsing-utils-th.js"></script>
+</head>
+<body>
+ <p>Test to verify that the new place-items alignment shorthand is parsed as expected and correctly sets the longhand values.</p>
+ <div id="log"></div>
+
+ <div id="placeItemsNormal"></div>
+ <div id="placeItemsCenterAuto"></div>
+ <div id="placeItemsBaseline"></div>
+ <div id="placeItemsStart"></div>
+ <div id="placeItemsFlexStart"></div>
+ <div id="placeItemsEnd"></div>
+ <div id="placeItemsSelfStart"></div>
+ <div id="placeItemsStretch"></div>
+ <div id="placeItemsStartEnd"></div>
+ <div id="placeItemsStartSelfEnd"></div>
+ <div id="placeItemsStartBaseline"></div>
+
+ <div id="placeItemsEmpty"></div>
+ <div id="placeItemsAuto"></div>
+ <div id="placeItemsNone"></div>
+ <div id="placeItemsSafe"></div>
+ <div id="placeItemsStartSafe"></div>
+ <div id="placeItemsBaselineSafe"></div>
+ <div id="placeItemsStartEndLeft"></div>
+<script>
+function checkPlaceItemsValues(element, value, alignValue, justifyValue)
meade_UTC10 2017/03/09 05:39:37 nit: Inconsistent use of opening brackets on same
+{
+ var res = value.split(" ");
+ if (res.length < 2)
+ res[1] = res[0];
+ checkValues(element, "alignItems", "align-items", res[0], alignValue);
+ checkValues(element, "justifyItems", "justify-items", res[1], justifyValue);
+}
+
+function checkPlaceItemsValuesJS(value, alignValue, justifyValue)
+{
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.placeItems = value;
+ checkValues(element, "placeItems", "place-items", value, alignValue + ' ' + justifyValue)
+ checkPlaceItemsValues(element, value, alignValue, justifyValue)
+}
+
+function checkPlaceItemsValuesBadJS(value)
+{
+ element.style.placeItems = "";
+ element.style.placeItems = value;
+ checkPlaceItemsValues(element, "", "normal", "normal")
+}
+
+function checkPlaceItemsInitialValue()
+{
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ checkValues(element, "placeItems", "place-items", "", "normal normal");
+ element.style.placeItems = "center";
+ checkPlaceItemsValues(element, "center", "center", "center");
+ element.style.placeItems = "initial";
+ checkValues(element, "placeItems", "place-items", "initial", "normal normal");
+ checkPlaceItemsValues(element, "initial", "normal", "normal");
+}
+
+function checkPlaceItemsInheritValue()
+{
+ document.body.style.placeItems = "start";
+ var anotherElement = document.createElement("div");
+ document.body.appendChild(anotherElement);
+ checkPlaceItemsValues(anotherElement, "", "normal", "normal");
+ anotherElement.style.placeItems = "inherit";
+ checkPlaceItemsValues(anotherElement, "inherit", "start", "start");
+}
+
+
+test(function() {
+ checkValues(placeItemsNormal, "placeItems", "place-items", "", "normal normal");
+ checkPlaceItemsValues(placeItemsNormal, "", "normal", "normal");
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'normal' value through CSS.");
+
+test(function() {
+ checkValues(placeItemsCenterAuto, "placeItems", "place-items", "", "center normal");
+ checkPlaceItemsValues(placeItemsCenterAuto, "", "center", "normal");
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'center auto' value through CSS.");
+
+test(function() {
+ checkValues(placeItemsBaseline, "placeItems", "place-items", "", "baseline baseline");
+ checkPlaceItemsValues(placeItemsBaseline, "", "baseline", "baseline");
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'baseline' value through CSS.");
+
+test(function() {
+ checkValues(placeItemsStart, "placeItems", "place-items", "", "start start");
+ checkPlaceItemsValues(placeItemsStart, "", "start", "start");
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'start' value through CSS.");
+
+test(function() {
+ checkValues(placeItemsFlexStart, "placeItems", "place-items", "", "flex-start flex-start");
+ checkPlaceItemsValues(placeItemsFlexStart, "", "flex-start", "flex-start");
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'flex-start' value through CSS.");
+
+test(function() {
+ checkValues(placeItemsEnd, "placeItems", "place-items", "", "end end");
+ checkPlaceItemsValues(placeItemsEnd, "", "end", "end");
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'end' value through CSS.");
+
+test(function() {
+ checkValues(placeItemsSelfStart, "placeItems", "place-items", "", "self-start self-start");
+ checkPlaceItemsValues(placeItemsSelfStart, "", "self-start", "self-start");
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'self-start' value through CSS.");
+
+test(function() {
+ checkValues(placeItemsStretch, "placeItems", "place-items", "", "stretch stretch");
+ checkPlaceItemsValues(placeItemsStretch, "", "stretch", "stretch");
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'stretch' value through CSS.");
+
+test(function() {
+ checkValues(placeItemsStartEnd, "placeItems", "place-items", "", "start end");
+ checkPlaceItemsValues(placeItemsStartEnd, "", "start", "end");
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'start end' value through CSS.");
+
+test(function() {
+ checkValues(placeItemsStartSelfEnd, "placeItems", "place-items", "", "start self-end");
+ checkPlaceItemsValues(placeItemsStartSelfEnd, "", "start", "self-end");
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'start self-end' value through CSS.");
+
+test(function() {
+ checkValues(placeItemsStartBaseline, "placeItems", "place-items", "", "start baseline");
+ checkPlaceItemsValues(placeItemsStartBaseline, "", "start", "baseline");
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'start baseline' value through CSS.");
+
+test(function() {
+ checkValues(placeItemsAuto, "placeItems", "place-items", "", "normal normal");
+ checkPlaceItemsValues(placeItemsAuto, "", "normal", "normal");
+}, "Test setting '' as incorrect value through CSS.");
+
+test(function() {
+ checkValues(placeItemsAuto, "placeItems", "place-items", "", "normal normal");
+ checkPlaceItemsValues(placeItemsAuto, "", "normal", "normal");
+}, "Test setting 'auto' as incorrect value through CSS.");
+
+test(function() {
+ checkValues(placeItemsNone, "placeItems", "place-items", "", "normal normal");
+ checkPlaceItemsValues(placeItemsNone, "", "normal", "normal");
+}, "Test setting 'none' as incorrect value through CSS.");
+
+test(function() {
+ checkValues(placeItemsSafe, "placeItems", "place-items", "", "normal normal");
+ checkPlaceItemsValues(placeItemsSafe, "", "normal", "normal");
+}, "Test setting 'safe' as incorrect value through CSS.");
+
+test(function() {
+ checkValues(placeItemsStartSafe, "placeItems", "place-items", "", "normal normal");
+ checkPlaceItemsValues(placeItemsStartSafe, "", "normal", "normal");
+}, "Test setting 'start safe' as incorrect value through CSS.");
+
+test(function() {
+ checkValues(placeItemsStartSafe, "placeItems", "place-items", "", "normal normal");
+ checkPlaceItemsValues(placeItemsStartSafe, "", "normal", "normal");
+}, "Test setting 'baseline safe' as incorrect value through CSS.");
+
+test(function() {
+ checkValues(placeItemsStartEndLeft, "placeItems", "place-items", "", "normal normal");
+ checkPlaceItemsValues(placeItemsStartEndLeft, "", "normal", "normal");
+}, "Test setting 'start end left' as incorrect value through CSS.");
+
+test(function() {
+ checkPlaceItemsValuesJS("center", "center", "center");
+ checkPlaceItemsValuesJS("center start", "center", "start");
+ checkPlaceItemsValuesJS("self-start end", "self-start", "end");
+ checkPlaceItemsValuesJS("normal end", "normal", "end");
+}, "Test setting values through JS.");
+
+test(function() {
+ checkPlaceItemsValuesBadJS("auto normal", "normal", "normal");
+ checkPlaceItemsValuesBadJS("space-between", "normal", "normal");
+ checkPlaceItemsValuesBadJS("center safe", "normal", "normal");
+ checkPlaceItemsValuesBadJS("center self-start center", "normal", "normal");
+ checkPlaceItemsValuesBadJS("asrt", "normal", "normal");
+ checkPlaceItemsValuesBadJS("auto", "normal", "normal");
+ checkPlaceItemsValuesBadJS("10px", "normal", "normal");
+ checkPlaceItemsValuesBadJS("stretch safe", "normal", "normal");
+ checkPlaceItemsValuesBadJS("self-start start end", "normal", "normal");
+ checkPlaceItemsValuesBadJS("", "normal", "normal");
+}, "Test setting incorrect values through JS.");
+
+test(function() {
+ checkPlaceItemsInitialValue();
meade_UTC10 2017/03/09 05:39:37 This function is only used here, why not put the l
+}, "Test the 'initial' value of the place-items shorthand and its longhand properties' Computed value");
+
+test(function() {
+ checkPlaceItemsInheritValue();
meade_UTC10 2017/03/09 05:39:37 ditto
+}, "Test the 'inherit' value of the place-items shorthand and its longhand properties' Computed value");
+
+
+</script>
+</body>
+</html>
« no previous file with comments | « no previous file | third_party/WebKit/Source/core/css/CSSProperties.json5 » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698