jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-04-17 16:00:50 -04:00
Code Issues Projects Releases Wiki Activity

fix: allow flex inside media queries when testing (#47787)

Browse Source 
Co-authored-by: Derryk Boyd <derryk@redmantech.com>
This commit is contained in:
Derryk Boyd
2022-10-03 19:44:39 -06:00
committed by GitHub
parent 3518d15d50
commit 6737d42ace
2 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
curriculum/challenges/english/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md
View File

@@ -254,12 +254,15 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
Your Product Landing Page should use CSS Flexbox at least once.
```js
const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display)
const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet)
const usesFlex = cssRules.find(rule => {
return rule.style?.display === 'flex' || rule.style?.display === 'inline-flex'
const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media')
const usesFlex = cssRules.find(rule => hasFlex(rule))
const usesFlexMedia = mediaRules.find(mediaRule => {
return [...mediaRule.cssRules].find(rule => hasFlex(rule))
})
assert(usesFlex)
assert(usesFlex || usesFlexMedia)
```
# --seed--

9
curriculum/challenges/english/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md
View File

@@ -254,12 +254,15 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
Your Product Landing Page should use CSS Flexbox at least once.
```js
const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display)
const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet)
const usesFlex = cssRules.find(rule => {
return rule.style?.display === 'flex' || rule.style?.display === 'inline-flex'
const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media')
const usesFlex = cssRules.find(rule => hasFlex(rule))
const usesFlexMedia = mediaRules.find(mediaRule => {
return [...mediaRule.cssRules].find(rule => hasFlex(rule))
})
assert(usesFlex)
assert(usesFlex || usesFlexMedia)
```
# --seed--