Apply a Style Until a Condition is Met with @while Test Case Failure

Tell us what’s happening:
Font-size is getting updated to the requirement for valid test cases but the automatic test cases against the output fails…

Your code so far

<style type='text/sass'>
  @while $x < 11{
    .text-#{$x} { font-size:5px * $x; }

<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>
<p class="text-6">Hello</p>
<p class="text-7">Hello</p>
<p class="text-8">Hello</p>
<p class="text-9">Hello</p>
<p class="text-10">Hello</p>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:

Please check followign trhead

1 Like

Hi @NULL_dev,

I tried that but the lowest I can set to on chrome is 6 px.

I’m running with chrome Version 67.0.3396.99 which already allows adjust the minimum font using advanced settings extension but there is a limit 6 px.

Is the test case for this exercise on the browser output?

Yes, Seems firefox comes with lower 6px for minimum size.(make you you set non for minimum font-size in FF setting)

Note: I don’t know why! but you may need to try some run to get the pass with FF!

Just reported it, thanks comrade for pointing out the issue, really appreciate it.

Thanks for your input @NULL_dev.

I installed Firefox but still running into the same issue, even went into about:config and changes all to 0 for minimum font size.

Also tried with safari browser.

I think this test case needs to be re-written perhaps.

Much appreciated for the timely feedback and best of luck.

As I checked with FF, it seems it fails. but it’s all about luck. If you set min as none(anything) try to rerun the test several times and hope the SASS goes before FCC test hit(it’s completely random, you just need luck about it)

I hope you could get one lucky hit soon.

To pass this test in your brackets you need:

  1. Add space before your property
  2. Delete space before value of this property
  3. Delete space after value of this property
  4. Add space after multiplication operator
  5. Add space after semicolon


.selector { property:value* $variable; }

Thx it worked with your tip!

{ property:value* $variable; }

I tried with Chrome(Version 67.0.3396.99 (Official Build) (64-bit)) and Firefox(Version 67.0.3396.99 (Official Build) (64-bit)) on Fedora 28 with no luck and found this thread. I tried clearing the cache, tried setting the minimum font size in both browsers, tried removing spaces from the code to match the challenge and was never able to pass tests. I moved to another computer entirely and was able to pass the tests there. I’ll try to remember to update this post with the Chrome version from that computer but the other differences are network speed(passed on a faster machine) and OS(passed on Windows 10, could not on Fedora 28). Hope that helps.

Frustrating these SASS challenges are all buggy. Wish I had the skills and knowledge to help fix. But “try this browser”, “add space here”, “remove a space here”, “spin around 3 times before hitting the submit button” (okay I made that up). Really not acceptable solutions and I’ve spent 10 times longer than it should have taken to get things to work. Very frustrated…

1 Like

setting minimum font size on Chrome Version 74.0.3729.169 (Official Build) (64-bit) works.

I set the minimum font size to 0 and ran the test. The test is passed. Nothing wrong with the code.

$i: 1;
@while $i < 11 {
    .text-#{$i} { font-size: 5px * $i;}
    $i: $i + 1;

It is a confirmed and fixed bug (on master).

You are not reproducing the bug correctly. You have to set the minimum font size above the font size the test is looking for. It can happen with other challenges as well that depend on browser minimum font size (issue with PR).

1 Like