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
@ -26,9 +26,9 @@ Camper Cat 正在尝试为他的博客文本与背景使用颜色，但是他目
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该将<code>color</code>属性的亮度值设置为 15%。'
|
||||
testString: 'assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi));'
|
||||
testString: assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi));
|
||||
- text: '你应该将<code>background-color</code>属性的亮度值设置为 55%。'
|
||||
testString: 'assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi));'
|
||||
testString: assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -45,7 +45,7 @@ tests:
|
||||
- text: '<code>source</code>标签应该在<code>audio</code>标签中。'
|
||||
testString: assert($('audio').children('source').length === 1);
|
||||
- text: '<code>source</code>标签中<code>src</code>属性的值应该与教程中的链接一致。'
|
||||
testString: 'assert($(''source'').attr(''src'') === ''https://s3.amazonaws.com/freecodecamp/screen-reader.mp3'');'
|
||||
testString: assert($('source').attr('src') === 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3');
|
||||
- text: '<code>source</code>标签中应具有<code>type</code>属性，其值为 audio/mpeg。'
|
||||
testString: assert($('source').attr('type') === 'audio/mpeg');
|
||||
|
||||
|
||||
@ -46,9 +46,9 @@ tests:
|
||||
- text: '<code>sr-only</code>类中的<code>left</code>属性的值应为 -10000px。'
|
||||
testString: assert($('.sr-only').css('left') == '-10000px');
|
||||
- text: '<code>sr-only</code>类中的<code>width</code>属性的值应为 1px。'
|
||||
testString: 'assert(code.match(/width:\s*?1px/gi));'
|
||||
testString: assert(code.match(/width:\s*?1px/gi));
|
||||
- text: '<code>sr-only</code>类中的<code>height</code>属性的值应为 1px。'
|
||||
testString: 'assert(code.match(/height:\s*?1px/gi));'
|
||||
testString: assert(code.match(/height:\s*?1px/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@ tests:
|
||||
- text: '你应该将<code>id</code>是 "first" 的<code>a</code>标签的<code>accesskey</code>属性值设置为小写 "g"。'
|
||||
testString: assert($('#first').attr('accesskey') == 'g');
|
||||
- text: '你应该将<code>id</code>是 "second" 的<code>a</code>标签的<code>accesskey</code>属性值设置为小写 "c"。'
|
||||
testString: assert($('#second').attr('accesskey') == 'c')
|
||||
testString: assert($('#second').attr('accesskey') == 'c');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -25,13 +25,13 @@ Camper Cat 的比武大会的时间确定了！请使用<code>time</code>标签
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>time</code>标签应该包含文本"Thursday, September 15<sup>th</sup>"。'
|
||||
testString: assert($('time').text().match(/Thursday, September 15th/g));
|
||||
testString: assert(timeElement.length);
|
||||
- text: '<code>time</code>标签应该有 1 个非空的<code>datetime</code>属性。'
|
||||
testString: assert($('time').attr('datetime'));
|
||||
testString: assert(timeElement.length && $(timeElement).html().trim() === "Thursday, September 15<sup>th</sup>");
|
||||
- text: '<code>datetime</code>属性的值应该为 2016-09-15。'
|
||||
testString: assert($('time').attr('datetime') === "2016-09-15");
|
||||
testString: assert(datetimeAttr && datetimeAttr.length);
|
||||
- text: '确保<code>time</code>标签是闭合的。'
|
||||
testString: assert(code.match(/<\/time>/g) && code.match(/<\/time>/g).length === 4);
|
||||
testString: assert(datetimeAttr === "2016-09-15");
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -28,9 +28,9 @@ Camper Cat 希望他的网站有一个介绍如何成为忍者的页面。请帮
|
||||
```yml
|
||||
tests:
|
||||
- text: '你的代码应该包含 6 个<code>h3</code>标签。'
|
||||
testString: assert($('h3').length === 6);
|
||||
testString: assert($("h3").length === 6);
|
||||
- text: '你的代码不应包含 <code>h5</code> 标签。'
|
||||
testString: assert($('h5').length === 0);
|
||||
testString: assert((code.match(/\/h3/g) || []).length===6);
|
||||
- text: '代码不应该包含 <code>h5</code> 标记.'
|
||||
testString: assert($("h5").length === 0);
|
||||
- text: '代码不应该包含 <code>h5</code> 结束标记。'
|
||||
|
||||
@ -39,9 +39,9 @@ box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该给 id 为 <code>thumbnail</code> 的元素添加 <code>box-shadow</code> 属性。'
|
||||
testString: assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g), '你应该给 id 为 <code>thumbnail</code> 的元素添加 <code> box-shadow</code> 属性。');
|
||||
testString: assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g));
|
||||
- text: '<code>box-shadow</code> 值应该是指定的 CSS 值。'
|
||||
testString: 'assert(code.match(/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\),\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi), ''<code>box-shadow</code> 值应该是指定的 CSS 值。'');'
|
||||
testString: assert(code.match(/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\)\s*?,\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -27,11 +27,11 @@ RGB 值可以在 0 到 255 之间。alpha 值可以在 0 到 1 之间，其中 0
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该给 <code>h4</code> 元素添加一个 <code>background-color</code> 属性并且赋值 <code>rgba(45, 45, 45, 0.1)</code>。'
|
||||
testString: 'assert(code.match(/background-color:\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\)/gi), ''你应该给 <code>h4</code> 元素添加一个 <code>background-color</code> 属性并且赋值 <code>rgba(45, 45, 45, 0.1)</code>。'');'
|
||||
testString: assert(code.match(/(background-color|background):\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\);/gi));
|
||||
- text: '你应该给 <code>h4</code> 元素添加一个 <code>padding</code> 属性并且赋值 <code>10px</code>。'
|
||||
testString: assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px', '你应该给 <code>h4</code> 元素添加一个 <code>padding</code> 属性并且赋值 <code>10px</code>。');
|
||||
testString: assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px');
|
||||
- text: '<code>h4</code> 元素的 <code>height</code> 属性应该被移除。'
|
||||
testString: assert(!($('h4').css('height') == '25px'), '<code>h4</code> 元素的 <code>height</code> 属性应该被移除。');
|
||||
testString: assert(!($('h4').css('height') == '25px'));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,13 +23,13 @@ localeTitle: 将各种元素的颜色调整为互补色
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>header</code> 元素应该有一个值为 <code>#09A7A1</code> 的 <code>background-color</code> CSS 属性。'
|
||||
testString: assert($('header').css('background-color') == 'rgb(9, 167, 161)', '<code>header</code> 元素应该有一个值为 <code>#09A7A1</code> 的 <code>background-color</code> CSS 属性。');
|
||||
testString: "assert($('header').css('background-color') == 'rgb(9, 167, 161)');"
|
||||
- text: '<code>footer</code> 元素应该有一个值为 <code>#09A7A1</code> 的 <code>background-color</code>CSS 属性。'
|
||||
testString: assert($('footer').css('background-color') == 'rgb(9, 167, 161)', '<code>footer</code> 元素应该有一个值为 <code>#09A7A1</code> 的 <code>background-color</code> CSS 属性。');
|
||||
testString: "assert($('footer').css('background-color') == 'rgb(9, 167, 161)');"
|
||||
- text: '<code>h2</code> 元素应该有一个值为 <code>#09A7A1</code> 的 <code>color</code> CSS 属性。'
|
||||
testString: assert($('h2').css('color') == 'rgb(9, 167, 161)', '<code>h2</code> 元素应该有一个值为 <code>#09A7A1</code> 的 <code>color</code> CSS 属性。');
|
||||
testString: "assert($('h2').css('color') == 'rgb(9, 167, 161)');"
|
||||
- text: '<code>button</code> 元素应该有一个值为 <code>#FF790E</code> 的 <code>background-color</code> CSS 属性。'
|
||||
testString: assert($('button').css('background-color') == 'rgb(255, 121, 14)', '<code>button</code> 元素应该有一个值为 <code>#FF790E</code> 的 <code>background-color</code> CSS 属性。');
|
||||
testString: "assert($('button').css('background-color') == 'rgb(255, 121, 14)');"
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@ img {
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该设置 <code>h4</code> 的 <code>height</code> 属性，使其值为 <code>25px</code>。'
|
||||
testString: assert($('h4').css('height') == '25px', '你应该设置 <code>h4</code> 的 <code>height</code> 属性，使其值为 <code>25px</code>。');
|
||||
testString: assert(Math.round(document.querySelector('h4').getBoundingClientRect().height) === 25 && /h4{\S*height:25px(;\S*}|})/.test($('style').text().replace(/\s/g ,'')));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -31,9 +31,9 @@ a:hover {
|
||||
```yml
|
||||
tests:
|
||||
- text: '超链接的 <code>color</code> 应该保持黑色，只添加 <code>:hover</code> CSS 规则。'
|
||||
testString: 'assert($(''a'').css(''color'') == ''rgb(0, 0, 0)'', ''超链接的 <code>color</code> 应该保持黑色，只添加 <code>:hover</code> CSS 规则。'');'
|
||||
testString: assert($('a').css('color') == 'rgb(0, 0, 0)');
|
||||
- text: '悬停超链接时超链接 <code>color</code> 应该变成蓝色。'
|
||||
testString: 'assert(code.match(/a:hover\s*?{\s*?color:\s*?blue;\s*?}/gi), ''悬停超链接时超链接 <code>color</code> 应该变成蓝色。'');'
|
||||
testString: assert(code.match(/a:hover\s*?{\s*?color:\s*?(blue|rgba\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?,\s*?1\s*?\)|#00F|rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\))\s*?;\s*?}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -28,17 +28,17 @@ HSL 色彩空间模型是一种将 RGB 色彩模型中的点放在圆柱坐标
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该使用 <code>hsl()</code> 属性来表示绿色。'
|
||||
testString: 'assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi), ''你应该使用 <code>hsl()</code> 属性来表示绿色。'');'
|
||||
testString: assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
- text: '你应该使用 <code>hsl()</code> 属性来表示蓝绿色。'
|
||||
testString: 'assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi), ''你应该使用 <code>hsl()</code> 属性来表示蓝绿色。'');'
|
||||
testString: assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
- text: '你应该使用 <code>hsl()</code> 属性来表示蓝色。'
|
||||
testString: 'assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi), ''你应该使用 <code>hsl()</code> 属性来表示蓝色。'');'
|
||||
testString: assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
- text: 'class 为 <code>green</code> 的 <code>div</code> 应该有绿色的 <code>background-color</code> CSS 属性。'
|
||||
testString: assert($('.green').css('background-color') == 'rgb(0, 255, 0)', 'class 为 <code>green</code> 的 <code>div</code> 应该有绿色的 <code>background-color</code> CSS 属性。');
|
||||
testString: assert($('.green').css('background-color') == 'rgb(0, 255, 0)');
|
||||
- text: 'class 为 <code>cyan</code> 的 <code>div</code> 应该有蓝绿色的 <code>background-color</code> CSS 属性。'
|
||||
testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'class 为 <code>cyan</code> 的 <code>div</code> 应该有蓝绿色的 <code>background-color</code> CSS 属性。');
|
||||
testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||
- text: 'class 为 <code>blue</code> 的 <code>div</code> 应该有蓝色的 <code>background-color</code> CSS 属性。'
|
||||
testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'class 为 <code>cyan</code> 的 <code>div</code> 应该有蓝色的 <code>background-color</code> CSS 属性。');
|
||||
testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ localeTitle: 调整标题与段落的大小
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该给 <code>h4</code> 元素添加一个 <code>font-size</code> 属性并且赋值 <code>27px</code>。'
|
||||
testString: assert($('h4').css('font-size') == '27px', '你应该给 <code>h4</code> 元素添加一个 <code>font-size</code> 属性并且赋值 <code>27px</code>。');
|
||||
testString: assert($('h4').css('font-size') == '27px');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ localeTitle: 调整颜色的色调
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>nav</code> 元素应该有一个使用 <code>hsl()</code> 属性调节蓝绿色调的 <code>background-color</code> CSS 属性。'
|
||||
testString: 'assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi), ''<code>nav</code> 元素应该有一个使用 <code>hsl()</code> 调节蓝绿色调的 <code>background-color</code> CSS 属性。'');'
|
||||
testString: assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -30,7 +30,7 @@ img {
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该使用 <code>fullCard</code> class 选择器将卡片的 <code>width</code> 宽度属性更改为 <code>245px</code>。'
|
||||
testString: 'assert(code.match(/.fullCard\s*{[\s\S][^}]*\n*^\s*width\s*:\s*245px\s*;/gm), ''你应该使用 <code>fullCard</code> class 选择器将卡片的 <code>width</code> 宽度属性更改为 <code>245px</code>。'');'
|
||||
testString: const fullCard = code.match(/\.fullCard\s*{[\s\S]+?[^}]}/g); assert(fullCard && /width\s*:\s*245px\s*(;|})/gi.test(fullCard[0]) && $('.fullCard').css('maxWidth') === 'none');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ localeTitle: 以可变速率来给元素添加动画
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>star-1</code> class 的 <code>@keyframes</code> 规则应该为50%。'
|
||||
testString: assert(code.match(/twinkle-1\s*?{\s*?50%/g), '<code>star-1</code>class 的 <code>@keyframes</code> 规则应该为50%。');
|
||||
testString: assert(code.match(/twinkle-1\s*?{\s*?50%/g));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@ localeTitle: 使用无限的动画计数制作永不停止的动画
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>animation-iteration-count</code> 属性值应该为 infinite。'
|
||||
testString: assert($('#ball').css('animation-iteration-count') == 'infinite', '<code>animation-iteration-count</code> 属性值应该为 infinite。');
|
||||
testString: assert($('#ball').css('animation-iteration-count') == 'infinite');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -24,11 +24,11 @@ localeTitle: 以可变速率来给多个元素添加动画
|
||||
```yml
|
||||
tests:
|
||||
- text: 'class 为 <code>star-1</code> 的 <code>animation-duration</code> 属性值应该 1s。'
|
||||
testString: assert($('.star-1').css('animation-duration') == '1s', 'class 为 <code>star-1</code> 的 <code>animation-duration</code> 属性值应该 1s。');
|
||||
testString: assert($('.star-1').css('animation-duration') == '1s');
|
||||
- text: 'class 为 <code>star-2</code> 的 <code>animation-duration</code> 属性值应该 0.9s。'
|
||||
testString: assert($('.star-2').css('animation-duration') == '0.9s', 'class 为 <code>star-2</code> 的 <code>animation-duration</code> 属性值应该 0.9s。');
|
||||
testString: assert($('.star-2').css('animation-duration') == '0.9s');
|
||||
- text: 'class 为 <code>star-3</code> 的 <code>animation-duration</code> 属性值应该 1.1s。'
|
||||
testString: assert($('.star-3').css('animation-duration') == '1.1s', 'class 为 <code>star-3</code> 的 <code>animation-duration</code> 属性值应该 1.1s。');
|
||||
testString: assert($('.star-3').css('animation-duration') == '1.1s');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ localeTitle: 使用 margin 属性将元素水平居中
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>div</code> 的 <code>margin</code> 应该为 <code>auto</code>。'
|
||||
testString: 'assert(code.match(/margin:\s*?auto;/g), ''<code>div</code> 的 <code>margin</code> 应该为 <code>auto</code>。'');'
|
||||
testString: assert(code.match(/margin:\s*?auto;/g));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -34,9 +34,9 @@ p {
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h2</code> 元素应该添加 <code>position</code> 属性并赋值 <code>relative</code>。'
|
||||
testString: assert($('h2').css('position') == 'relative', '<code>h2</code> 元素应该添加<code>position</code> 属性并赋值 <code>relative</code>。');
|
||||
testString: assert($('h2').css('position') == 'relative');
|
||||
- text: '你应该使用 CSS 属性调整 <code>h2</code> 的位置使其从原来的位置向下偏移 <code>15px</code>。'
|
||||
testString: assert($('h2').css('top') == '15px', '你应该使用 CSS 属性调整 <code>h2</code> 的位置使其从原来的位置向下偏移 <code>15px</code>。');
|
||||
testString: assert($('h2').css('top') == '15px');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -24,9 +24,9 @@ localeTitle: 使用关键字更改动画定时器
|
||||
```yml
|
||||
tests:
|
||||
- text: 'id 为 <code>ball1</code> 的元素的 <code>animation-timing-function</code> 属性值应该为 linear。'
|
||||
testString: assert($('#ball1').css('animation-timing-function') == 'linear', 'id 为 <code>ball1</code> 的元素的 <code>animation-timing-function</code> 属性值应该为 linear。');
|
||||
testString: const ball1Animation = $('#ball1').css('animation-timing-function').replace(/\s/g, '');assert(ball1Animation == 'linear' || ball1Animation == 'cubic-bezier(0,0,1,1)');
|
||||
- text: 'id 为 <code>ball2</code> 的元素的 <code>animation-timing-function</code> 属性值应该为 ease-out。'
|
||||
testString: assert($('#ball2').css('animation-timing-function') == 'ease-out', 'id 为 <code>ball2</code> 的元素的 <code>animation-timing-function</code> 属性值应该为 ease-out。');
|
||||
testString: const ball2Animation = $('#ball2').css('animation-timing-function').replace(/\s/g, ''); assert(ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ localeTitle: 使用 z-index 属性更改重叠元素的位置
|
||||
```yml
|
||||
tests:
|
||||
- text: 'class 为 <code>first</code> 的元素的 <code>z-index</code> 值应该为 2。'
|
||||
testString: assert($('.first').css('z-index') == '2', 'class 为 <code>first</code> 的元素的 <code>z-index</code> 值应该为 2。');
|
||||
testString: assert($('.first').css('z-index') == '2');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@ HTML 元素的背景色并不局限于单色。CSS 还提供了颜色过渡，
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>div</code> 元素应该有一个指定方向和颜色的 <code>linear-gradient</code> <code>background</code>渐变色。'
|
||||
testString: 'assert(code.match(/background:\s*?linear-gradient\(35deg,\s*?(#CCFFFF|#CFF),\s*?(#FFCCCC|#FCC)\);/gi), ''<code>div</code> 元素应该有一个指定方向和颜色的 <code>linear-gradient</code> <code>background</code> 渐变色。'');'
|
||||
testString: assert($('div').css('background-image').match(/linear-gradient\(35deg, rgb\(204, 255, 255\), rgb\(255, 204, 204\)\)/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -27,11 +27,11 @@ localeTitle: 使用 CSS 创建一个图形
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>background-color</code> 属性应该取值 <code>transparent</code>。'
|
||||
testString: 'assert(code.match(/background-color:\s*?transparent;/gi), ''<code>background-color</code> 属性应该取值 <code>transparent</code>。'');'
|
||||
testString: assert(code.match(/background-color:\s*?transparent;/gi));
|
||||
- text: '<code>border-radius</code> 属性应该取值 <code>50%</code>。'
|
||||
testString: 'assert(code.match(/border-radius:\s*?50%;/gi), ''<code>border-radius</code>属性应该取值<code>50%</code>。'');'
|
||||
testString: assert(code.match(/border-radius:\s*?50%;/gi));
|
||||
- text: '<code>box-shadow</code> 属性的 <code>offset-x</code>、<code>offset-y</code>、<code>blur-radius</code>、<code>spread-radius</code> 和 <code>color</code> 应该依次取值<code>25px</code>、<code>10px</code>、<code>0</code>、<code>0</code> 和 <code>blue</code>。'
|
||||
testString: 'assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi), ''<code>box-shadow</code> 属性的 <code>offset-x</code>、<code>offset-y</code>、<code>blur-radius</code>、<code>spread-radius</code> 和 <code>color</code> 应该依次取值<code>25px</code>、<code>10px</code>、<code>0</code>、<code>0</code> 和 <code>blue</code>。'');'
|
||||
testString: assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -25,9 +25,9 @@ localeTitle: 使用 hr 标签创建水平线
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该添加一个 <code>hr</code> 标签。'
|
||||
testString: assert($('hr').length == 1, '你应该添加一个 <code>hr</code> 标签。');
|
||||
testString: assert($('hr').length == 1);
|
||||
- text: '<code>hr</code> 标签应该在标题和段落之间。'
|
||||
testString: assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi), '<code>hr</code> 标签应该在标题和段落之间。');
|
||||
testString: assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -41,13 +41,13 @@ localeTitle: 使用 CSS 和 HTML 创建更复杂的形状
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>heart::after</code> 选择器的 <code>background-color</code> 属性值应该为粉色。'
|
||||
testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), ''<code>heart::after</code> 选择器的 <code>background-color</code> 属性值应该为粉色。'');'
|
||||
testString: assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi));
|
||||
- text: '<code>heart::after</code> 选择器的 <code>border-radius</code> 属性值应该为 50%。'
|
||||
testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, ''<code>heart::after</code> 选择器的 <code>border-radius</code> 属性值应该为 50%。'');'
|
||||
testString: assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
|
||||
- text: '<code>heart</code> class 的 <code>transform</code> 属性应该使用 <code>rotate()</code> 函数并赋参为 <code>-45deg</code>。'
|
||||
testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), ''<code>heart</code> class 的 <code>transform</code> 属性应该使用 <code>rotate()</code> 函数并赋参为 <code>-45deg</code>。'');'
|
||||
testString: assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
|
||||
- text: '<code>heart::before</code>选择器的<code>content</code>应该为空字符串。'
|
||||
testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|'')\1\s*?;/gi), ''<code>heart::before</code> 选择器的 <code>content</code> 应该为空字符串。'');'
|
||||
testString: assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -42,11 +42,11 @@ localeTitle: 使用 CSS 动画创建运动
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>0%</code> 的 <code>@keyframes</code> 规则应该为向 <code>left</code> 偏移 <code>0px</code>。'
|
||||
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0px;\s*?left:\s*?0px;\s*?}/gi), ''<code>0%</code> 的 <code>@keyframes</code> 规则应该为向 <code>left</code> 偏移 <code>0px</code>。'');'
|
||||
testString: assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi));
|
||||
- text: '<code>50%</code> 的 <code>@keyframes</code> 规则应该为向 <code>left</code> 偏移<code>25px</code>。'
|
||||
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi), ''<code>50%</code> 的 <code>@keyframes</code> 规则应该为向<code>left</code> 偏移 <code>25px</code>。'');'
|
||||
testString: assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi));
|
||||
- text: '<code>100%</code> 的 <code>@keyframes</code> 规则应该为向 <code>left</code> 偏移<code>-25px</code>。'
|
||||
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0px;\s*?left:\s*?-25px;\s*?}/gi), ''<code>100%</code> 的 <code>@keyframes</code> 规则应该为向<code>left</code> 偏移 <code>-25px</code>。'');'
|
||||
testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ localeTitle: 通过添加细微图案作为背景图像来创建纹理
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>body</code> 元素选择器应包含 <code>background</code> 属性，且值为给定的 <code>url</code>。'
|
||||
testString: 'assert(code.match(/background:\s*?url\(\s*("|''|)https:\/\/i\.imgur\.com\/MJAkxbh\.png\1\s*\)/gi), ''<code>body</code> 元素选择器应包含 <code>background</code> 属性，且值为给定的 <code>url</code>。'');'
|
||||
testString: assert(code.match(/background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -28,9 +28,9 @@ web 内容大部分都是文本。CSS 里面的 <code>text-align</code> 属性
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该在 <code>h4</code> 标签上使用 text-align 属性设置文本居中对齐。'
|
||||
testString: assert($('h4').css('text-align') == 'center', '你应该在 <code>h4</code> 标签上使用 text-align 属性设置文本居中对齐。');
|
||||
testString: assert($('h4').css('text-align') == 'center');
|
||||
- text: '你应该在 <code>p</code> 标签上使用 text-align 属性设置文本两端对齐。'
|
||||
testString: assert($('p').css('text-align') == 'justify', '你应该在 <code>p</code> 标签上使用 text-align 属性设置文本两端对齐。');
|
||||
testString: assert($('p').css('text-align') == 'justify');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ localeTitle: 通过从左到右淡化元素来创建视觉方向
|
||||
```yml
|
||||
tests:
|
||||
- text: '50% 处 <code>keyframes</code> 规则应该设置 <code>opacity</code> 属性值为 0.1 以使其渐隐。'
|
||||
testString: 'assert(code.match(/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi), ''50% 处 <code>keyframes</code> 规则应该设置 <code>opacity</code> 属性值为 0.1 以使其渐隐。'');'
|
||||
testString: assert(code.match(/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@ CSS 里的 <code>opacity</code> 属性用来设置元素的透明度。
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该使用 <code>links</code> class 选择所有的超链接并设置其 <code>opacity</code> 值为 0.7。'
|
||||
testString: assert.approximately(parseFloat($('.links').css('opacity')), 0.7, 0.1, '你应该使用 <code>links</code> class 选择所有的超链接并设置其 <code>opacity</code> 值为 0.7。');
|
||||
testString: assert(/\.links\s*{([\s\S]*?;)*\s*opacity\s*:\s*0*\.70*\s*(;[\s\S]*?|\s*)}/.test($('style').text()));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -28,9 +28,9 @@ localeTitle: 了解互补色
|
||||
```yml
|
||||
tests:
|
||||
- text: 'class 为 <code>blue</code> 的 <code>div</code> 元素应该有值为蓝色的 <code>background-color</code> CSS 属性。'
|
||||
testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'class 为 <code>blue</code> 的 <code>div</code> 元素应该有值为蓝色的 <code>background-color</code> CSS 属性。');
|
||||
testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||
- text: 'class 为 <code>yellow</code> 的 <code>div</code> 元素应该有值为黄色的 <code>background-color</code> CSS 属性。'
|
||||
testString: assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)', 'class 为 <code>yellow</code> 的 <code>div</code> 元素应该有值为黄色的 <code>background-color</code> CSS 属性。');
|
||||
testString: assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -27,11 +27,11 @@ localeTitle: 了解三原色
|
||||
```yml
|
||||
tests:
|
||||
- text: 'class 为 <code>orange</code> 的 <code>div</code> 应该有值为橙色的 <code>background-color</code> CSS 属性。'
|
||||
testString: assert($('.orange').css('background-color') == 'rgb(255, 125, 0)', 'class 为 <code>orange</code> 的 <code>div</code> 应该有值为橙色的 <code>background-color</code> CSS 属性。');
|
||||
testString: assert($('.orange').css('background-color') == 'rgb(255, 127, 0)');
|
||||
- text: 'class 为 <code>cyan</code> 的 <code>div</code> 应该有值为蓝绿色的 <code>background-color</code> CSS 属性。'
|
||||
testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'class 为 <code>cyan</code> 的 <code>div</code> 应该有值为蓝绿色的 <code>background-color</code> CSS 属性。');
|
||||
testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||
- text: 'class 为 <code>raspberry</code> 的 <code>div</code> 应该有值为树莓红色的 <code>background-color</code> CSS 属性。'
|
||||
testString: assert($('.raspberry').css('background-color') == 'rgb(255, 0, 125)', 'class 为 <code>raspberry</code> 的 <code>div</code> 应该有值为树莓红色的 <code>background-color</code> CSS 属性。');
|
||||
testString: assert($('.raspberry').css('background-color') == 'rgb(255, 0, 127)');
|
||||
- text: 'corlor classes 里的所有的 <code>background-color</code> 应该是 HEX 颜色码而不是颜色名称。'
|
||||
testString: assert(!/background-color:\s(orange|cyan|raspberry)/.test(code));
|
||||
|
||||
|
||||
@ -27,9 +27,9 @@ localeTitle: 学习贝塞尔曲线的原理
|
||||
```yml
|
||||
tests:
|
||||
- text: 'id 为 <code>ball1</code> 的元素的 <code>animation-timing-function</code> 属性值应该为和 linear 预定值等价的贝塞尔函数值。'
|
||||
testString: assert($('#ball1').css('animation-timing-function') == 'cubic-bezier(0.25, 0.25, 0.75, 0.75)', 'id 为 <code>ball1</code> 的元素的 <code>animation-timing-function</code> 属性应该为和 linear 预定值等价的贝塞尔函数值。');
|
||||
testString: assert($('#ball1').css('animation-timing-function') == 'cubic-bezier(0.25, 0.25, 0.75, 0.75)');
|
||||
- text: 'id 为 <code>ball2</code> 元素的 <code>animation-timing-function</code> 属性值应该保持不变。'
|
||||
testString: assert($('#ball2').css('animation-timing-function') == 'ease-out', 'id 为 <code>ball2</code> 元素的 <code>animation-timing-function</code> 属性值应该保持不变。');
|
||||
testString: const ball2Animation = $('#ball2').css('animation-timing-function').replace(/\s/g, ''); assert(ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -45,17 +45,17 @@ id 为 <code>anim</code> 的元素，代码设置 <code>animation-name</code>
|
||||
```yml
|
||||
tests:
|
||||
- text: 'id 为 <code>rect</code> 的元素应该有一个值为 rainbow 的 <code>animation-name</code> 属性。'
|
||||
testString: assert($('#rect').css('animation-name') == 'rainbow', 'id 为 <code>rect</code> 的元素应该有一个值为 rainbow 的 <code>animation-name</code> 属性。');
|
||||
testString: assert($('#rect').css('animation-name') == 'rainbow');
|
||||
- text: 'id 为 <code>rect</code> 的元素应该有一个值为 4s 的 <code>animation-duration</code> 属性。'
|
||||
testString: assert($('#rect').css('animation-duration') == '4s', 'id 为 <code>rect</code> 的元素应该有一个值为 4s 的 <code>animation-duration</code> 属性。');
|
||||
testString: assert($('#rect').css('animation-duration') == '4s');
|
||||
- text: '<code>@keyframes</code> 规则的 <code>animation-name</code> 应该为 rainbow。'
|
||||
testString: assert(code.match(/@keyframes\s+?rainbow\s*?{/g), '<code>@keyframes</code> 规则的 <code>animation-name</code> 应该为 rainbow。');
|
||||
testString: assert(code.match(/@keyframes\s+?rainbow\s*?{/g));
|
||||
- text: '<code>@keyframes</code> 规则的 rainbow 在 0% 时的 <code>background-color</code> 应该为蓝色。'
|
||||
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), ''<code>@keyframes</code> 规则的 rainbow 在 0% 时的 <code>background-color</code> 应该为蓝色。'');'
|
||||
testString: assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));
|
||||
- text: '<code>@keyframes</code> 规则的 rainbow 在 50% 时的 <code>background-color</code> 应该为绿色。'
|
||||
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), ''<code>@keyframes</code> 规则的 rainbow 在 50% 时的 <code>background-color</code> 应该为绿色。'');'
|
||||
testString: assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));
|
||||
- text: '<code>@keyframes</code> 规则的 rainbow 在 100% 时的 <code>background-color</code> 应该为黄色。'
|
||||
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), ''<code>@keyframes</code> 规则的 rainbow 在 100% 时的 <code>background-color</code> 应该为黄色。'');'
|
||||
testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -24,11 +24,11 @@ localeTitle: 绝对定位的参照物是元素的父元素
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#searchbar</code> 元素应当有一个值为 <code>absolute</code> 的 <code>position</code> CSS 属性。'
|
||||
testString: assert($('#searchbar').css('position') == 'absolute', '<code>#searchbar</code> 元素应当有一个值为 <code>absolute</code> 的 <code>position</code> CSS 属性。');
|
||||
testString: assert($('#searchbar').css('position') == 'absolute');
|
||||
- text: '你的 <code>#searchbar</code> 元素应当有值为 <code>50px</code> 的 <code>top</code> CSS 属性。'
|
||||
testString: assert($('#searchbar').css('top') == '50px', '你的 <code>#searchbar</code> 元素应当有值为 <code>50px</code> 的 <code>top</code> CSS 属性。');
|
||||
testString: assert($('#searchbar').css('top') == '50px');
|
||||
- text: '你的 <code>#searchbar</code> 元素应当有值为 <code>50px</code> 的 <code>right</code> CSS 属性。'
|
||||
testString: assert($('#searchbar').css('right') == '50px', '你的 <code>#searchbar</code> 元素应当有值为 <code>50px</code> 的 <code>right</code> CSS 属性。');
|
||||
testString: assert($('#searchbar').css('right') == '50px');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -24,11 +24,11 @@ localeTitle: 固定定位的参照物是浏览器的窗口
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>>#navbar</code> 元素应当有一个值为 <code>fixed</code> 的 <code>position</code> CSS 属性'
|
||||
testString: assert($('#navbar').css('position') == 'fixed', '<code>#navbar</code> 元素应当有一个值为 <code>fixed</code> 的 <code>position</code> CSS 属性');
|
||||
testString: assert($('#navbar').css('position') == 'fixed');
|
||||
- text: '你的 <code>#navbar</code> 元素应当有值为 <code>0px</code> 的 <code>top</code> CSS 属性。'
|
||||
testString: assert($('#navbar').css('top') == '0px', '你的 <code>#navbar</code> 元素应当有值为 <code>0px</code> 的 <code>top</code> CSS 属性。');
|
||||
testString: assert($('#navbar').css('top') == '0px');
|
||||
- text: '你的 <code>#navbar</code> 元素应当有值为 <code>0px</code> 的 <code>left</code> CSS 属性。'
|
||||
testString: assert($('#navbar').css('left') == '0px', '你的 <code>#navbar</code> 元素应当有值为 <code>0px</code> 的 <code>left</code> CSS 属性。');
|
||||
testString: assert($('#navbar').css('left') == '0px');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -24,9 +24,9 @@ localeTitle: 使用无限的动画计数制作 CSS 心跳
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>heart</code> class 的 <code>animation-iteration-count</code> 属性应该赋值 infinte。'
|
||||
testString: assert($('.heart').css('animation-iteration-count') == 'infinite', '<code>heart</code> class 的 <code>animation-iteration-count</code> 属性应该赋值 infinite。');
|
||||
testString: assert($('.heart').css('animation-iteration-count') == 'infinite');
|
||||
- text: '<code>back</code> class 的 <code>animation-iteration-count</code> 属性应该赋值 infinite。'
|
||||
testString: assert($('.back').css('animation-iteration-count') == 'infinite', '<code>back</code> class 的 <code>animation-iteration-count</code> 属性应该赋值 infinite。');
|
||||
testString: assert($('.back').css('animation-iteration-count') == 'infinite');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@ localeTitle: 使用贝塞尔曲线让运动更加自然
|
||||
```yml
|
||||
tests:
|
||||
- text: 'id 为<code>green</code>的元素的<code>animation-timing-function</code>值应该为<code>cubic-bezier</code>函数，函数的参数 x1，y1，x2，y2 值依次为 0.311、0.441、0.444、1.649。'
|
||||
testString: assert($('#green').css('animation-timing-function') == 'cubic-bezier(0.311, 0.441, 0.444, 1.649)', 'id 为<code>green</code>的元素的<code>animation-timing-function</code>值应该为<code>cubic-bezier</code>函数，函数的参数 x1，y1，x2，y2 值依次为 0.311、0.441、0.444、1.649。');
|
||||
testString: assert($('#green').css('animation-timing-function') == 'cubic-bezier(0.311, 0.441, 0.444, 1.649)');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@ localeTitle: 修改动画的填充模式
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>button:hover</code> 应该有一个值为 <code>forwards</code> 的 <code>animation-fill-mode</code> 的属性。'
|
||||
testString: 'assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi), ''<code>button:hover</code> 应该有一个值为 <code>forwards</code> 的 <code>animation-fill-mode</code> 的属性。'');'
|
||||
testString: assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -24,9 +24,9 @@ CSS 里面的 <code>top</code>、<code>bottom</code>、<code>left</code> 和 <co
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该使用 CSS 属性使 <code>h2</code> 相对当前位置向上移动 <code>10px</code>。也就是说，从 <code>h2</code> 当前位置远离 <code>bottom</code> <code>10px</code>。'
|
||||
testString: assert($('h2').css('bottom') == '10px', '你应该使用 CSS 属性使 <code>h2</code> 相对当前位置向上移动 <code>10px</code>。也就是说，从 <code>h2</code> 当前位置远离 <code>bottom</code> <code>10px</code>。');
|
||||
testString: assert($('h2').css('bottom') == '10px');
|
||||
- text: '你应该使用 CSS 属性使 <code>h2</code> 相对当前位置向右移动 <code>15px</code>。也就是说，从 <code>h2</code> 当前位置远离 <code>left</code> <code>15px</code>。'
|
||||
testString: assert($('h2').css('left') == '15px', '你应该使用 CSS 属性使 <code>h2</code> 相对当前位置向右移动 <code>15px</code>。也就是说，从 <code>h2</code> 当前位置远离<code>left</code> <code>15px</code>。');
|
||||
testString: assert($('h2').css('left') == '15px');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,9 +23,9 @@ localeTitle: 使用 float 属性将元素左浮动或右浮动
|
||||
```yml
|
||||
tests:
|
||||
- text: 'id 为 <code>left</code> 的元素应该有一个值为 <code>left</code> 的 <code>float</code> CSS 属性。'
|
||||
testString: assert($('#left').css('float') == 'left', 'id 为 <code>left</code> 的元素应该有一个值为 <code>left</code> 的 <code>float</code> CSS 属性。');
|
||||
testString: assert($('#left').css('float') == 'left');
|
||||
- text: 'id 为 <code>right</code> 的元素应该有一个值为 <code>right</code> 的 <code>float</code> CSS 属性。'
|
||||
testString: assert($('#right').css('float') == 'right', 'id 为 <code>right</code> 的元素应该有一个值为 <code>right</code> 的 <code>float</code> CSS 属性。');
|
||||
testString: assert($('#right').css('float') == 'right');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,17 +23,17 @@ localeTitle: 设置多个标题元素的 font-size
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该设置 <code>h1</code> 标签的 <code>font-size</code> 为 <code>68px</code>。'
|
||||
testString: assert($('h1').css('font-size') == '68px', '你应该设置 <code>h1</code> 标签的 <code>font-size</code> 为 <code>68px</code>。');
|
||||
testString: assert($('h1').css('font-size') == '68px');
|
||||
- text: '你应该设置 <code>h2</code> 标签的 <code>font-size</code> 为 <code>52px</code>。'
|
||||
testString: assert($('h2').css('font-size') == '52px', '你应该设置<code>h2</code>标签的<code>font-size</code> 为 <code>52px</code>。');
|
||||
testString: assert($('h2').css('font-size') == '52px');
|
||||
- text: '你应该设置 <code>h3</code> 标签的 <code>font-size</code> 为 <code>40px</code>。'
|
||||
testString: assert($('h3').css('font-size') == '40px', '你应该设置 <code>h3</code> 标签的 <code>font-size</code> 为 <code>40px</code>。');
|
||||
testString: assert($('h3').css('font-size') == '40px');
|
||||
- text: '你应该设置 <code>h4</code> 标签的 <code>font-size</code> 为 <code>32px</code>。'
|
||||
testString: assert($('h4').css('font-size') == '32px', '你应该设置 <code>h4</code> 标签的 <code>font-size</code> 为 <code>32px</code>。');
|
||||
testString: assert($('h4').css('font-size') == '32px');
|
||||
- text: '你应该设置 <code>h5</code> 标签的 <code>font-size</code> 为 <code>21px</code>。'
|
||||
testString: assert($('h5').css('font-size') == '21px', '你应该设置 <code>h6</code> 标签的 <code>font-size</code> 为 <code>21px</code>。');
|
||||
testString: assert($('h5').css('font-size') == '21px');
|
||||
- text: '你应该设置 <code>h6</code> 标签的 <code>font-size</code> 为 <code>14px</code>。'
|
||||
testString: assert($('h6').css('font-size') == '14px', '你应该设置 <code>h6</code> 标签的 <code>font-size</code> 为 <code>14px</code>。');
|
||||
testString: assert($('h6').css('font-size') == '14px');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ CSS 里面的 <code>font-size</code> 属性不只限于标题，它可以应用
|
||||
```yml
|
||||
tests:
|
||||
- text: '你的 <code>p</code> 标签应该包含一个 <code>font-size</code> 属性并且值为 <code>16px</code>。'
|
||||
testString: assert($('p').css('font-size') == '16px', '你的 <code>p</code> 标签应该包含一个 <code>font-size</code> 属性并且值为 <code>16px</code>。');
|
||||
testString: assert($('p').css('font-size') == '16px');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -24,17 +24,17 @@ localeTitle: 设置多个标题元素的 font-weight
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该设置 <code>h1</code> 标签的 <code>font-weight</code> 为 800。'
|
||||
testString: assert($('h1').css('font-weight') == '800', '你应该设置 <code>h1</code> 标签的 <code>font-weight</code> 为 800。');
|
||||
testString: assert($('h1').css('font-weight') == '800');
|
||||
- text: '你应该设置 <code>h2</code> 标签的 <code>font-weight</code> 为 600。'
|
||||
testString: assert($('h2').css('font-weight') == '600', '你应该设置 <code>h2</code> 标签的 <code>font-weight</code> 为 600。');
|
||||
testString: assert($('h2').css('font-weight') == '600');
|
||||
- text: '你应该设置 <code>h3</code> 标签的 <code>font-weight</code> 为 500。'
|
||||
testString: assert($('h3').css('font-weight') == '500', '你应该设置 <code>h3</code> 标签的 <code>font-weight</code> 为 500。');
|
||||
testString: assert($('h3').css('font-weight') == '500');
|
||||
- text: '你应该设置 <code>h4</code> 标签的 <code>font-weight</code> 为 400。'
|
||||
testString: assert($('h4').css('font-weight') == '400', '你应该设置 <code>h4</code> 标签的 <code>font-weight</code> 为 400。');
|
||||
testString: assert($('h4').css('font-weight') == '400');
|
||||
- text: '你应该设置 <code>h5</code> 标签的 <code>font-weight</code> 为 300。'
|
||||
testString: assert($('h5').css('font-weight') == '300', '你应该设置 <code>h5</code> 标签的 <code>font-weight</code> 为 300。');
|
||||
testString: assert($('h5').css('font-weight') == '300');
|
||||
- text: '你应该设置 <code>h6</code> 标签的 <code>font-weight</code> 为 200。'
|
||||
testString: assert($('h6').css('font-weight') == '200', '你应该设置 <code>h6</code> 标签的 <code>font-weight</code> 为 200。');
|
||||
testString: assert($('h6').css('font-weight') == '200');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ CSS 提供 <code>line-height</code> 属性来设置行间的距离。行高，
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该给 <code>p</code> 标签添加 <code>line-height</code> 属性并赋值 <code>25px</code>。'
|
||||
testString: assert($('p').css('line-height') == '25px', '你应该给 <code>p</code> 标签添加 <code>line-height</code> 属性并赋值 <code>25px</code>。');
|
||||
testString: assert($('p').css('line-height') == '25px');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -26,11 +26,11 @@ localeTitle: 使用贝塞尔曲线移动图形
|
||||
```yml
|
||||
tests:
|
||||
- text: 'id 为 <code>red</code> 的元素的 <code>animation-timing-function</code> 属性应当赋为 <code>cubic-bezier</code> 函数，其中 x1，y1，x2，y2 值分别为 0，0，0.58，1。'
|
||||
testString: assert($('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)', 'id 为 <code>red</code> 的元素的 <code>animation-timing-function</code> 属性应当赋为 <code>cubic-bezier</code> 函数，其中 x1，y1，x2，y2 值分别为 0，0，0.58，1。');
|
||||
testString: assert($('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)');
|
||||
- text: 'id 为 <code>red</code> 的元素的 <code>animation-timing-function</code> 属性不应该取值 linear。'
|
||||
testString: assert($('#red').css('animation-timing-function') !== 'linear', 'id 为 <code>red</code> 的元素的 <code>animation-timing-function</code> 属性不应该取值 linear。');
|
||||
testString: assert($('#red').css('animation-timing-function') !== 'linear');
|
||||
- text: 'id 为 <code>blue</code> 的元素的 <code>animation-timing-function</code> 属性不应该被改变。'
|
||||
testString: assert($('#blue').css('animation-timing-function') == 'ease-out', 'id 为 <code>blue</code> 的元素的 <code>animation-timing-function</code> 属性不应该被改变。');
|
||||
testString: const blueBallAnimation = $('#blue').css('animation-timing-function').replace(/\s/g, ''); assert(blueBallAnimation == 'ease-out' || blueBallAnimation == 'cubic-bezier(0,0,0.58,1)');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -28,17 +28,17 @@ localeTitle: 使用 CSS 线性渐变创建条纹元素
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>repeating-linear-gradient()</code> 的渐变角度应该为 <code>45deg</code>。'
|
||||
testString: 'assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi), ''<code>repeating-linear-gradient()</code> 的渐变角度应该为 <code>45deg</code>。'');'
|
||||
testString: assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi));
|
||||
- text: '<code>repeating-linear-gradient()</code> 的渐变角度应该不在是 <code>90deg</code>。'
|
||||
testString: assert(!code.match(/90deg/gi), '<code>repeating-linear-gradient()</code> 的渐变角度不应该是 <code>90deg</code>。');
|
||||
testString: assert(!code.match(/90deg/gi));
|
||||
- text: '<code>0px</code> 处的渐变颜色应该为 <code>yellow</code>。'
|
||||
testString: assert(code.match(/yellow\s+?0px/gi), '<code>0px</code> 处的渐变颜色应该为 <code>yellow</code>。');
|
||||
testString: assert(code.match(/yellow\s+?0(px)?/gi));
|
||||
- text: '<code>40px</code> 处的第一个渐变颜色应该为 <code>yellow</code>。'
|
||||
testString: assert(code.match(/yellow\s+?40px/gi), '<code>40px</code> 处的第一个渐变颜色应该为 <code>yellow</code>。');
|
||||
testString: assert(code.match(/yellow\s+?40px/gi));
|
||||
- text: '<code>40px</code> 处的第二个渐变颜色应该为 <code>black</code>。'
|
||||
testString: assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi), '<code>40px</code> 处的第二个渐变颜色应该为 <code>black</code>。');
|
||||
testString: assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi));
|
||||
- text: '<code>80px</code> 处最后一个渐变颜色应该为 <code>black</code>。'
|
||||
testString: assert(code.match(/black\s+?80px/gi), '<code>80px</code> 处最后一个渐变颜色应该为 <code>black</code>。');
|
||||
testString: assert(code.match(/black\s+?80px/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -43,9 +43,9 @@ localeTitle: 使用CSS动画更改按钮的悬停状态
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>@keyframes</code> 规则的 <code>animation-name</code> 应该是 background-color。'
|
||||
testString: assert(code.match(/@keyframes\s+?background-color\s*?{/g), '<code>@keyframes</code> 规则的 <code>animation-name</code> 应该是 background-color。');
|
||||
testString: assert(code.match(/@keyframes\s+?background-color\s*?{/g));
|
||||
- text: '在 <code>@keyframes</code> 的 <code>100%</code> 条目里应该把 <code>background-color</code> 改成 <code>#4791d0</code>。'
|
||||
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi), ''在 <code>@keyframes</code> 的 <code>100%</code> 条目里应该把 <code>background-color</code> 改成 <code>#4791d0</code>。'');'
|
||||
testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@ p {
|
||||
```yml
|
||||
tests:
|
||||
- text: 'id 为 <code>bottom</code> 的元素应该沿着 X 轴翻转 24 度。'
|
||||
testString: 'assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g), ''id 为 <code>bottom</code> 的元素应该沿着 X 轴翻转 24 度。'');'
|
||||
testString: assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ localeTitle: 使用 CSS Transform skex 属性沿Y轴倾斜元素
|
||||
```yml
|
||||
tests:
|
||||
- text: 'id 为 <code>top</code> 的元素应该沿着 Y 轴翻转 -10 度。'
|
||||
testString: 'assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g), ''id 为 <code>top</code> 的元素应该沿着 Y 轴翻转 -10 度。'');'
|
||||
testString: assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -30,7 +30,7 @@ p {
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#ball2</code> 的 <code>transform</code> 属性应该为原始大小的 1.5 倍。'
|
||||
testString: 'assert(code.match(/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi), ''<code>#ball2</code> 的 <code>transform</code> 属性应该为原始大小的 1.5 倍。'');'
|
||||
testString: assert(code.match(/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -33,7 +33,7 @@ p:hover {
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>div</code> 元素在悬停时大小应该缩放到原始大小的 1.1 倍。'
|
||||
testString: 'assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi), ''<code>div</code> 元素在悬停时大小应该缩放到原始大小的 1.1 倍。'');'
|
||||
testString: assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -24,9 +24,9 @@ localeTitle: 使用 em 标签强调文本
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该添加一个 <code>em</code> 标签。'
|
||||
testString: assert($('em').length == 1, '你应该添加一个 <code>em</code> 标签。');
|
||||
testString: assert($('em').length == 1);
|
||||
- text: '<code>em</code> 标签应该嵌套在 <code>p</code> 标签里面。'
|
||||
testString: assert($('p').children().length == 1 && $('em').children().length == 2, '<code>em</code> 标签应该嵌套在 <code>p</code> 标签里面。');
|
||||
testString: assert($('p').children().length == 1 && $('em').children().length == 2);
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -24,11 +24,11 @@ localeTitle: 使用 s 标签给文本添加删除线
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该添加一个 <code>s</code> 标签。'
|
||||
testString: assert($('s').length == 1, '你应该添加一个<code>s</code>标签。');
|
||||
testString: assert($('s').length == 1);
|
||||
- text: ' <code>s</code> 标签应该在 <code>h4</code> 标签内的 Google 文字外面，它不应该包含单词 Alphabet。'
|
||||
testString: assert($('s').text().match(/Google/gi) && !$('s').text().match(/Alphabet/gi), '<code>s</code> 标签应该在 <code>h4</code> 标签内的 Google 文字外面，它不应该包含单词 Alphabet。');
|
||||
testString: assert($('h4 > s').text().match(/Google/gi) && !$('h4 > s').text().match(/Alphabet/gi));
|
||||
- text: '<code>h4</code> 标签内应该有单词 Alphabet，Alphabet 应该没有删除线样式。'
|
||||
testString: assert($('h4').html().match(/Alphabet/gi), '<code>h4</code> 标签内应该有单词 Alphabet，Alphabet 应该没有删除线样式。');
|
||||
testString: assert($('h4').html().match(/Alphabet/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -24,11 +24,11 @@ localeTitle: 使用 strong 标签加粗文本
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该有一个 <code>strong</code> 标签。'
|
||||
testString: assert($('strong').length == 1, '你应该有一个 <code>strong</code> 标签。');
|
||||
testString: assert($('strong').length == 1);
|
||||
- text: '<code>strong</code> 标签应该在 <code>p</code> 标签里。'
|
||||
testString: assert($('p').children('strong').length == 1, '<code>strong</code> 标签应该在 <code>p</code> 标签里。');
|
||||
testString: assert($('p').children('strong').length == 1);
|
||||
- text: '<code>strong</code> 标签应该包围 “斯坦福大学”。'
|
||||
testString: assert($('strong').text().match(/^斯坦福大学$/gi), '<code>strong</code> 标签应该包围 “斯坦福大学”。');
|
||||
testString: assert($('strong').text().match(/^Stanford University$/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -25,9 +25,9 @@ CSS 里面的 <code>text-transform</code> 属性来改变英文中字母的大
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h4</code> 内的英文的所有字母应该为大写。'
|
||||
testString: assert($('h4').css('text-transform') === 'uppercase', '<code>h4</code> 内的英文的所有字母应该为大写。');
|
||||
testString: assert($('h4').css('text-transform') === 'uppercase');
|
||||
- text: '<code>h4</code> 内的原文不能被改变。'
|
||||
testString: assert(($('h4').text() !== $('h4').text().toUpperCase()), '<code>h4</code> 内的原文不能被改变。');
|
||||
testString: assert(($('h4').text() !== $('h4').text().toUpperCase()));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -120,5 +120,6 @@ tests:
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -94,5 +94,6 @@ tests:
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -26,7 +26,7 @@ tests:
|
||||
- text: '图片元素应具有 "thick-green-border" class 属性。'
|
||||
testString: assert($("img").hasClass("thick-green-border"));
|
||||
- text: '图片应含有<code>10px</code>的边框圆角。'
|
||||
testString: assert(parseInt($("img").css("border-top-left-radius")) > 8);
|
||||
testString: assert($("img").css("border-top-left-radius") === '10px' && $("img").css("border-top-right-radius") === '10px' && $("img").css("border-bottom-left-radius") === '10px' && $("img").css("border-bottom-right-radius") === '10px');
|
||||
|
||||
```
|
||||
|
||||
@ -109,5 +109,6 @@ tests:
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -86,7 +86,7 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -32,9 +32,9 @@ background: var(--penguin-skin, black);
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>penguin-top</code> class 的<code>background</code>属性应设置一个<code>black</code>备用颜色。'
|
||||
testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi));'
|
||||
testString: assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi));
|
||||
- text: '<code>penguin-bottom</code> class 的<code>background</code>属性应设置一个<code>black</code>备用颜色。'
|
||||
testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi));'
|
||||
testString: assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@ localeTitle: 更改特定区域的变量
|
||||
```yml
|
||||
tests:
|
||||
- text: '应该在<code>penguin</code>clas 里重定义<code>--penguin-belly</code>的变量值，且它的值为<code>white</code>。'
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi));'
|
||||
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -27,9 +27,9 @@ localeTitle: 更改文本的颜色
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h2</code>元素应该为红色。'
|
||||
testString: assert($("h2").css("color") === "rgb(255, 0, 0)");
|
||||
testString: assert($("h2").attr('style'));
|
||||
- text: '<code>h2</code>元素的<code>style</code>属性值应该以<code>;</code>结束。'
|
||||
testString: 'assert(code.match(/<h2\s+style\s*=\s*(\''|")\s*color\s*:\s*(?:rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|red|#ff0000|#f00|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*\;(\''|")>\s*CatPhotoApp\s*<\/h2>/));'
|
||||
testString: assert($("h2").css("color") === "rgb(255, 0, 0)");
|
||||
- text: '<code>style</code> 声明应该以 <code>;</code> 结尾'
|
||||
testString: assert($("h2").attr('style') && $("h2").attr('style').endsWith(';'));
|
||||
|
||||
@ -88,5 +88,6 @@ tests:
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -30,7 +30,7 @@ h1 {
|
||||
```yml
|
||||
tests:
|
||||
- text: '在<code>style</code>样式声明区域里，<code>p</code>元素的<code>font-size</code>的值应为<code>16px</code>，浏览器和文本缩放应设置为 100％。'
|
||||
testString: 'assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));'
|
||||
testString: assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));
|
||||
|
||||
```
|
||||
|
||||
@ -93,5 +93,6 @@ tests:
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -30,7 +30,7 @@ localeTitle: 创建一个自定义的 CSS 变量
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>penguin</code> class 里应声明<code>--penguin-skin</code>变量，且赋值为<code>gray</code>。'
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi));'
|
||||
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -30,11 +30,11 @@ localeTitle: 引入谷歌字体
|
||||
```yml
|
||||
tests:
|
||||
- text: '引入<code>Lobster</code>字体。'
|
||||
testString: assert(new RegExp("gdgdocs|googleapis", "gi").test(code));
|
||||
testString: assert(new RegExp("googleapis", "gi").test(code));
|
||||
- text: '<code>h2</code>元素必须使用<code>Lobster</code>字体。'
|
||||
testString: assert($("h2").css("font-family").match(/lobster/i));
|
||||
- text: '使用<code>h2</code>选择器去改变字体样式。'
|
||||
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\''|")?Lobster(\''|")?\s*;\s*\}/gi.test(code));'
|
||||
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?(.{0,})\s*;\s*\}/gi.test(code));'
|
||||
- text: '<code>p</code>元素应该保持使用<code>monospace</code>字体。'
|
||||
testString: assert($("p").css("font-family").match(/monospace/i));
|
||||
|
||||
|
||||
@ -30,7 +30,7 @@ tests:
|
||||
- text: '<code>h1</code>元素的文本内容应该为<code>Hello World</code>。'
|
||||
testString: assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)));
|
||||
- text: '确保<code>h1</code>元素具有结束标记。'
|
||||
testString: assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length, '确保<code>h1</code>元素具有结束标记。');
|
||||
testString: assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length);
|
||||
- text: '<code>body</code>元素的<code>color</code>属性值应为<code>green</code>。'
|
||||
testString: assert(($("body").css("color") === "rgb(0, 128, 0)"));
|
||||
- text: '<code>body</code>元素的<code>font-family</code>属性值应为<code>monospace</code>。'
|
||||
@ -70,5 +70,6 @@ tests:
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -25,7 +25,7 @@ tests:
|
||||
- text: '你图片的边框圆角应设置为<code>50%</code>，让它看起来就像一个完整的圆。'
|
||||
testString: assert(parseInt($("img").css("border-top-left-radius")) > 48);
|
||||
- text: '请确保百分值为<code>50%</code>。'
|
||||
testString: assert(code.match(/50%/g), '请确保百分值为<code>50%</code>。');
|
||||
testString: assert(code.match(/50%/g));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -35,9 +35,9 @@ tests:
|
||||
- text: '<code>h1</code>元素应该包含一个名为<code>orange-text</code>的id。'
|
||||
testString: assert($("h1").attr("id") === "orange-text");
|
||||
- text: '<code>h1</code>元素应该包含<code>color: white</code>的行内样式声明。'
|
||||
testString: 'assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));'
|
||||
testString: assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));
|
||||
- text: '<code>pink-text</code> class 声明应该含有<code>!important</code>关键字。'
|
||||
testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g));'
|
||||
testString: assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g));
|
||||
- text: '<code>h1</code>元素的字体颜色应该为粉色。'
|
||||
testString: assert($("h1").css("color") === "rgb(255, 192, 203)");
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@ tests:
|
||||
- text: '<code>h1</code>元素应该含有<code>pink-text</code> class。'
|
||||
testString: assert($("h1").hasClass("pink-text"));
|
||||
- text: '<code><style></code>标签应该含有一个可以改变字体颜色的<code>pink-text</code> class。'
|
||||
testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g));'
|
||||
testString: assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g));
|
||||
- text: '<code>h1</code>元素的字体颜色应该为<code>pink（粉色）</code>。'
|
||||
testString: assert($("h1").css("color") === "rgb(255, 192, 203)");
|
||||
|
||||
|
||||
@ -115,5 +115,6 @@ tests:
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -34,7 +34,7 @@ CSS 的<code>width</code>属性可以控制元素的宽度。图片的<code>widt
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>img</code>元素应该含有<code>smaller-image</code> class。'
|
||||
testString: 'assert($("img[src=''https://bit.ly/fcc-relaxing-cat'']").attr(''class'') === "smaller-image");'
|
||||
testString: assert($("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class') === "smaller-image");
|
||||
- text: '图片宽度应为 100px（像素），且浏览器缩放应为默认 100%。'
|
||||
testString: assert($("img").width() === 100);
|
||||
|
||||
|
||||
@ -37,7 +37,7 @@ tests:
|
||||
- text: '<code>h2</code>元素应该含有<code>Lobster</code>字体。'
|
||||
testString: assert($("h2").css("font-family").match(/^"?lobster/i));
|
||||
- text: '当<code>Lobster</code>字体失效时，<code>h2</code>元素应该降级使用<code>monospace</code>字体。'
|
||||
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\''|")?Lobster(\''|")?,\s*monospace\s*;\s*\}/gi.test(code));'
|
||||
testString: assert(/\s*h2\s*\{\s*font-family\:\s*(\'|")?Lobster(\'|")?,\s*monospace\s*;\s*\}/gi.test(code));
|
||||
- text: '通过添加<code><!--</code>，注释掉谷歌<code>Lobster</code>字体的引入。'
|
||||
testString: assert(new RegExp("<!--[^fc]", "gi").test(code));
|
||||
- text: '确保注释要以<code>--></code>结束。'
|
||||
|
||||
@ -27,11 +27,11 @@ tests:
|
||||
- text: '<code>h2</code>元素应该含有<code>red-text</code> class 选择器。'
|
||||
testString: assert($("h2").hasClass("red-text"));
|
||||
- text: '第一个<code>p</code>元素应该为红色。'
|
||||
testString: 'assert($("p:eq(0)").css("color") === "rgb(255, 0, 0)");'
|
||||
testString: assert($("p:eq(0)").css("color") === "rgb(255, 0, 0)");
|
||||
- text: '第二和第三个<code>p</code>元素不应该为红色。'
|
||||
testString: 'assert(!($("p:eq(1)").css("color") === "rgb(255, 0, 0)") && !($("p:eq(2)").css("color") === "rgb(255, 0, 0)"));'
|
||||
testString: assert(!($("p:eq(1)").css("color") === "rgb(255, 0, 0)") && !($("p:eq(2)").css("color") === "rgb(255, 0, 0)"));
|
||||
- text: '第一个<code>p</code>元素应该包含<code>red-text</code> class 选择器。'
|
||||
testString: 'assert($("p:eq(0)").hasClass("red-text"));'
|
||||
testString: assert($("p:eq(0)").hasClass("red-text"));
|
||||
|
||||
```
|
||||
|
||||
@ -51,7 +51,7 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
<p>点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
|
||||
@ -34,9 +34,9 @@ tests:
|
||||
- text: '<code>body</code>元素的<code>background-color</code>应该是黑色的。'
|
||||
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
|
||||
- text: '确保 CSS 规则格式书写正确，需要开关大括号。'
|
||||
testString: 'assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i));'
|
||||
testString: assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i));
|
||||
- text: '确保 CSS 规则要以分号结尾。'
|
||||
testString: 'assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i));'
|
||||
testString: assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@ tests:
|
||||
- text: '<code>red-box</code> class 应该含有<code>padding</code>属性。'
|
||||
testString: assert($('.red-box').css('padding-top') != '0px' && $('.red-box').css('padding-right') != '0px' && $('.red-box').css('padding-bottom') != '0px' && $('.red-box').css('padding-left') != '0px');
|
||||
- text: '<code>red-box</code> class 的<code>padding</code>值应为 1.5em。'
|
||||
testString: 'assert(code.match(/\.red-box\s*?{\s*?.*?\s*?.*?\s*?padding:\s*?1\.5em/gi));'
|
||||
testString: assert(code.match(/\.red-box\s*?{[\s\S]*padding:\s*?1\.5em/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -42,7 +42,7 @@ tests:
|
||||
- text: '<code>h2</code>元素应含有<code>red-text</code> class 选择器。'
|
||||
testString: assert($("h2").hasClass("red-text"));
|
||||
- text: '<code>style</code>样式声明区域里应该包含一个<code>red-text</code> class 选择器，并且它的颜色应为红色。'
|
||||
testString: 'assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g));'
|
||||
testString: assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g));
|
||||
- text: '不要在<code>h2</code>元素里使用行内样式：<code>style="color: red"</code>。'
|
||||
testString: assert($("h2").attr("style") === undefined);
|
||||
|
||||
@ -107,5 +107,6 @@ tests:
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -30,13 +30,13 @@ background: var(--penguin-skin);
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>penguin-top</code> class 的<code>background</code>属性应使用<code>--penguin-skin</code>变量值。'
|
||||
testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi));'
|
||||
testString: assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi));
|
||||
- text: '<code>penguin-bottom</code> class 的<code>background</code>属性应使用<code>--penguin-skin</code>变量值。'
|
||||
testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi));'
|
||||
testString: assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi));
|
||||
- text: '<code>right-hand</code> class 的<code>background</code>属性应使用<code>--penguin-skin</code>变量值。'
|
||||
testString: 'assert(code.match(/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi));'
|
||||
testString: assert(code.match(/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi));
|
||||
- text: '<code>left-hand</code> class 的<code>background</code>属性应使用<code>--penguin-skin</code>变量值。'
|
||||
testString: 'assert(code.match(/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi));'
|
||||
testString: assert(code.match(/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -24,9 +24,9 @@ CSS 变量可以简化媒体查询的方式。
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>:root</code>中的<code>--penguin-size</code>值应为<code>200px</code>。'
|
||||
testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi));'
|
||||
testString: assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi));
|
||||
- text: '<code>:root</code>中的<code>--penguin-skin</code>值应为<code>black</code>。'
|
||||
testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi));'
|
||||
testString: assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -28,19 +28,19 @@ tests:
|
||||
- text: '文本内容为<code>I am red!</code>的<code>h1</code>元素的字体颜色应该为<code>red</code>。'
|
||||
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
- text: '要使用缩写的<code>red</code>的<code>十六进制编码</code>，而不是<code>#FF0000</code>。'
|
||||
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));'
|
||||
testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));
|
||||
- text: '文本内容为<code>I am green!</code>的<code>h1</code>元素的字体颜色应该为<code>green</code>。'
|
||||
testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
- text: '要使用缩写的<code>green</code>的<code>十六进制编码</code>，而不是<code>#00FF00</code>的十六进制编码。'
|
||||
testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));'
|
||||
testString: assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));
|
||||
- text: '文本内容为<code>I am cyan!</code>的<code>h1</code>元素的字体颜色应该为<code>cyan</code>。'
|
||||
testString: assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
|
||||
- text: '要使用缩写的<code>cyan</code>的<code>十六进制编码</code>，而不是<code>#00FFFF</code>的十六进制编码。'
|
||||
testString: 'assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));'
|
||||
testString: assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));
|
||||
- text: '文本内容为<code>I am fuchsia!</code>的<code>h1</code>元素的字体颜色应该为<code>fuchsia</code>。'
|
||||
testString: assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
|
||||
- text: '要使用缩写的<code>fuchsia</code>的<code>十六进制编码</code>，而不是<code>#FF00FF</code>的十六进制编码。'
|
||||
testString: 'assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));'
|
||||
testString: assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -91,5 +91,6 @@ tests:
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -33,7 +33,7 @@ tests:
|
||||
- text: '<code>blue-box</code> class 的左内边距应为<code>40px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-left") === "40px");
|
||||
- text: '你应该按照顺时针排序，汇总声明的方式来设置<code>blue-box</code>的<code>padding</code>值。'
|
||||
testString: assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code));
|
||||
testString: const removeCssComments = str => str.replace(/\/\*[\s\S]+?\*\//g, '');assert(/\.blue-box\s*{[\s\S]*padding[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(removeCssComments($('style').text())));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -106,5 +106,6 @@ tests:
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -24,11 +24,11 @@ localeTitle: 使用 CSS 变量一次更改多个元素
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>penguin</code> class 声明的<code>--penguin-skin</code>变量的值应为<code>gray</code>。'
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi));'
|
||||
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi));
|
||||
- text: '<code>penguin</code> class 声明的<code>--penguin-belly</code>变量的值应为<code>white</code>。'
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi));'
|
||||
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi));
|
||||
- text: '<code>penguin</code> class 声明的<code>--penguin-beak</code>变量的值应为<code>orange</code>。'
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi));'
|
||||
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -32,9 +32,9 @@ body {
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>body</code>元素的背景颜色应该是黑色。'
|
||||
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)";
|
||||
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
|
||||
- text: '使用<code>十六进制编码</code>来替换<code>black</code>的写法。'
|
||||
testString: 'assert(code.match(/body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi));'
|
||||
testString: assert(code.match(/body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -65,5 +65,6 @@ tests:
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -30,19 +30,19 @@ tests:
|
||||
- text: '文本内容为<code>I am red!</code>的<code>h1</code>元素的字体颜色应该为<code>red</code>。'
|
||||
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
- text: '使用<code>十六进制编码</code>替换<code>red</code>关键词。'
|
||||
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi));'
|
||||
testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi));
|
||||
- text: '文本内容为<code>I am green!</code>的<code>h1</code>元素的字体颜色应该为<code>green</code>。'
|
||||
testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
- text: '使用<code>十六进制编码</code>替换<code>green</code>关键词。'
|
||||
testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi));'
|
||||
testString: assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi));
|
||||
- text: '文本内容为<code>I am dodger blue!</code>的<code>h1</code>元素的字体颜色应该为<code>dodger blue</code>。'
|
||||
testString: assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
|
||||
- text: '使用<code>十六进制编码</code>替换<code>dodgerblue</code>关键词。'
|
||||
testString: 'assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi));'
|
||||
testString: assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi));
|
||||
- text: '文本内容为<code>I am orange!</code>的<code>h1</code>元素的字体颜色应该为<code>orange</code>。'
|
||||
testString: assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
|
||||
- text: '使用<code>十六进制编码</code>替换<code>orange</code>关键词。'
|
||||
testString: 'assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi));'
|
||||
testString: assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -26,19 +26,19 @@ tests:
|
||||
- text: '文本内容为<code>I am red!</code>的<code>h1</code>元素的字体颜色应该为<code>red</code>。'
|
||||
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
- text: '<code>red</code>颜色应使用<code>RGB</code>值。'
|
||||
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi));'
|
||||
testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi));
|
||||
- text: '文本内容为<code>I am orchid!</code>的<code>h1</code>元素的字体颜色应该为<code>orchid</code>。'
|
||||
testString: assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
|
||||
- text: '<code>orchid</code>颜色应使用<code>RGB</code>值。'
|
||||
testString: 'assert(code.match(/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi));'
|
||||
testString: assert(code.match(/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi));
|
||||
- text: '文本内容为<code>I am blue!</code>的<code>h1</code>元素的字体颜色应该为<code>blue</code>。'
|
||||
testString: assert($('.blue-text').css('color') === 'rgb(0, 0, 255)', '文本内容为<code>I am blue!</code>的<code>h1</code>元素的字体颜色应该为<code>blue</code>。');
|
||||
testString: assert($('.blue-text').css('color') === 'rgb(0, 0, 255)');
|
||||
- text: '<code>blue</code>颜色应使用<code>RGB</code>值。'
|
||||
testString: 'assert(code.match(/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi));'
|
||||
testString: assert(code.match(/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi));
|
||||
- text: '文本内容为<code>I am sienna!</code>的<code>h1</code>元素的字体颜色应该为<code>sienna</code>。'
|
||||
testString: assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)', '文本内容为<code>I am sienna!</code>的<code>h1</code>元素的字体颜色应该为<code>sienna</code>。');
|
||||
testString: assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)');
|
||||
- text: '<code>sienna</code>颜色应使用<code>RGB</code>值。'
|
||||
testString: 'assert(code.match(/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi));'
|
||||
testString: assert(code.match(/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -39,7 +39,7 @@ tests:
|
||||
- text: '<code>body</code>元素的背景颜色应该是黑色的。'
|
||||
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
|
||||
- text: '<code>body</code>元素的背景颜色的黑色值应该为<code>RGB</code>值。'
|
||||
testString: assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/ig)
|
||||
testString: assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/ig));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -25,11 +25,11 @@ localeTitle: 给表单添加提交按钮
|
||||
```yml
|
||||
tests:
|
||||
- text: '表单内部应该有一个按钮。'
|
||||
testString: assert($("form").children("button").length > 0, '表单内部应该有一个按钮。');
|
||||
testString: assert($("form").children("button").length > 0);
|
||||
- text: '按钮的<code>type</code>属性值应该为<code>submit</code>。'
|
||||
testString: assert($("button").attr("type") === "submit");
|
||||
- text: '提交按钮的文本应该为<code>提交</code>。'
|
||||
testString: assert($("button").text().match(/^\s*提交\s*$/gi));
|
||||
testString: assert($("button").text().match(/^\s*submit\s*$/gi));
|
||||
- text: '确保按钮有结束标记。'
|
||||
testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
|
||||
|
||||
|
||||
@ -35,11 +35,11 @@ localeTitle: 给网站添加图片
|
||||
```yml
|
||||
tests:
|
||||
- text: '网页应该有一张图片。'
|
||||
testString: assert($("img").length > 0);
|
||||
testString: assert($("img").length);
|
||||
- text: '图片 src 属性应该为 https://bit.ly/fcc-relaxing-cat。'
|
||||
testString: assert(/^https:\/\/bit\.ly\/fcc-relaxing-cat$/i.test($("img").attr("src")));
|
||||
- text: '图片必须有<code>alt</code>属性。'
|
||||
testString: assert(code.match(/alt\s*?=\s*?(\"|\').*(\"|\')/));
|
||||
testString: assert($("img").attr("alt") && $("img").attr("alt").length && /<img\S*alt=(['"])(?!\1|>)\S+\1\S*\/?>/.test(code.replace(/\s/g,'')));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -31,11 +31,11 @@ tests:
|
||||
- text: '表单应该有三个复选框。'
|
||||
testString: assert($('input[type="checkbox"]').length > 2);
|
||||
- text: '每个复选框都应该被嵌套进<code>label</code>元素中。'
|
||||
testString: 'assert($(''label > input[type="checkbox"]:only-child'').length > 2);'
|
||||
testString: assert($('label > input[type="checkbox"]:only-child').length > 2);
|
||||
- text: '确保<code>label</code>元素有结束标记。'
|
||||
testString: assert(code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length);
|
||||
- text: '设置复选框的<code>name</code>属性均为<code>personality</code>。'
|
||||
testString: assert($('label > input[type="checkbox"]').filter("[name='personality']").length > 2);
|
||||
testString: assert($('label > input[type="checkbox"]').filter('[name="personality"]').length > 2);
|
||||
- text: '每个复选框都应该在 <code>form</code> 标签内。'
|
||||
testString: assert($('label').parent().get(0).tagName.match('FORM'));
|
||||
|
||||
|
||||
@ -44,9 +44,9 @@ tests:
|
||||
- text: '页面上应该有两个单选按钮元素。'
|
||||
testString: assert($('input[type="radio"]').length > 1);
|
||||
- text: '设置单选按钮的<code>name</code>属性为<code>indoor-outdoor</code>。'
|
||||
testString: assert($('label > input[type="radio"]').filter("[name='indoor-outdoor']").length > 1);
|
||||
testString: assert($('input[type="radio"]').filter("[name='indoor-outdoor']").length > 1);
|
||||
- text: '每一个单选按钮都应该嵌套进它自己的<code>label</code>元素中。'
|
||||
testString: 'assert($(''label > input[type="radio"]:only-child'').length > 1);'
|
||||
testString: assert($('label > input[type="radio"]:only-child').length > 1);
|
||||
- text: '每一个<code>label</code>元素都有结束标记。'
|
||||
testString: assert((code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length));
|
||||
- text: '其中一个<code>label</code>元素的文本为<code>indoor</code>。'
|
||||
|
||||
@ -35,9 +35,9 @@ HTML 有一个特定的元素用于创建有序列表<code>ordered lists（缩
|
||||
```yml
|
||||
tests:
|
||||
- text: '页面应该有一个无序列表，内容是猫咪最喜欢的三件东西。'
|
||||
testString: assert((/猫咪最喜欢的三件东西：/i).test($("ul").prev().text()));
|
||||
testString: assert((/Top 3 things cats hate:/i).test($("ol").prev().text()));
|
||||
- text: '页面应该有一个有序列表，内容是猫咪最讨厌的三件东西。'
|
||||
testString: assert((/猫咪最讨厌的三件东西：/i).test($("ol").prev().text()));
|
||||
testString: assert((/Things cats love:/i).test($("ul").prev().text()));
|
||||
- text: '页面应该只有一个<code>ul</code>元素。'
|
||||
testString: assert.equal($("ul").length, 1);
|
||||
- text: '页面应该只有一个<code>ol</code>元素。'
|
||||
|
||||
@ -48,7 +48,7 @@ tests:
|
||||
- text: '<code>title</code>应该是<code>head</code>的子元素。'
|
||||
testString: assert(code.match(/<head>\s*?<title>\s*?.*?\s*?<\/title>\s*?<\/head>/gi));
|
||||
- text: '<code>h1</code>和<code>p</code>都应该是<code>body</code>的子元素。'
|
||||
testString: assert($('body').children('h1').length == 1 && $('body').children('p').length == 1);
|
||||
testString: assert(code.match(/<body>\s*?(((<h1>\s*?.*?\s*?<\/h1>\s*?)(<p>(.*\s*)*?<\/p>\s*?))|((<p>\s*?.*?\s*?<\/p>\s*?)(<h1>(.*\s*)*?<\/h1>\s*?)))<\/body>/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -24,11 +24,11 @@ localeTitle: 删除 HTML 元素
|
||||
```yml
|
||||
tests:
|
||||
- text: '删除<code>h1</code>元素。'
|
||||
testString: assert(($("h1").length == 0));
|
||||
testString: assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi));
|
||||
- text: '保留<code>h2</code>元素。'
|
||||
testString: assert(($("h2").length > 0));
|
||||
testString: assert(code.match(/<h2>[\w\W]*<\/h2>/gi));
|
||||
- text: '保留<code>p</code>元素。'
|
||||
testString: assert(($("p").length > 0));
|
||||
testString: assert(code.match(/<p>[\w\W]*<\/p>/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ tests:
|
||||
- text: '<code>h2</code>元素应该有结束标记。'
|
||||
testString: assert(code.match(/<\/h2>/g) && code.match(/<\/h2>/g).length === code.match(/<h2>/g).length);
|
||||
- text: '<code>h2</code>元素的内容应为：<code>CatPhotoApp</code>。'
|
||||
testString: assert.isTrue((/CatPhotoApp/gi).test($("h2").text()));
|
||||
testString: assert.isTrue((/cat(\s)?photo(\s)?app/gi).test($("h2").text()));
|
||||
- text: '<code>h1</code>元素的内容应为：<code>Hello World</code>。'
|
||||
testString: assert.isTrue((/hello(\s)+world/gi).test($("h1").text()));
|
||||
|
||||
|
||||
@ -36,11 +36,11 @@ HTML5 引入了很多更具描述性的 HTML 元素，例如：<code>header</cod
|
||||
```yml
|
||||
tests:
|
||||
- text: '页面中应该有两个段落。'
|
||||
testString: assert($("p").length > 1, '页面中应该有两个段落。');
|
||||
testString: assert($("p").length > 1);
|
||||
- text: '确保每个段落都有结束标记。'
|
||||
testString: assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length);
|
||||
- text: '新建的段落应该包含关键词：猫咪。'
|
||||
testString: assert.isTrue((/猫咪/).test($("p").text()));
|
||||
testString: assert.isTrue((/Purr\s+jump\s+eat/gi).test($("p").text()));
|
||||
- text: '代码中应该包含<code>main</code>元素。'
|
||||
testString: assert($('main').length === 1);
|
||||
- text: '<code>main</code>元素应有两个 <code>p</code>元素作为它的子元素。'
|
||||
|
||||
@ -28,7 +28,7 @@ tests:
|
||||
- text: '<code>a</code>元素的 <code>a</code> 文本应为：<code>cat photos</code>。'
|
||||
testString: assert((/cat photos/gi).test($("a").text()));
|
||||
- text: '<code>a</code>元素的<code>href</code>属性应为："<code>http://freecatphotoapp<wbr>.com</code>"。'
|
||||
testString: 'assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($("a").attr("href")));'
|
||||
testString: assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($("a").attr("href")));
|
||||
- text: '确保<code>a</code>元素有结束标记。'
|
||||
testString: assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length);
|
||||
|
||||
|
||||
@ -39,15 +39,15 @@ localeTitle: 将 a 嵌套在段落中
|
||||
```yml
|
||||
tests:
|
||||
- text: '你需要一个指向 "http://freecatphotoapp.com" 的 <code>a</code> 。'
|
||||
testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").length > 0 || $("a[href=\"http://www.freecatphotoapp.com\"]").length > 0));'
|
||||
testString: assert(($("a[href=\"http://freecatphotoapp.com\"]").length > 0 || $("a[href=\"http://www.freecatphotoapp.com\"]").length > 0));
|
||||
- text: '<code>a</code> 的文本应为：cat photos。'
|
||||
testString: assert($("a").text().match(/cat\sphotos/gi));
|
||||
- text: '在 <code>a</code> 的外部创建一个新段落，这样页面就有 3 个段落了。'
|
||||
testString: assert($("p") && $("p").length > 2);
|
||||
- text: '<code>a</code> 应嵌套在新段落内。'
|
||||
testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().is("p") || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().is("p")));'
|
||||
testString: assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().is("p") || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().is("p")));
|
||||
- text: '段落应该包含文本 View more（记得 more 后面有一个空格）。'
|
||||
testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi) || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi)));'
|
||||
testString: assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi) || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi)));
|
||||
- text: '<code>a</code> 不应该包含文本 View more。'
|
||||
testString: assert(!$("a").text().match(/View\smore/gi));
|
||||
- text: '确保每个段落有结束标记。'
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user