From 6737d42aced5cd8537be128e7002521591fad024 Mon Sep 17 00:00:00 2001 From: Derryk Boyd Date: Mon, 3 Oct 2022 19:44:39 -0600 Subject: [PATCH] fix: allow flex inside media queries when testing (#47787) Co-authored-by: Derryk Boyd --- .../build-a-product-landing-page.md | 9 ++++++--- .../build-a-product-landing-page.md | 9 ++++++--- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md index 98543460518..70afaee2f1a 100644 --- a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md +++ b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md @@ -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-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md b/curriculum/challenges/english/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md index 98543460518..70afaee2f1a 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md @@ -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--