fix(curriculum): tests for background-color in skyline project (#46489)

* fix(curriculum): better validation of properties with variable value

* more instances for which to use propValue

curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md

@@ -20,7 +20,7 @@ assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor
 You should use `var(--building-color1)` to set the `background-color` of the `.bb1a` element.
 
 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor.trim(), 'var(--building-color1)');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background-color', true), 'var(--building-color1)');
 ```
 
 # --seed--

curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md

@@ -20,7 +20,7 @@ assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor
 You should use `var(--building-color1)` to set the `background-color` of the `.bb1b` element.
 
 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor.trim(), 'var(--building-color1)');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.getPropVal('background-color', true), 'var(--building-color1)');
 ```
 
 The `background-color` of the `bb1c` element should be set.
@@ -32,7 +32,7 @@ assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor
 You should use `var(--building-color1)` to set the `background-color` of the `.bb1c` element.
 
 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor.trim(), 'var(--building-color1)');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.getPropVal('background-color', true), 'var(--building-color1)');
 ```
 
 The `background-color` of the `bb1d` element should be set.
@@ -44,7 +44,7 @@ assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor
 You should use `var(--building-color1)` to set the `background-color` of the `.bb1d` element.
 
 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor.trim(), 'var(--building-color1)');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background-color', true), 'var(--building-color1)');
 ```
 
 # --seed--

curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md

@@ -32,7 +32,7 @@ assert.exists(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor)
 You should set the `background-color` using the `--building-color2` variable.
 
 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor.trim(), 'var(--building-color2)');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2)');
 ```
 
 # --seed--

curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md

@@ -14,7 +14,7 @@ Hmm, I'm not sure why that didn't work. You can add a fallback value to a variab
 You should add a fallback value of `green` to the `background-color` property.
 
 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor.trim(), 'var(--building-color2, green)');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2,green)');
 ```
 
 # --seed--

curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e0.md

@@ -32,7 +32,7 @@ assert.exists(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor)
 You should set the `background-color` using the `--building-color3` variable with a fallback of `pink`.
 
 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor.trim(), 'var(--building-color3, pink)');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.getPropVal('background-color', true), 'var(--building-color3,pink)');
 ```
 
 # --seed--

curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md

@@ -14,13 +14,13 @@ Now that you've worked the bugs out and the buildings are the right colors, you
 You should remove the fallback in the `background-color` from `.bb2`.
 
 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor, 'var(--building-color2)');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2)');
 ```
 
 You should remove the fallback in the `background-color` from `.bb3`.
 
 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor.trim(), 'var(--building-color3)');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.getPropVal('background-color', true), 'var(--building-color3)');
 ```
 
 # --seed--

curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md

@@ -14,37 +14,37 @@ The skyline is coming together. Fill in the `background-color` property of the f
 You should give `.fb1` a `background-color` using `--building-color4`.
 
 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.backgroundColor.trim(), 'var(--building-color4)');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.getPropVal('background-color', true), 'var(--building-color4)');
 ```
 
 You should give `.fb2` a `background-color` using `--building-color3`.
 
 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.backgroundColor, 'var(--building-color3)');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.getPropVal('background-color', true), 'var(--building-color3)');
 ```
 
 You should give `.fb3` a `background-color` using `--building-color1`.
 
 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.backgroundColor, 'var(--building-color1)');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.getPropVal('background-color', true), 'var(--building-color1)');
 ```
 
 You should give `.fb4` a `background-color` using `--building-color1`.
 
 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.backgroundColor, 'var(--building-color1)');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.getPropVal('background-color', true), 'var(--building-color1)');
 ```
 
 You should give `.fb5` a `background-color` using `--building-color2`.
 
 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.backgroundColor, 'var(--building-color2)');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.getPropVal('background-color', true), 'var(--building-color2)');
 ```
 
 You should give `.fb6` a `background-color` using `--building-color3`.
 
 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.backgroundColor, 'var(--building-color3)');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.getPropVal('background-color', true), 'var(--building-color3)');
 ```
 
 # --seed--