Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Broken Test Case [Responsive Web Design - Basic CSS - Import a Google Font]

See original GitHub issue

Affected page Responsive Web Design - Basic CSS - Import a Google Font

Your code


<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
  .red-text {
    color: red;
  }

  p {
    font-size: 16px;
    font-family: monospace;
  }

  h2 {
    font-family : Lobster; // REPORTED BUG
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

  <div>
    <p>Things cats love:</p>
    <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
    </ul>
    <p>Top 3 things cats hate:</p>
    <ol>
      <li>flea treatment</li>
      <li>thunder</li>
      <li>other cats</li>
    </ol>
  </div>

  <form action="https://freecatphotoapp.com/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <label><input type="checkbox" name="personality" checked> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

Expected behavior Should pass all test cases 100%, but instead fails on the third test case “You should only use an h2 element selector to change the font”.

System (please complete the following information):

Device: Laptop
OS: Windows 8.1 Pro Latest Update
Browser: Firefox, Chrome, Opera
Version: Latest All

Additional context The bug exists at the rule declaration colon where adding a space breaks the test fixtures. The following piece of CSS doesn’t pass the tests, despite being valid and correct:

h2 {
    font-family : Lobster; // Extra space before colon
  }

While the following passes:

h2 {
    font-family: Lobster; // Removed space before colon
  }

Per the W3C Syntax and basic data types documentation, the declaration : property S* ':' S* value; regex is used to verify CSS rule declarations. I’d like to work on a fix for this if this will be fixed.