fix(curriculum): changed test to use regex (#38770)

* changed test to use regex

* added width has to be spelt correctly

* added second width assertion

* add case insensitive flag

Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>

* fix: allow compilable CSS to pass

* add allowance of final property without semicolon

Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

curriculum/challenges/english/01-responsive-web-design/basic-css/size-your-images.english.md

@@ -25,7 +25,6 @@ For example, if we wanted to create a CSS class called <code>larger-image</code>
 ## Instructions
 <section id='instructions'>
 Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide.
-<strong>Note:</strong> Due to browser implementation differences, you may need to be at 100% zoom to pass the tests on this challenge.
 </section>
 
 ## Tests
@@ -35,8 +34,8 @@ Create a class called <code>smaller-image</code> and use it to resize the image
 tests:
   - text: Your <code>img</code> element should have the class <code>smaller-image</code>.
     testString: assert($("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class') === "smaller-image");
-  - text: Your image should be 100 pixels wide. Browser zoom should be at 100%.
-    testString: assert($("img").width() === 100);
+  - text: Your image should be 100 pixels wide.
+    testString: assert($("img").width() < 200 && code.match(/(?<=<style>([\s\S])*)\.smaller-image\s*{([\s\S]*;)?\s*width\s*:\s*100px\s*(;|})[\s\S]*(?=<\/style>)/i));
 
 ```