<p dir="auto">Challenge <a href="http://beta.freecodecamp.com/en/challenges/applied-visual-design/use-a-google-font" rel="nofollow">use-a-google-font</a> has an issue.<br>
User Agent is: <code class="notranslate">Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/602.4.8 (KHTML, like Gecko) Version/10.0.3 Safari/602.4.8</code>.<br>
Please describe how to reproduce this issue, and include links to screenshots if possible.</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="

&lt;link href=&quot;https://fonts.googleapis.com/css?family=Open+Sans&quot;
      rel=&quot;stylesheet&quot;&gt;

&lt;style&gt;
  body {
    font-family:&quot;Open Sans&quot;,sans-serif;
  }
  h4 {
    text-align: center;
    background-color: rgba(45, 45, 45, 0.1);
    padding: 10px;
    font-size: 27px;
    text-transform: uppercase;
  }
  p {
    text-align: justify;
  }
  .links {
    text-align: left;
    color: black;
    opacity: 0.7;
  }
  #thumbnail {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }
  .fullCard {
    width: 245px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
  .cardText {
    margin-bottom: 30px;
  }
&lt;/style&gt;

&lt;div class=&quot;fullCard&quot; id=&quot;thumbnail&quot;&gt;
  &lt;div class=&quot;cardContent&quot;&gt;
    &lt;div class=&quot;cardText&quot;&gt;
      &lt;h4&gt;Alphabet&lt;/h4&gt;
      &lt;hr&gt;
      &lt;em&gt;&lt;p&gt;Google was founded by Larry Page and Sergey Brin while they were &lt;u&gt;Ph.D. students&lt;/u&gt; at &lt;strong&gt;Stanford University&lt;/strong&gt;.&lt;/p&gt;&lt;/em&gt;
    &lt;/div&gt;
    &lt;div class=&quot;cardLinks&quot;&gt;
      &lt;a href=&quot;https://en.wikipedia.org/wiki/Larry_Page&quot; target=&quot;_blank&quot; class=&quot;links&quot;&gt;Larry Page&lt;/a&gt;&lt;br&gt;&lt;br&gt;
      &lt;a href=&quot;https://en.wikipedia.org/wiki/Sergey_Brin&quot; target=&quot;_blank&quot; class=&quot;links&quot;&gt;Sergey Brin&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">link</span> <span class="pl-c1">href</span>="<span class="pl-s">https://fonts.googleapis.com/css?family=Open+Sans</span>"
      <span class="pl-c1">rel</span>="<span class="pl-s">stylesheet</span>"<span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
  <span class="pl-ent">body</span> {
    <span class="pl-c1">font-family</span><span class="pl-kos">:</span><span class="pl-s">"Open Sans"</span><span class="pl-kos">,</span>sans-serif;
  }
  <span class="pl-ent">h4</span> {
    <span class="pl-c1">text-align</span><span class="pl-kos">:</span> center;
    <span class="pl-c1">background-color</span><span class="pl-kos">:</span> <span class="pl-en">rgba</span>(<span class="pl-c1">45</span><span class="pl-kos">,</span> <span class="pl-c1">45</span><span class="pl-kos">,</span> <span class="pl-c1">45</span><span class="pl-kos">,</span> <span class="pl-c1">0.1</span>);
    <span class="pl-c1">padding</span><span class="pl-kos">:</span> <span class="pl-c1">10<span class="pl-smi">px</span></span>;
    <span class="pl-c1">font-size</span><span class="pl-kos">:</span> <span class="pl-c1">27<span class="pl-smi">px</span></span>;
    <span class="pl-c1">text-transform</span><span class="pl-kos">:</span> uppercase;
  }
  <span class="pl-ent">p</span> {
    <span class="pl-c1">text-align</span><span class="pl-kos">:</span> justify;
  }
  .<span class="pl-c1">links</span> {
    <span class="pl-c1">text-align</span><span class="pl-kos">:</span> left;
    <span class="pl-c1">color</span><span class="pl-kos">:</span> black;
    <span class="pl-c1">opacity</span><span class="pl-kos">:</span> <span class="pl-c1">0.7</span>;
  }
  <span class="pl-kos">#</span><span class="pl-c1">thumbnail</span> {
    <span class="pl-c1">box-shadow</span><span class="pl-kos">:</span> <span class="pl-c1">0</span> <span class="pl-c1">10<span class="pl-smi">px</span></span> <span class="pl-c1">20<span class="pl-smi">px</span></span> <span class="pl-en">rgba</span>(<span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">0.19</span>)<span class="pl-kos">,</span> <span class="pl-c1">0</span> <span class="pl-c1">6<span class="pl-smi">px</span></span> <span class="pl-c1">6<span class="pl-smi">px</span></span> <span class="pl-en">rgba</span>(<span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">0.23</span>);
  }
  .<span class="pl-c1">fullCard</span> {
    <span class="pl-c1">width</span><span class="pl-kos">:</span> <span class="pl-c1">245<span class="pl-smi">px</span></span>;
    <span class="pl-c1">border</span><span class="pl-kos">:</span> <span class="pl-c1">1<span class="pl-smi">px</span></span> solid <span class="pl-pds"><span class="pl-kos">#</span>ccc</span>;
    <span class="pl-c1">border-radius</span><span class="pl-kos">:</span> <span class="pl-c1">5<span class="pl-smi">px</span></span>;
    <span class="pl-c1">margin</span><span class="pl-kos">:</span> <span class="pl-c1">10<span class="pl-smi">px</span></span> <span class="pl-c1">5<span class="pl-smi">px</span></span>;
    <span class="pl-c1">padding</span><span class="pl-kos">:</span> <span class="pl-c1">4<span class="pl-smi">px</span></span>;
  }
  .<span class="pl-c1">cardContent</span> {
    <span class="pl-c1">padding</span><span class="pl-kos">:</span> <span class="pl-c1">10<span class="pl-smi">px</span></span>;
  }
  .<span class="pl-c1">cardText</span> {
    <span class="pl-c1">margin-bottom</span><span class="pl-kos">:</span> <span class="pl-c1">30<span class="pl-smi">px</span></span>;
  }
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">fullCard</span>" <span class="pl-c1">id</span>="<span class="pl-s">thumbnail</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">cardContent</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">cardText</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">h4</span><span class="pl-kos">&gt;</span>Alphabet<span class="pl-kos">&lt;/</span><span class="pl-ent">h4</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">hr</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">em</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>Google was founded by Larry Page and Sergey Brin while they were <span class="pl-kos">&lt;</span><span class="pl-ent">u</span><span class="pl-kos">&gt;</span>Ph.D. students<span class="pl-kos">&lt;/</span><span class="pl-ent">u</span><span class="pl-kos">&gt;</span> at <span class="pl-kos">&lt;</span><span class="pl-ent">strong</span><span class="pl-kos">&gt;</span>Stanford University<span class="pl-kos">&lt;/</span><span class="pl-ent">strong</span><span class="pl-kos">&gt;</span>.<span class="pl-kos">&lt;/</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">em</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">cardLinks</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">href</span>="<span class="pl-s">https://en.wikipedia.org/wiki/Larry_Page</span>" <span class="pl-c1">target</span>="<span class="pl-s">_blank</span>" <span class="pl-c1">class</span>="<span class="pl-s">links</span>"<span class="pl-kos">&gt;</span>Larry Page<span class="pl-kos">&lt;/</span><span class="pl-ent">a</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">br</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">br</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">href</span>="<span class="pl-s">https://en.wikipedia.org/wiki/Sergey_Brin</span>" <span class="pl-c1">target</span>="<span class="pl-s">_blank</span>" <span class="pl-c1">class</span>="<span class="pl-s">links</span>"<span class="pl-kos">&gt;</span>Sergey Brin<span class="pl-kos">&lt;/</span><span class="pl-ent">a</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<h4 dir="auto">Issue Description</h4>
<p dir="auto">This is for the feature/curriculum-expansion branch only when run locally, and NOT the staging branch.</p>
<p dir="auto">For several challenges (challengeType: 0, using the code editor with the mobile-phone output layout), the jQuery method .css() doesn't seem to be accessing the styles applied in a <code class="notranslate">style</code> tag in the given code. This is affecting any assert tests that use a pattern of <code class="notranslate">assert($('selector').css('propertyToCheck') == 'valueToCompare', 'message: ...');</code>.Here's an example:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;style&gt;
 h2 {
   position: relative; 
   top: 15px;
 }
