fix(challenges): fix grid-gap shorthand regex (#237)
ISSUES CLOSED: #229
This commit is contained in:
Josh Alling
Tom
@ -15,10 +15,8 @@
|
|||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
{
|
{
|
||||||
"text":
|
"text": "<code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.",
|
||||||
"<code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.",
|
"testString": "assert(code.match(/.container\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.');"
|
||||||
"testString":
|
|
||||||
"assert(code.match(/.container\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.');"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"solutions": ["var code = \".container {display: grid;}\""],
|
"solutions": ["var code = \".container {display: grid;}\""],
|
||||||
@ -76,10 +74,8 @@
|
|||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
{
|
{
|
||||||
"text":
|
"text": "<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.",
|
||||||
"<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.",
|
"testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?100px\\s*?100px\\s*?100px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.');"
|
||||||
"testString":
|
|
||||||
"assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?100px\\s*?100px\\s*?100px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.');"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"solutions": [
|
"solutions": [
|
||||||
@ -137,10 +133,8 @@
|
|||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
{
|
{
|
||||||
"text":
|
"text": "<code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.",
|
||||||
"<code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.",
|
"testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-rows\\s*?:\\s*?50px\\s*?50px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.');"
|
||||||
"testString":
|
|
||||||
"assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-rows\\s*?:\\s*?50px\\s*?50px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.');"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"solutions": [
|
"solutions": [
|
||||||
@ -205,10 +199,8 @@
|
|||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
{
|
{
|
||||||
"text":
|
"text": "<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.",
|
||||||
"<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.",
|
"testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?1fr\\s*?100px\\s*?2fr\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.');"
|
||||||
"testString":
|
|
||||||
"assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?1fr\\s*?100px\\s*?2fr\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.');"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"solutions": [
|
"solutions": [
|
||||||
@ -270,10 +262,8 @@
|
|||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
{
|
{
|
||||||
"text":
|
"text": "<code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.",
|
||||||
"<code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.",
|
"testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-column-gap\\s*?:\\s*?20px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.');"
|
||||||
"testString":
|
|
||||||
"assert(code.match(/.container\\s*?{[\\s\\S]*grid-column-gap\\s*?:\\s*?20px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.');"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"solutions": ["var code = \".container {grid-column-gap: 20px;}\""],
|
"solutions": ["var code = \".container {grid-column-gap: 20px;}\""],
|
||||||
@ -332,10 +322,8 @@
|
|||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
{
|
{
|
||||||
"text":
|
"text": "<code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.",
|
||||||
"<code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.",
|
"testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-row-gap\\s*?:\\s*?5px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.');"
|
||||||
"testString":
|
|
||||||
"assert(code.match(/.container\\s*?{[\\s\\S]*grid-row-gap\\s*?:\\s*?5px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.');"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"solutions": ["var code = \".container {grid-row-gap: 5px;}\""],
|
"solutions": ["var code = \".container {grid-row-gap: 5px;}\""],
|
||||||
@ -394,10 +382,8 @@
|
|||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
{
|
{
|
||||||
"text":
|
"text": "<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.",
|
||||||
"<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.",
|
"testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-gap\\s*?:\\s*?10px\\s+?20px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.');"
|
||||||
"testString":
|
|
||||||
"assert(code.match(/.container\\s*?{[\\s\\S]*grid-gap\\s*?:\\s*?10px\\s*?20px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.');"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"solutions": ["var code = \".container {grid-gap: 10px 20px;}\""],
|
"solutions": ["var code = \".container {grid-gap: 10px 20px;}\""],
|
||||||
@ -462,10 +448,8 @@
|
|||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
{
|
{
|
||||||
"text":
|
"text": "<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.",
|
||||||
"<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.",
|
"testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-column\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.');"
|
||||||
"testString":
|
|
||||||
"assert(code.match(/.item5\\s*?{[\\s\\S]*grid-column\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.');"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"solutions": ["var code = \".item5 {grid-column: 2 / 4;}\""],
|
"solutions": ["var code = \".item5 {grid-column: 2 / 4;}\""],
|
||||||
@ -528,10 +512,8 @@
|
|||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
{
|
{
|
||||||
"text":
|
"text": "<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.",
|
||||||
"<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.",
|
"testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-row\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.');"
|
||||||
"testString":
|
|
||||||
"assert(code.match(/.item5\\s*?{[\\s\\S]*grid-row\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.');"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"solutions": ["var code = \".item5 {grid-row: 2 / 4;}\""],
|
"solutions": ["var code = \".item5 {grid-row: 2 / 4;}\""],
|
||||||
@ -598,10 +580,8 @@
|
|||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
{
|
{
|
||||||
"text":
|
"text": "<code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.",
|
||||||
"<code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.",
|
"testString": "assert(code.match(/.item2\\s*?{[\\s\\S]*justify-self\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), '<code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.');"
|
||||||
"testString":
|
|
||||||
"assert(code.match(/.item2\\s*?{[\\s\\S]*justify-self\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), '<code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.');"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"solutions": ["var code = \".item2 {justify-self: center;}\""],
|
"solutions": ["var code = \".item2 {justify-self: center;}\""],
|
||||||
@ -665,10 +645,8 @@
|
|||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
{
|
{
|
||||||
"text":
|
"text": "<code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.",
|
||||||
"<code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.",
|
"testString": "assert(code.match(/.item3\\s*?{[\\s\\S]*align-self\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.');"
|
||||||
"testString":
|
|
||||||
"assert(code.match(/.item3\\s*?{[\\s\\S]*align-self\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.');"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"solutions": ["var code = \".item3 {align-self: end;}\""],
|
"solutions": ["var code = \".item3 {align-self: end;}\""],
|
||||||
@ -732,10 +710,8 @@
|
|||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
{
|
{
|
||||||
"text":
|
"text": "<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.",
|
||||||
"<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.",
|
"testString": "assert(code.match(/.container\\s*?{[\\s\\S]*justify-items\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.');"
|
||||||
"testString":
|
|
||||||
"assert(code.match(/.container\\s*?{[\\s\\S]*justify-items\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.');"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"solutions": ["var code = \".container {justify-items: center;}\""],
|
"solutions": ["var code = \".container {justify-items: center;}\""],
|
||||||
@ -795,10 +771,8 @@
|
|||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
{
|
{
|
||||||
"text":
|
"text": "<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.",
|
||||||
"<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.",
|
"testString": "assert(code.match(/.container\\s*?{[\\s\\S]*align-items\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.');"
|
||||||
"testString":
|
|
||||||
"assert(code.match(/.container\\s*?{[\\s\\S]*align-items\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.');"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"solutions": ["var code = \".container {align-items: end;}\""],
|
"solutions": ["var code = \".container {align-items: end;}\""],
|
||||||
@ -862,10 +836,8 @@
|
|||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
{
|
{
|
||||||
"text":
|
"text": "<code>container</code> class should have a <code>grid-template-areas</code> property similar to the preview but has <code>.</code> instead of the <code>advert</code> area.",
|
||||||
"<code>container</code> class should have a <code>grid-template-areas</code> property similar to the preview but has <code>.</code> instead of the <code>advert</code> area.",
|
"testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-areas\\s*?:\\s*?\"\\s*?header\\s*?header\\s*?header\\s*?\"\\s*?\"\\s*?.\\s*?content\\s*?content\\s*?\"\\s*?\"\\s*?footer\\s*?footer\\s*?footer\\s*?\"\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-areas</code> propertiy similar to the preview but has <code>.</code> instead of the <code>advert</code> area.');"
|
||||||
"testString":
|
|
||||||
"assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-areas\\s*?:\\s*?\"\\s*?header\\s*?header\\s*?header\\s*?\"\\s*?\"\\s*?.\\s*?content\\s*?content\\s*?\"\\s*?\"\\s*?footer\\s*?footer\\s*?footer\\s*?\"\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-areas</code> propertiy similar to the preview but has <code>.</code> instead of the <code>advert</code> area.');"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"solutions": [
|
"solutions": [
|
||||||
@ -932,10 +904,8 @@
|
|||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
{
|
{
|
||||||
"text":
|
"text": "<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.",
|
||||||
"<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.",
|
"testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-area\\s*?:\\s*?footer\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.');"
|
||||||
"testString":
|
|
||||||
"assert(code.match(/.item5\\s*?{[\\s\\S]*grid-area\\s*?:\\s*?footer\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.');"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"solutions": ["var code = \".item5 {grid-area: footer;}\""],
|
"solutions": ["var code = \".item5 {grid-area: footer;}\""],
|
||||||
@ -1006,10 +976,8 @@
|
|||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
{
|
{
|
||||||
"text":
|
"text": "<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.",
|
||||||
"<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.",
|
"testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-area\\s*?:\\s*?3\\s*?\\/\\s*?1\\s*?\\/\\s*?4\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.');"
|
||||||
"testString":
|
|
||||||
"assert(code.match(/.item5\\s*?{[\\s\\S]*grid-area\\s*?:\\s*?3\\s*?\\/\\s*?1\\s*?\\/\\s*?4\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.');"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"solutions": ["var code = \".item5 {grid-area: 3/1/4/4;}\""],
|
"solutions": ["var code = \".item5 {grid-area: 3/1/4/4;}\""],
|
||||||
@ -1080,10 +1048,8 @@
|
|||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
{
|
{
|
||||||
"text":
|
"text": "<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.",
|
||||||
"<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.",
|
"testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?3\\s*?,\\s*?1fr\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.');"
|
||||||
"testString":
|
|
||||||
"assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?3\\s*?,\\s*?1fr\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.');"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"solutions": [
|
"solutions": [
|
||||||
@ -1147,10 +1113,8 @@
|
|||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
{
|
{
|
||||||
"text":
|
"text": "<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.",
|
||||||
"<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.",
|
"testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?3\\s*?,\\s*?minmax\\s*?\\(\\s*?90px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.');"
|
||||||
"testString":
|
|
||||||
"assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?3\\s*?,\\s*?minmax\\s*?\\(\\s*?90px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.');"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"solutions": [
|
"solutions": [
|
||||||
@ -1216,10 +1180,8 @@
|
|||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
{
|
{
|
||||||
"text":
|
"text": "<code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.",
|
||||||
"<code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.",
|
"testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?auto-fill\\s*?,\\s*?minmax\\s*?\\(\\s*?60px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.');"
|
||||||
"testString":
|
|
||||||
"assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?auto-fill\\s*?,\\s*?minmax\\s*?\\(\\s*?60px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.');"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"solutions": [
|
"solutions": [
|
||||||
@ -1299,10 +1261,8 @@
|
|||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
{
|
{
|
||||||
"text":
|
"text": "<code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.",
|
||||||
"<code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.",
|
"testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?auto-fit\\s*?,\\s*?minmax\\s*?\\(\\s*?60px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.');"
|
||||||
"testString":
|
|
||||||
"assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?auto-fit\\s*?,\\s*?minmax\\s*?\\(\\s*?60px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.');"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"solutions": [
|
"solutions": [
|
||||||
@ -1383,10 +1343,8 @@
|
|||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
{
|
{
|
||||||
"text":
|
"text": "When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.",
|
||||||
"When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.",
|
"testString": "assert(code.match(/@media\\s*?\\(\\s*?min-width\\s*?:\\s*?400px\\s*?\\)[\\s\\S]*.container\\s*?{[\\s\\S]*grid-template-areas\\s*?:\\s*?\"\\s*?header\\s*?header\\s*?\"\\s*?\"\\s*?advert\\s*?content\\s*?\"\\s*?\"\\s*?footer\\s*?footer\\s*?\"\\s*?;[\\s\\S]*}/gi), 'When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.');"
|
||||||
"testString":
|
|
||||||
"assert(code.match(/@media\\s*?\\(\\s*?min-width\\s*?:\\s*?400px\\s*?\\)[\\s\\S]*.container\\s*?{[\\s\\S]*grid-template-areas\\s*?:\\s*?\"\\s*?header\\s*?header\\s*?\"\\s*?\"\\s*?advert\\s*?content\\s*?\"\\s*?\"\\s*?footer\\s*?footer\\s*?\"\\s*?;[\\s\\S]*}/gi), 'When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.');"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"solutions": [
|
"solutions": [
|
||||||
@ -1487,16 +1445,12 @@
|
|||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
{
|
{
|
||||||
"text":
|
"text": "<code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.",
|
||||||
"<code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.",
|
"testString": "assert(code.match(/.item3\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?auto\\s*?1fr\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.');"
|
||||||
"testString":
|
|
||||||
"assert(code.match(/.item3\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?auto\\s*?1fr\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.');"
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"text":
|
"text": "<code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.",
|
||||||
"<code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.",
|
"testString": "assert(code.match(/.item3\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.');"
|
||||||
"testString":
|
|
||||||
"assert(code.match(/.item3\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.');"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"solutions": [
|
"solutions": [
|
||||||
|
|||||||
Reference in New Issue
Block a user