fix(i18n): chinese test suite (#38220)
* fix: Chinese test suite Add localeTiltes, descriptions, and adjust test text and testStrings to get the automated test suite working. * fix: ran script, updated testStrings and solutions
This commit is contained in:
Kristofer Koishigawa
committed by
Mrugesh Mohapatra
Mrugesh Mohapatra
parent
6a7a7e6d7d
commit
b3213fc892
@ -33,7 +33,7 @@ localeTitle: 使用 grid-template-columns 添加多列
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>container</code>类应该有<code>grid-template-columns</code>属性，该属性有三个值，均为<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));'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?100px\s*?100px\s*?100px\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ localeTitle: 使用 grid-gap 为网格添加间距
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>container</code>类应该有<code>grid-gap</code>属性，在行之间设置<code>10px</code>的间距，在列之间设置<code>20px</code>的间距。'
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s*?20px\s*?;[\s\S]*}/gi));'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ localeTitle: 使用 grid-template-rows 添加多行
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>container</code>类应该有<code>grid-template-rows</code>属性，且该属性的两个值均为<code>50px</code>'
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi));'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ localeTitle: 使用 justify-items 水平对齐所有项目
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>container</code>类应该有<code>justify-items</code>属性且值为<code>center</code>。'
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi));'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ localeTitle: 使用 align-items 垂直对齐所有项目
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>container</code>类应该有<code>align-items</code>属性且值为<code>end</code>。'
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi));'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -26,7 +26,7 @@ localeTitle: 使用 justify-self 水平对齐项目
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>item2</code>类应该有<code>justify-self</code>属性且值为<code>center</code>。'
|
||||
testString: 'assert(code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi));'
|
||||
testString: assert(code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ localeTitle: 使用 align-self 垂直对齐项目
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>item3</code>类应该有<code>align-self</code>属性且值为<code>end</code>。'
|
||||
testString: 'assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));'
|
||||
testString: assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -30,7 +30,7 @@ grid-column-gap: 10px;
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>container</code>类应该有<code>grid-column-gap</code>属性且值为<code>20px</code>。'
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi));'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ localeTitle: 使用 grid-row-gap 创建多行之间的间距
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>container</code>类应该有<code>grid-row-gap</code>属性且值为<code>5px</code>。'
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi));'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@ repeat(auto-fill, minmax(60px, 1fr));
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>container</code>类应该有<code>grid-template-columns</code>属性且使用<code>repeat</code>和<code>auto-fill</code>，以便将最小宽度为<code>60px</code>，最大宽度为<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));'
|
||||
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));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ localeTitle: 使用 auto-fit 创建弹性布局
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>container2</code>类应该有<code>grid-template-columns</code>属性，且使用<code>repeat</code>和<code>auto-fit</code>以便将最小宽度为<code>60px</code>，最大宽度为<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));'
|
||||
testString: assert(code.match(/.container2\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));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -24,9 +24,9 @@ localeTitle: 在网格中创建网格
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>item3</code>类应该有<code>grid-template-columns</code>属性且值为<code>auto</code>和<code>1fr</code>。'
|
||||
testString: 'assert(code.match(/.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi));'
|
||||
testString: assert(code.match(/.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi));
|
||||
- text: '<code>item3</code>类有<code>display</code>属性且值为<code>grid</code>。'
|
||||
testString: 'assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));'
|
||||
testString: assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ localeTitle: 创建你的第一个 CSS 网格
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>container</code>类应该有<code>display</code>属性且值为<code>grid</code>。'
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -34,7 +34,7 @@ grid-template-areas:
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>container</code>类应该有类似于最右侧预览区的<code>grid-template-areas</code>属性且用<code>.</code>代替<code>advert</code>。'
|
||||
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));'
|
||||
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));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ grid-template-columns: 100px minmax(50px, 200px);
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>container</code>类应该有<code>grid-template-columns</code>属性且设置重复 3 列，每列宽度最小值为<code>90px</code>，最大值为<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));'
|
||||
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));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@ localeTitle: 使用 grid-area 属性将项目放置在网格区域中
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>item5</code>类应该有<code>grid-area</code>属性且值为<code>footer</code>。'
|
||||
testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi));'
|
||||
testString: assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -43,7 +43,7 @@ grid-template-columns: 1fr 50px 1fr 50px 20px;
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>container</code>类应该带有<code>grid-template-columns</code>属性且设置为重复 3 列，宽为<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));'
|
||||
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));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -35,7 +35,7 @@ grid-area: horizontal line to start at / vertical line to start at / horizontal
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>item5</code>类应该有<code>grid-area</code>属性且值为<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));'
|
||||
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));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -34,7 +34,7 @@ grid-column: 1 / 3;
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>item5</code>类应该有<code>grid-column</code>属性且其值为<code>2 / 4</code>。'
|
||||
testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-column\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi));'
|
||||
testString: assert($('style').text().replace(/\s/g, '').match(/\.item5{.*grid-column:.*}/g));
|
||||
- text: '<code>item5</code> 类应该有 <code>grid-column</code> 属性使其占用网格最后两列。'
|
||||
testString: "
|
||||
const colStart = getComputedStyle($('.item5')[0]).gridColumnStart;
|
||||
|
||||
@ -23,7 +23,7 @@ localeTitle: 使用 grid-row 来控制空间大小
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>item5</code>类应该有<code>grid-row</code>属性且值为<code>2 / 4</code>。'
|
||||
testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-row\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi));'
|
||||
testString: assert($('style').text().replace(/\s/g, '').match(/\.item5{.*grid-row:.*}/g));
|
||||
- text: '<code>item5</code> class 应该有 <code>grid-row</code> 属性使其占用网格最后两行。'
|
||||
testString: "
|
||||
const rowStart = getComputedStyle($('.item5')[0]).gridRowStart;
|
||||
|
||||
@ -24,7 +24,7 @@ localeTitle: 使用媒体查询创建响应式布局
|
||||
```yml
|
||||
tests:
|
||||
- text: '当网页可视区域的宽在<code>400px</code>及以上时，<code>container</code>类应该带有<code>grid-template-areas</code>属性且能够使得 footer 和 header 区域分别占据顶行和底行，advert 和 content 区域分别占据中间行的左和右列。'
|
||||
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));'
|
||||
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));
|
||||
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user