Add align-content icons to the styles panel
This CL adds new icons for several align-content properties
that are adjusted based on the flex-direction, direction and
writing-mode.
Screenshot: https://i.imgur.com/bT8tRdM.png
Bug: 1139945
Change-Id: I1854fa15049d191f91e14b2623c7c37d376e3663
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2505905
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Patrick Brosset <patrick.brosset@microsoft.com>
diff --git a/devtools_grd_files.gni b/devtools_grd_files.gni
index 6d0e626..e0e002a 100644
--- a/devtools_grd_files.gni
+++ b/devtools_grd_files.gni
@@ -30,6 +30,13 @@
"front_end/Images/cssoverview_icons_2x.png",
"front_end/Images/elements_panel_icon.svg",
"front_end/Images/errorWave.svg",
+ "front_end/Images/flex-align-content-center-icon.svg",
+ "front_end/Images/flex-align-content-end-icon.svg",
+ "front_end/Images/flex-align-content-space-around-icon.svg",
+ "front_end/Images/flex-align-content-space-between-icon.svg",
+ "front_end/Images/flex-align-content-space-evenly-icon.svg",
+ "front_end/Images/flex-align-content-start-icon.svg",
+ "front_end/Images/flex-align-content-stretch-icon.svg",
"front_end/Images/flex-direction-icon.svg",
"front_end/Images/ic_info_black_18dp.svg",
"front_end/Images/ic_page_next_16x16_icon.svg",
diff --git a/devtools_image_files.gni b/devtools_image_files.gni
index 65c369f..5b234b7 100644
--- a/devtools_image_files.gni
+++ b/devtools_image_files.gni
@@ -25,6 +25,13 @@
"elements_panel_icon.svg",
"errorWave.svg",
"flex-direction-icon.svg",
+ "flex-align-content-center-icon.svg",
+ "flex-align-content-start-icon.svg",
+ "flex-align-content-end-icon.svg",
+ "flex-align-content-space-around-icon.svg",
+ "flex-align-content-space-between-icon.svg",
+ "flex-align-content-space-evenly-icon.svg",
+ "flex-align-content-stretch-icon.svg",
"ic_info_black_18dp.svg",
"ic_page_next_16x16_icon.svg",
"ic_page_prev_16x16_icon.svg",
diff --git a/front_end/Images/flex-align-content-center-icon.svg b/front_end/Images/flex-align-content-center-icon.svg
new file mode 100644
index 0000000..922e419
--- /dev/null
+++ b/front_end/Images/flex-align-content-center-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13" fill="none"><rect transform="matrix(-1 0 0 1 10.5 2)" rx="1" fill="#000" height="3" width="8"/><rect transform="matrix(-1 0 0 1 10.5 8)" rx="1" fill="#000" height="3" width="8"/><path fill="#000" stroke="#000" stroke-width=".971" d="M1.469 6.485h10.05v.055H1.469z"/></svg>
\ No newline at end of file
diff --git a/front_end/Images/flex-align-content-end-icon.svg b/front_end/Images/flex-align-content-end-icon.svg
new file mode 100644
index 0000000..5432b00
--- /dev/null
+++ b/front_end/Images/flex-align-content-end-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 13 13"><rect width="8" height="3" fill="#000" rx="1" transform="matrix(-1 0 0 1 10.5 3.5)"/><path fill="#000" d="M10.5 8.5a1 1 0 00-1-1h-6a1 1 0 00-1 1v2h8v-2z"/><path fill="#000" d="M1 10h11v1H1z"/></svg>
\ No newline at end of file
diff --git a/front_end/Images/flex-align-content-space-around-icon.svg b/front_end/Images/flex-align-content-space-around-icon.svg
new file mode 100644
index 0000000..e57c8b5
--- /dev/null
+++ b/front_end/Images/flex-align-content-space-around-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 13 13"><rect width="8" height="3" fill="#000" rx="1" transform="matrix(-1 0 0 1 10.5 2.75)"/><rect width="8" height="3" fill="#000" rx="1" transform="matrix(-1 0 0 1 10.5 7.25)"/><path fill="#000" d="M1 11h11v1H1zM1 1h11v1H1z"/></svg>
\ No newline at end of file
diff --git a/front_end/Images/flex-align-content-space-between-icon.svg b/front_end/Images/flex-align-content-space-between-icon.svg
new file mode 100644
index 0000000..d9b6d0f
--- /dev/null
+++ b/front_end/Images/flex-align-content-space-between-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 13 13"><path fill="#000" d="M10.5 1.5h-8v2a1 1 0 001 1h6a1 1 0 001-1v-2zm0 8a1 1 0 00-1-1h-6a1 1 0 00-1 1v2h8v-2z"/><path fill="#000" d="M1 11h11v1H1zM1 1h11v1H1z"/></svg>
\ No newline at end of file
diff --git a/front_end/Images/flex-align-content-space-evenly-icon.svg b/front_end/Images/flex-align-content-space-evenly-icon.svg
new file mode 100644
index 0000000..b9cfddf
--- /dev/null
+++ b/front_end/Images/flex-align-content-space-evenly-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 13 13"><rect width="8" height="3" fill="#000" rx="1" transform="matrix(-1 0 0 1 10.5 3)"/><rect width="8" height="3" fill="#000" rx="1" transform="matrix(-1 0 0 1 10.5 7)"/><path fill="#000" d="M1 11h11v1H1zM1 1h11v1H1z"/></svg>
\ No newline at end of file
diff --git a/front_end/Images/flex-align-content-start-icon.svg b/front_end/Images/flex-align-content-start-icon.svg
new file mode 100644
index 0000000..bded6ab
--- /dev/null
+++ b/front_end/Images/flex-align-content-start-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13" fill="none"><rect y="-9.5" x="-10.5" transform="scale(-1)" rx="1" fill="#000" height="3" width="8"/><path d="M10.5 4.5a1 1 0 01-1 1h-6a1 1 0 01-1-1v-2h8z" fill="#000"/><path d="M1 3h11V2H1z" fill="#000"/></svg>
\ No newline at end of file
diff --git a/front_end/Images/flex-align-content-stretch-icon.svg b/front_end/Images/flex-align-content-stretch-icon.svg
new file mode 100644
index 0000000..e0067f7
--- /dev/null
+++ b/front_end/Images/flex-align-content-stretch-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13" fill="none"><path d="M10.5 2h-8v3a1 1 0 001 1h6a1 1 0 001-1V2zm0 6a1 1 0 00-1-1h-6a1 1 0 00-1 1v3h8V8zM1 11h11v1H1zM1 1h11v1H1z" fill="#000"/></svg>
\ No newline at end of file
diff --git a/front_end/Images/src/flex-align-content-center-icon.svg b/front_end/Images/src/flex-align-content-center-icon.svg
new file mode 100644
index 0000000..265336c
--- /dev/null
+++ b/front_end/Images/src/flex-align-content-center-icon.svg
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ inkscape:version="1.0 (4035a4f, 2020-05-01)"
+ sodipodi:docname="flex-align-content-center-icon.svg"
+ id="svg16"
+ version="1.1"
+ viewBox="0 0 13 13"
+ fill="none">
+ <metadata
+ id="metadata22">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs20" />
+ <sodipodi:namedview
+ inkscape:current-layer="svg16"
+ inkscape:window-maximized="1"
+ inkscape:window-y="23"
+ inkscape:window-x="0"
+ inkscape:cy="6.5"
+ inkscape:cx="4.0173611"
+ inkscape:zoom="77.538462"
+ showgrid="false"
+ id="namedview18"
+ inkscape:window-height="1303"
+ inkscape:window-width="2560"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0"
+ guidetolerance="10"
+ gridtolerance="10"
+ objecttolerance="10"
+ borderopacity="1"
+ bordercolor="#666666"
+ pagecolor="#ffffff" />
+ <rect
+ id="rect10"
+ transform="matrix(-1 0 0 1 10.5 2)"
+ rx="1"
+ fill="#000"
+ height="3"
+ width="8" />
+ <rect
+ id="rect12"
+ transform="matrix(-1 0 0 1 10.5 8)"
+ rx="1"
+ fill="#000"
+ height="3"
+ width="8" />
+ <rect
+ y="6.4854751"
+ x="1.46861"
+ height="0.054843348"
+ width="10.049883"
+ id="rect869"
+ style="opacity:1;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.97095;stroke-opacity:1" />
+</svg>
diff --git a/front_end/Images/src/flex-align-content-end-icon.svg b/front_end/Images/src/flex-align-content-end-icon.svg
new file mode 100644
index 0000000..0acfece
--- /dev/null
+++ b/front_end/Images/src/flex-align-content-end-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 13 13"><rect width="8" height="3" fill="#000" rx="1" transform="matrix(-1 0 0 1 10.5 3.5)"/><path fill="#000" d="M10.5 8.5c0-.55228-.4477-1-1-1h-6c-.55228 0-1 .44772-1 1v2h8v-2z"/><path fill="#000" d="M1 10h11v1H1z"/></svg>
\ No newline at end of file
diff --git a/front_end/Images/src/flex-align-content-space-around-icon.svg b/front_end/Images/src/flex-align-content-space-around-icon.svg
new file mode 100644
index 0000000..e57c8b5
--- /dev/null
+++ b/front_end/Images/src/flex-align-content-space-around-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 13 13"><rect width="8" height="3" fill="#000" rx="1" transform="matrix(-1 0 0 1 10.5 2.75)"/><rect width="8" height="3" fill="#000" rx="1" transform="matrix(-1 0 0 1 10.5 7.25)"/><path fill="#000" d="M1 11h11v1H1zM1 1h11v1H1z"/></svg>
\ No newline at end of file
diff --git a/front_end/Images/src/flex-align-content-space-between-icon.svg b/front_end/Images/src/flex-align-content-space-between-icon.svg
new file mode 100644
index 0000000..0c5c03a
--- /dev/null
+++ b/front_end/Images/src/flex-align-content-space-between-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 13 13"><path fill="#000" d="M10.5 1.5h-8v2c0 .55228.44772 1 1 1h6c.5523 0 1-.44772 1-1v-2zM10.5 9.5c0-.55228-.4477-1-1-1h-6c-.55228 0-1 .44772-1 1v2h8v-2z"/><path fill="#000" d="M1 11h11v1H1zM1 1h11v1H1z"/></svg>
\ No newline at end of file
diff --git a/front_end/Images/src/flex-align-content-space-evenly-icon.svg b/front_end/Images/src/flex-align-content-space-evenly-icon.svg
new file mode 100644
index 0000000..b9cfddf
--- /dev/null
+++ b/front_end/Images/src/flex-align-content-space-evenly-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 13 13"><rect width="8" height="3" fill="#000" rx="1" transform="matrix(-1 0 0 1 10.5 3)"/><rect width="8" height="3" fill="#000" rx="1" transform="matrix(-1 0 0 1 10.5 7)"/><path fill="#000" d="M1 11h11v1H1zM1 1h11v1H1z"/></svg>
\ No newline at end of file
diff --git a/front_end/Images/src/flex-align-content-start-icon.svg b/front_end/Images/src/flex-align-content-start-icon.svg
new file mode 100644
index 0000000..f401611
--- /dev/null
+++ b/front_end/Images/src/flex-align-content-start-icon.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ inkscape:version="1.0 (4035a4f, 2020-05-01)"
+ sodipodi:docname="flex-align-content-start-icon.svg"
+ id="svg839"
+ version="1.1"
+ viewBox="0 0 13 13"
+ fill="none">
+ <metadata
+ id="metadata845">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs843" />
+ <sodipodi:namedview
+ inkscape:current-layer="svg839"
+ inkscape:window-maximized="1"
+ inkscape:window-y="23"
+ inkscape:window-x="0"
+ inkscape:cy="7.239521"
+ inkscape:cx="5.8188623"
+ inkscape:zoom="51.384615"
+ showgrid="false"
+ id="namedview841"
+ inkscape:window-height="1303"
+ inkscape:window-width="2560"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0"
+ guidetolerance="10"
+ gridtolerance="10"
+ objecttolerance="10"
+ borderopacity="1"
+ bordercolor="#666666"
+ pagecolor="#ffffff" />
+ <rect
+ y="-9.5"
+ x="-10.5"
+ id="rect833"
+ transform="scale(-1)"
+ rx="1"
+ fill="#000"
+ height="3"
+ width="8" />
+ <path
+ id="path835"
+ d="m 10.5,4.5000002 c 0,0.55228 -0.4477,1 -1,1 h -6 c -0.55228,0 -1,-0.44772 -1,-1 v -2 h 8 z"
+ fill="#000" />
+ <path
+ id="path837"
+ d="m 1,3.0000002 h 11 v -1 H 1 Z"
+ fill="#000" />
+</svg>
diff --git a/front_end/Images/src/flex-align-content-stretch-icon.svg b/front_end/Images/src/flex-align-content-stretch-icon.svg
new file mode 100644
index 0000000..ee3820b
--- /dev/null
+++ b/front_end/Images/src/flex-align-content-stretch-icon.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ inkscape:version="1.0 (4035a4f, 2020-05-01)"
+ sodipodi:docname="flex-align-content-stretch-icon.svg"
+ id="svg14"
+ version="1.1"
+ viewBox="0 0 13 13"
+ fill="none">
+ <metadata
+ id="metadata20">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs18" />
+ <sodipodi:namedview
+ inkscape:current-layer="svg14"
+ inkscape:window-maximized="1"
+ inkscape:window-y="23"
+ inkscape:window-x="0"
+ inkscape:cy="6.5"
+ inkscape:cx="6.5"
+ inkscape:zoom="77.538462"
+ showgrid="false"
+ id="namedview16"
+ inkscape:window-height="1303"
+ inkscape:window-width="2560"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0"
+ guidetolerance="10"
+ gridtolerance="10"
+ objecttolerance="10"
+ borderopacity="1"
+ bordercolor="#666666"
+ pagecolor="#ffffff" />
+ <path
+ id="path12"
+ d="M10.5 2h-8v3c0 .55228.44772 1 1 1h6c.5523 0 1-.44772 1-1V2zM10.5 8c0-.55228-.4477-1-1-1h-6c-.55228 0-1 .44772-1 1v3h8V8zM1 11h11v1H1zM1 1h11v1H1z"
+ fill="#000" />
+</svg>
diff --git a/front_end/Images/src/optimize_svg.hashes b/front_end/Images/src/optimize_svg.hashes
index ea936a5..47e418d 100644
--- a/front_end/Images/src/optimize_svg.hashes
+++ b/front_end/Images/src/optimize_svg.hashes
@@ -1,12 +1,17 @@
{
+ "flex-align-content-space-around-icon.svg": "ecf68a0514d0bcf578fb77e75290e533",
+ "flex-align-content-end-icon.svg": "c6efb40815035fe28454fc9c426b9f6e",
"checkboxCheckmark.svg": "f039bf85cee42ad5c30ca3bfdce7912a",
"errorWave.svg": "e183fa242a22ed4784a92f6becbc2c45",
"breaking_change_icon.svg": "8106678156bfc2a3d88b36972ebc12c0",
"securityIcons.svg": "27676f7c1f1542659c7c49a8052259dc",
"largeIcons.svg": "61874ded98adb22e3f958e28ecbb674c",
+ "flex-align-content-space-evenly-icon.svg": "35f5aae14e7c29c4cc4ca6684f8ed75d",
"elements_panel_icon.svg": "6cee6a38a17e8571ce36cf71f30108f2",
"refresh_12x12_icon.svg": "d07eaba74a308fb03fa04b1c1965dc72",
+ "flex-align-content-stretch-icon.svg": "becd714181ae4aaa1ec5e2a19fe19427",
"mediumIcons.svg": "d3ea5f402107bd3a73950cc672957adc",
+ "flex-align-content-center-icon.svg": "182ac1dd37996dd901efe1023f79d19d",
"chevrons.svg": "79b4b527771e30b6388ce664077b3409",
"accelerometer-back.svg": "342973eb940ef43b409b28c2c6b0d520",
"link_icon.svg": "165ad815ffdf0da89c04ac104389f54e",
@@ -19,6 +24,8 @@
"accelerometer-front.svg": "a4dcdac47131aa923346c15e01bc644a",
"smallIcons.svg": "10719c45b1004a4c4dd236e590deded1",
"treeoutlineTriangles.svg": "aa6c8f8df9ae7c50f14397131808e764",
+ "flex-align-content-space-between-icon.svg": "0444b31ebc14c4094dbf75bbff012f7f",
"ic_undo_16x16_icon.svg": "948e32c1878baa9d3717ff8377ab1feb",
+ "flex-align-content-start-icon.svg": "cea3050540097d6661f6bf4ad98d3407",
"lighthouse_logo.svg": "b889aaf8631e71e3427eb96d3433e319"
}
\ No newline at end of file
diff --git a/front_end/elements/CSSPropertyIconResolver.js b/front_end/elements/CSSPropertyIconResolver.js
index 2167bea..3f108f3 100644
--- a/front_end/elements/CSSPropertyIconResolver.js
+++ b/front_end/elements/CSSPropertyIconResolver.js
@@ -113,6 +113,22 @@
}
/**
+ * @param {string} iconName
+ * @param {!PhysicalFlexDirection} direction
+ * @return {!IconInfo}
+ */
+export function rotateFlexAlignContentIcon(iconName, direction) {
+ return {
+ iconName,
+ rotate: direction === PhysicalFlexDirection.RIGHT_TO_LEFT ?
+ 90 :
+ (direction === PhysicalFlexDirection.LEFT_TO_RIGHT ? -90 : 0),
+ scaleX: 1,
+ scaleY: 1,
+ };
+}
+
+/**
*
* @param {string} value
* @return {function(!Map<string, string>):!IconInfo}
@@ -130,6 +146,24 @@
}
/**
+ *
+ * @param {string} iconName
+ * @return {function(!Map<string, string>):!IconInfo}
+ */
+function flexAlignContentIcon(iconName) {
+ /**
+ * @param {!Map<string, string>} computedStyles
+ * @return {!IconInfo}
+ */
+ function getIcon(computedStyles) {
+ const directions = getPhysicalFlexDirections(computedStyles);
+ return rotateFlexAlignContentIcon(
+ iconName, computedStyles.get('flex-direction') === 'column' ? directions.row : directions.column);
+ }
+ return getIcon;
+}
+
+/**
* @type {!Map<string, function(!Map<string, string>):!IconInfo>}
*/
const textToIconResolver = new Map();
@@ -141,6 +175,13 @@
textToIconResolver.set('flex-direction: initial', flexDirectionIcon('row'));
textToIconResolver.set('flex-direction: unset', flexDirectionIcon('row'));
textToIconResolver.set('flex-direction: revert', flexDirectionIcon('row'));
+textToIconResolver.set('align-content: center', flexAlignContentIcon('flex-align-content-center-icon'));
+textToIconResolver.set('align-content: space-around', flexAlignContentIcon('flex-align-content-space-around-icon'));
+textToIconResolver.set('align-content: space-between', flexAlignContentIcon('flex-align-content-space-between-icon'));
+textToIconResolver.set('align-content: stretch', flexAlignContentIcon('flex-align-content-stretch-icon'));
+textToIconResolver.set('align-content: space-evenly', flexAlignContentIcon('flex-align-content-space-evenly-icon'));
+textToIconResolver.set('align-content: flex-end', flexAlignContentIcon('flex-align-content-end-icon'));
+textToIconResolver.set('align-content: flex-start', flexAlignContentIcon('flex-align-content-start-icon'));
/**
* @param {string} text
diff --git a/test/unittests/front_end/elements/CSSPropertyIconResolver_test.ts b/test/unittests/front_end/elements/CSSPropertyIconResolver_test.ts
index fc07bf8..03f441e 100644
--- a/test/unittests/front_end/elements/CSSPropertyIconResolver_test.ts
+++ b/test/unittests/front_end/elements/CSSPropertyIconResolver_test.ts
@@ -2,7 +2,7 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-import {findIcon, getPhysicalFlexDirections, PhysicalFlexDirection, reverseDirection, rotateFlexDirectionIcon} from '../../../../front_end/elements/CSSPropertyIconResolver.js';
+import {findIcon, getPhysicalFlexDirections, PhysicalFlexDirection, reverseDirection, rotateFlexAlignContentIcon, rotateFlexDirectionIcon} from '../../../../front_end/elements/CSSPropertyIconResolver.js';
const {assert} = chai;
@@ -288,4 +288,78 @@
`Test 'flex-direction: column-reverse'(${JSON.stringify(test.style)}) failed.`);
}
});
+
+ it('can rotate an icon for align-content', () => {
+ const iconName = 'iconName';
+ assert.deepEqual(rotateFlexAlignContentIcon(iconName, PhysicalFlexDirection.LEFT_TO_RIGHT), {
+ iconName,
+ rotate: -90,
+ scaleX: 1,
+ scaleY: 1,
+ });
+ assert.deepEqual(rotateFlexAlignContentIcon(iconName, PhysicalFlexDirection.RIGHT_TO_LEFT), {
+ iconName,
+ rotate: 90,
+ scaleX: 1,
+ scaleY: 1,
+ });
+ assert.deepEqual(rotateFlexAlignContentIcon(iconName, PhysicalFlexDirection.TOP_TO_BOTTOM), {
+ iconName,
+ rotate: 0,
+ scaleX: 1,
+ scaleY: 1,
+ });
+ assert.deepEqual(rotateFlexAlignContentIcon(iconName, PhysicalFlexDirection.BOTTOM_TO_TOP), {
+ iconName,
+ rotate: 0,
+ scaleX: 1,
+ scaleY: 1,
+ });
+ });
+
+ it('can find an icon for align-content properties', () => {
+ const tests = [
+ {
+ style: {
+ 'flex-direction': 'row',
+ 'align-content': 'center',
+ },
+ iconName: 'flex-align-content-center-icon',
+ expected: PhysicalFlexDirection.TOP_TO_BOTTOM,
+ },
+ {
+ style: {
+ 'flex-direction': 'column',
+ 'align-content': 'center',
+ },
+ iconName: 'flex-align-content-center-icon',
+ expected: PhysicalFlexDirection.LEFT_TO_RIGHT,
+ },
+ {
+ style: {
+ 'flex-direction': 'row',
+ 'align-content': 'center',
+ 'writing-mode': 'vertical-rl',
+ },
+ iconName: 'flex-align-content-center-icon',
+ expected: PhysicalFlexDirection.RIGHT_TO_LEFT,
+ },
+ {
+ style: {
+ 'flex-direction': 'row',
+ 'align-content': 'center',
+ 'writing-mode': 'vertical-lr',
+ },
+ iconName: 'flex-align-content-center-icon',
+ expected: PhysicalFlexDirection.LEFT_TO_RIGHT,
+ },
+ ];
+
+ for (const test of tests) {
+ assert.deepEqual(
+ findIcon(`align-content: ${test.style['align-content']}`, mapFromStyle(test.style)),
+ rotateFlexAlignContentIcon(test.iconName, test.expected),
+ `Test align-content(${JSON.stringify(test.style)}) failed.`);
+ }
+ });
});
