From 69d9d522a22f9cfbed9f6d79b5727c6f7b647b73 Mon Sep 17 00:00:00 2001
From: lasjorg <28780271+lasjorg@users.noreply.github.com>
Date: Wed, 27 Mar 2019 05:48:52 +0100
Subject: [PATCH] fix(challenge): fix broken regex (#35632)

* fix(challenge): fix broken regex

* fix(challenge): update solution
---
 ...patibility-with-browser-fallbacks.english.md | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.english.md
index e08bc07cdd..bc75fa696f 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.english.md
@@ -23,7 +23,7 @@ It looks like a variable is being used to set the background color of the <code>
 ```yml
 tests:
   - text: Your <code>.red-box</code> rule should include a fallback with the <code>background</code> set to red immediately before the existing <code>background</code> declaration.
-    testString: assert(code.match(/.red-box\s*{[^}]*background:\s*(red|#ff0000|#f00|rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*;\s*background:\s*var\(\s*--red-color\s*\);/gi), 'Your <code>.red-box</code> rule should include a fallback with the <code>background</code> set to red immediately before the existing <code>background</code> declaration.');
+    testString: assert(code.replace(/\s/g, "").match(/\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi));
 
 ```
 
@@ -59,8 +59,19 @@ tests:
 <section id='solution'>
 
 
-```js
-var code=".red-box {background: red; background: var(--red-color);}"
+```html
+<style>
+  :root {
+    --red-color: red;
+  }
+  .red-box {
+    background: red;
+    background: var(--red-color);
+    height: 200px;
+    width:200px;
+  }
+</style>
+<div class="red-box"></div>
 ```
 
 </section>