&lt;/style&gt;
&lt;body&gt;
  &lt;h1&gt;On Being Well-Positioned&lt;/h1&gt;
  &lt;h2 class=&quot;testCode&quot;&gt;Move me!&lt;/h2&gt;
  &lt;p&gt;I still think the h2 is where it normally sits.&lt;/p&gt;
&lt;/body&gt;
&lt;script&gt;
  console.log($('h2').attr('class')); // Works great, returns testCode
  console.log($('h2').css('position')); // returns undefined
  console.log($('h2').css('top')); // returns undefined
&lt;/script&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
 <span class="pl-ent">h2</span> {
   <span class="pl-c1">position</span><span class="pl-kos">:</span> relative; 
   <span class="pl-c1">top</span><span class="pl-kos">:</span> <span class="pl-c1">15<span class="pl-smi">px</span></span>;
 }
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span>On Being Well-Positioned<span class="pl-kos">&lt;/</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">h2</span> <span class="pl-c1">class</span>="<span class="pl-s">testCode</span>"<span class="pl-kos">&gt;</span>Move me!<span class="pl-kos">&lt;/</span><span class="pl-ent">h2</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>I still think the h2 is where it normally sits.<span class="pl-kos">&lt;/</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">'h2'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">attr</span><span class="pl-kos">(</span><span class="pl-s">'class'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// Works great, returns testCode</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">'h2'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">css</span><span class="pl-kos">(</span><span class="pl-s">'position'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// returns undefined</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">'h2'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">css</span><span class="pl-kos">(</span><span class="pl-s">'top'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// returns undefined</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Related assert tests that aren't passing:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="assert($('h2').css('position') == 'relative', 'message: Add a CSS rule to specify that the &lt;code&gt;h2&lt;/code&gt; has a &lt;code&gt;position&lt;/code&gt; set to &lt;code&gt;relative&lt;/code&gt;.');

assert($('h2').css('top') == '15px', 'message: Use a CSS offset to relatively position the &lt;code&gt;h2&lt;/code&gt; 15px away from the &lt;code&gt;top&lt;/code&gt; of where it normally sits.');"><pre class="notranslate"><span class="pl-en">assert</span><span class="pl-kos">(</span><span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">'h2'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">css</span><span class="pl-kos">(</span><span class="pl-s">'position'</span><span class="pl-kos">)</span> <span class="pl-c1">==</span> <span class="pl-s">'relative'</span><span class="pl-kos">,</span> <span class="pl-s">'message: Add a CSS rule to specify that the &lt;code&gt;h2&lt;/code&gt; has a &lt;code&gt;position&lt;/code&gt; set to &lt;code&gt;relative&lt;/code&gt;.'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-en">assert</span><span class="pl-kos">(</span><span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">'h2'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">css</span><span class="pl-kos">(</span><span class="pl-s">'top'</span><span class="pl-kos">)</span> <span class="pl-c1">==</span> <span class="pl-s">'15px'</span><span class="pl-kos">,</span> <span class="pl-s">'message: Use a CSS offset to relatively position the &lt;code&gt;h2&lt;/code&gt; 15px away from the &lt;code&gt;top&lt;/code&gt; of where it normally sits.'</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h4 dir="auto">Browser Information</h4>
<ul dir="auto">
<li>Browser Name, Version: Firefox 48.0.1</li>
<li>Operating System: Mac OS X, El Capitan v10.11.3</li>
<li>Mobile, Desktop, or Tablet:</li>
</ul>