Archives
/
readability
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix tests for readability to also work with jsdom

Browse Source 
For instance, jsdom's more spec-compliant parsing causes issues with auto-closing elements (lifehacker article) and with not having self-closing <img> and <br> tags. The former was fixed by removing offending markup, the latter by adjusting JSDOMParser to be more sane, and the expected outputs to cope with this.

Finally, JSDOMParser automatically drops comments. The test code needed to manually do this in the jsdom case.
pull/80/head
Gijs Kruitbosch 9 years ago
parent 7c60dba3b6
commit b1f6c62b25
16 changed files with 167 additions and 188 deletions
Show Stats Download Patch File Download Diff File

11
test/test-pages/001/expected.html
Unescape Escape View File

@ -18,9 +18,9 @@ help.</strong>
actually works…</p>
<blockquote class="twitter-tweet tw-align-center">
<p>Drinking game for web devs:
<br/>(1) Think of a noun
<br/>(2) Google "&lt;noun&gt;.js"
<br/>(3) If a library with that name exists - drink</p>— Shay Friedman (@ironshay)
<br>(1) Think of a noun
<br>(2) Google "&lt;noun&gt;.js"
<br>(3) If a library with that name exists - drink</p>— Shay Friedman (@ironshay)
<a
href="https://twitter.com/ironshay/statuses/370525864523743232">August 22, 2013</a>
</blockquote>
@ -120,8 +120,7 @@ describe("Cow", function() {
</ul>
<p>Running the tests now gives us something like this:</p>
<p>
<img alt="screenshot" src="http://fakehost/static/code/2013/blanket-coverage.png"
/>
<img alt="screenshot" src="http://fakehost/static/code/2013/blanket-coverage.png">
</p>
<p>As you can see, the report at the bottom highlights that we haven't actually
tested the case where an error is raised in case a target name is missing.
@ -138,4 +137,4 @@ sessions
</p>
</section>
</div>
</div>

58
test/test-pages/002/expected.html
Unescape Escape View File

@ -85,19 +85,19 @@
</div>
<p>The <code>fetch()</code> function’s arguments are the same as those passed
to the
<br/>
<br>
<code>Request()</code> constructor, so you may directly pass arbitrarily
complex requests to <code>fetch()</code> as discussed below.</p>
<h2>Headers</h2>
<p>Fetch introduces 3 interfaces. These are <code>Headers</code>, <code>Request</code> and
<br/>
<br>
<code>Response</code>. They map directly to the underlying HTTP concepts,
but have
<br/>certain visibility filters in place for privacy and security reasons,
<br>certain visibility filters in place for privacy and security reasons,
such as
<br/>supporting CORS rules and ensuring cookies aren’t readable by third parties.</p>
<br>supporting CORS rules and ensuring cookies aren’t readable by third parties.</p>
<p>The <a href="https://fetch.spec.whatwg.org/#headers-class">Headers interface</a> is
a simple multi-map of names to values:</p>
<div class="wp_syntax">
@ -117,7 +117,7 @@ reqHeaders.<span>append</span><span>(</span><span>"X-Custom-Header"</span><span>
</div>
<p>The same can be achieved by passing an array of arrays or a JS object
literal
<br/>to the constructor:</p>
<br>to the constructor:</p>
<div class="wp_syntax">
<table>
<tbody>
@ -155,25 +155,25 @@ console.<span>log</span><span>(</span>reqHeaders.<span>getAll</span><span>(</spa
</table>
</div>
<p>Some of these operations are only useful in ServiceWorkers, but they provide
<br/>a much nicer API to Headers.</p>
<br>a much nicer API to Headers.</p>
<p>Since Headers can be sent in requests, or received in responses, and have
various limitations about what information can and should be mutable, <code>Headers</code> objects
have a <strong>guard</strong> property. This is not exposed to the Web, but
it affects which mutation operations are allowed on the Headers object.
<br/>Possible values are:</p>
<br>Possible values are:</p>
<ul>
<li>“none”: default.</li>
<li>“request”: guard for a Headers object obtained from a Request (<code>Request.headers</code>).</li>
<li>“request-no-cors”: guard for a Headers object obtained from a Request
created
<br/>with mode “no-cors”.</li>
<br>with mode “no-cors”.</li>
<li>“response”: naturally, for Headers obtained from Response (<code>Response.headers</code>).</li>
<li>“immutable”: Mostly used for ServiceWorkers, renders a Headers object
<br/>read-only.</li>
<br>read-only.</li>
</ul>
<p>The details of how each guard affects the behaviors of the Headers object
are
<br/>in the <a href="https://fetch.spec.whatwg.org">specification</a>. For example,
<br>in the <a href="https://fetch.spec.whatwg.org">specification</a>. For example,
you may not append or set a “request” guarded Headers’ “Content-Length”
header. Similarly, inserting “Set-Cookie” into a Response header is not
allowed so that ServiceWorkers may not set cookies via synthesized Responses.</p>
@ -221,9 +221,9 @@ console.<span>log</span><span>(</span>req.<span>url</span><span>)</span><span>;<
</div>
<p>You may also pass a Request to the <code>Request()</code> constructor to
create a copy.
<br/>(This is not the same as calling the <code>clone()</code> method, which
<br>(This is not the same as calling the <code>clone()</code> method, which
is covered in
<br/>the “Reading bodies” section.).</p>
<br>the “Reading bodies” section.).</p>
<div class="wp_syntax">
<table>
<tbody>
@ -240,7 +240,7 @@ console.<span>log</span><span>(</span>copy.<span>url</span><span>)</span><span>;
<p>Again, this form is probably only useful in ServiceWorkers.</p>
<p>The non-URL attributes of the <code>Request</code> can only be set by passing
initial
<br/>values as a second argument to the constructor. This argument is a dictionary.</p>
<br>values as a second argument to the constructor. This argument is a dictionary.</p>
<div
class="wp_syntax">
<table>
@ -266,7 +266,7 @@ console.<span>log</span><span>(</span>copy.<span>url</span><span>)</span><span>;
<p>The <code>"same-origin"</code> mode is simple, if a request is made to another
origin with this mode set, the result is simply an error. You could use
this to ensure that
<br/>a request is always being made to your origin.</p>
<br>a request is always being made to your origin.</p>
<div class="wp_syntax">
<table>
<tbody>
@ -295,7 +295,7 @@ fetch<span>(</span>arbitraryUrl<span>,</span> <span>{</span> mode<span>:</span>
<p><code>"cors"</code> mode is what you’ll usually use to make known cross-origin
requests to access various APIs offered by other vendors. These are expected
to adhere to
<br/>the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">CORS protocol</a>.
<br>the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">CORS protocol</a>.
Only a <a href="https://fetch.spec.whatwg.org/#concept-filtered-response-cors">limited set</a> of
headers is exposed in the Response, but the body is readable. For example,
you could get a list of Flickr’s <a href="https://www.flickr.com/services/api/flickr.interestingness.getList.html">most interesting</a> photos
@ -330,7 +330,7 @@ apiCall.<span>then</span><span>(</span><span>function</span><span>(</span>respon
</div>
<p>You may not read out the “Date” header since Flickr does not allow it
via
<br/>
<br>
<code>Access-Control-Expose-Headers</code>.</p>
<div class="wp_syntax">
<table>
@ -345,21 +345,21 @@ apiCall.<span>then</span><span>(</span><span>function</span><span>(</span>respon
</div>
<p>The <code>credentials</code> enumeration determines if cookies for the other
domain are
<br/>sent to cross-origin requests. This is similar to XHR’s <code>withCredentials</code>
<br>sent to cross-origin requests. This is similar to XHR’s <code>withCredentials</code>
<br/>flag, but tri-valued as <code>"omit"</code> (default), <code>"same-origin"</code> and <code>"include"</code>.</p>
<br>flag, but tri-valued as <code>"omit"</code> (default), <code>"same-origin"</code> and <code>"include"</code>.</p>
<p>The Request object will also give the ability to offer caching hints to
the user-agent. This is currently undergoing some <a href="https://github.com/slightlyoff/ServiceWorker/issues/585">security review</a>.
Firefox exposes the attribute, but it has no effect.</p>
<p>Requests have two read-only attributes that are relevant to ServiceWorkers
<br/>intercepting them. There is the string <code>referrer</code>, which is
<br>intercepting them. There is the string <code>referrer</code>, which is
set by the UA to be
<br/>the referrer of the Request. This may be an empty string. The other is
<br/>
<br>the referrer of the Request. This may be an empty string. The other is
<br>
<code>context</code> which is a rather <a href="https://fetch.spec.whatwg.org/#requestcredentials">large enumeration</a> defining
what sort of resource is being fetched. This could be “image” if the request
is from an
<img/>tag in the controlled document, “worker” if it is an attempt to load a
<img>tag in the controlled document, “worker” if it is an attempt to load a
worker script, and so on. When used with the <code>fetch()</code> function,
it is “fetch”.</p>
@ -377,11 +377,11 @@ apiCall.<span>then</span><span>(</span><span>function</span><span>(</span>respon
The <code>url</code> attribute reflects the URL of the corresponding request.</p>
<p>Response also has a <code>type</code>, which is “basic”, “cors”, “default”,
“error” or
<br/>“opaque”.</p>
<br>“opaque”.</p>
<ul>
<li><code>"basic"</code>: normal, same origin response, with all headers exposed
except
<br/>“Set-Cookie” and “Set-Cookie2″.</li>
<br>“Set-Cookie” and “Set-Cookie2″.</li>
<li><code>"cors"</code>: response was received from a valid cross-origin request.
<a
href="https://fetch.spec.whatwg.org/#concept-filtered-response-cors">Certain headers and the body</a>may be accessed.</li>
@ -389,7 +389,7 @@ apiCall.<span>then</span><span>(</span><span>function</span><span>(</span>respon
the error is available. The Response’s status is 0, headers are empty and
immutable. This is the type for a Response obtained from <code>Response.error()</code>.</li>
<li><code>"opaque"</code>: response for “no-cors” request to cross-origin
resource. <a href="https://fetch.spec.whatwg.org/#concept-filtered-response-opaque">Severely<br/>
resource. <a href="https://fetch.spec.whatwg.org/#concept-filtered-response-opaque">Severely<br>
restricted</a>
</li>
@ -398,7 +398,7 @@ apiCall.<span>then</span><span>(</span><span>function</span><span>(</span>respon
TypeError.</p>
<p>There are certain attributes that are useful only in a ServiceWorker scope.
The
<br/>idiomatic way to return a Response to an intercepted request in ServiceWorkers
<br>idiomatic way to return a Response to an intercepted request in ServiceWorkers
is:</p>
<div class="wp_syntax">
<table>
@ -421,7 +421,7 @@ apiCall.<span>then</span><span>(</span><span>function</span><span>(</span>respon
<p>The static method <code>Response.error()</code> simply returns an error
response. Similarly, <code>Response.redirect(url, status)</code> returns
a Response resulting in
<br/>a redirect to <code>url</code>.</p>
<br>a redirect to <code>url</code>.</p>
<h2>Dealing with bodies</h2>
@ -561,7 +561,7 @@ res.<span>text</span><span>(</span><span>)</span>.<span>catch</span><span>(</spa
<a
href="https://github.com/slightlyoff/ServiceWorker/issues">ServiceWorker</a>specifications.</p>
<p>For a better web!</p>
<p><em>The author would like to thank Andrea Marchesini, Anne van Kesteren and Ben<br/>
<p><em>The author would like to thank Andrea Marchesini, Anne van Kesteren and Ben<br>
Kelly for helping with the specification and implementation.</em>
</p>
@ -575,4 +575,4 @@ on
</p>
</footer>
</article>
</div>
</div>

10
test/test-pages/base-url/expected.html
Unescape Escape View File

@ -19,19 +19,19 @@
</p>
<p>Images</p>
<p>
<img src="http://fakehost/test/foo/bar/baz.png" />
<img src="http://fakehost/test/foo/bar/baz.png">
</p>
<p>
<img src="http://fakehost/test/foo/bar/baz.png" />
<img src="http://fakehost/test/foo/bar/baz.png">
</p>
<p>
<img src="http://fakehost/foo/bar/baz.png" />
<img src="http://fakehost/foo/bar/baz.png">
</p>
<p>
<img src="http://test/foo/bar/baz.png" />
<img src="http://test/foo/bar/baz.png">
</p>
<p>
<img src="https://test/foo/bar/baz.png" />
<img src="https://test/foo/bar/baz.png">
</p>
<p>Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

13
test/test-pages/embedded-videos/expected.html
Unescape Escape View File

@ -10,20 +10,21 @@
<p>At root</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/LtOGa5M8AuU"
frameborder="0"></iframe>
frameborder="0" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/LtOGa5M8AuU"
frameborder="0"></iframe>
frameborder="0" allowfullscreen=""></iframe>
<iframe src="https://player.vimeo.com/video/32246206?color=ffffff&title=0&byline=0&portrait=0"
width="500" height="281" frameborder="0"></iframe>
width="500" height="281" frameborder="0" webkitallowfullscreen="" mozallowfullscreen=""
allowfullscreen=""></iframe>
<p>In a paragraph</p>
<p>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/LtOGa5M8AuU"
frameborder="0"></iframe>
frameborder="0" allowfullscreen=""></iframe>
</p>
<p>In a div</p>
<p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/LtOGa5M8AuU"
frameborder="0"></iframe>
frameborder="0" allowfullscreen=""></iframe>
</p>
<h2>Foo</h2>
@ -33,4 +34,4 @@
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
</div>

5
test/test-pages/herald-sun-1/expected.html
Unescape Escape View File

@ -4,8 +4,7 @@
<div class="image">
<div class="image-frame">
<img data-src="http://api.news.com.au/content/1.0/heraldsun/images/1227261885862?format=jpg&amp;group=iphone&amp;size=medium"
alt="A new Bill would require telecommunications service providers to store so-called ‘metadat"
/>
alt="A new Bill would require telecommunications service providers to store so-called ‘metadat">
</div>
<p class="caption"> <span id="imgCaption" class="caption-text">A new Bill would require telecommunications service providers to store so-called ‘metadata’ for two years.</span>
@ -94,4 +93,4 @@ Supplied</span>
</div>
</div>
</div>
</div>
</div>

50
test/test-pages/keep-images/expected.html
Unescape Escape View File

@ -4,8 +4,7 @@
<figure name="b9ad" id="b9ad" class="graf--figure postField--fillWidthImage graf--first">
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*sLDnS1UWEFIS33uLMxq3cw.jpeg"
data-width="2100" data-height="1402" src="https://d262ilb51hltx0.cloudfront.net/max/2000/1*sLDnS1UWEFIS33uLMxq3cw.jpeg"
/>
data-width="2100" data-height="1402" src="https://d262ilb51hltx0.cloudfront.net/max/2000/1*sLDnS1UWEFIS33uLMxq3cw.jpeg">
</div>
</figure>
</div>
@ -15,8 +14,7 @@
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*3vIhkoHIzcxvUdijoCVx6w.png" data-width="1200"
data-height="24" data-action="zoom" data-action-value="1*3vIhkoHIzcxvUdijoCVx6w.png"
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*3vIhkoHIzcxvUdijoCVx6w.png"
/>
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*3vIhkoHIzcxvUdijoCVx6w.png">
</div>
</figure>
<p name="8a83" id="8a83" class="graf--p">Standing at a table in a chemistry lab in Barcelona, Cristina Gil Lladanosa
@ -40,8 +38,7 @@
<figure name="c4e6" id="c4e6" class="graf--figure postField--fillWidthImage">
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*4gN1-fzOwCniw-DbqQjDeQ.jpeg"
data-width="2100" data-height="1402" src="https://d262ilb51hltx0.cloudfront.net/max/2000/1*4gN1-fzOwCniw-DbqQjDeQ.jpeg"
/>
data-width="2100" data-height="1402" src="https://d262ilb51hltx0.cloudfront.net/max/2000/1*4gN1-fzOwCniw-DbqQjDeQ.jpeg">
</div>
<figcaption class="imageCaption">Cristina Gil Lladanosa, at the Barcelona testing lab | photo by Joan Bardeletti</figcaption>
</figure>
@ -78,8 +75,7 @@
<figure name="559c" id="559c" class="graf--figure postField--fillWidthImage">
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*2KPmZkIBUrhps-2uwDvYFQ.jpeg"
data-width="2100" data-height="1402" src="https://d262ilb51hltx0.cloudfront.net/max/2000/1*2KPmZkIBUrhps-2uwDvYFQ.jpeg"
/>
data-width="2100" data-height="1402" src="https://d262ilb51hltx0.cloudfront.net/max/2000/1*2KPmZkIBUrhps-2uwDvYFQ.jpeg">
</div>
<figcaption class="imageCaption">Photo by Joan Bardeletti</figcaption>
</figure>
@ -98,8 +94,7 @@
<figure name="d6aa" id="d6aa" class="graf--figure postField--fillWidthImage">
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*PU40bbbox2Ompc5I3RE99A.jpeg"
data-width="2013" data-height="1241" src="https://d262ilb51hltx0.cloudfront.net/max/2000/1*PU40bbbox2Ompc5I3RE99A.jpeg"
/>
data-width="2013" data-height="1241" src="https://d262ilb51hltx0.cloudfront.net/max/2000/1*PU40bbbox2Ompc5I3RE99A.jpeg">
</div>
<figcaption class="imageCaption">Photo by Joan Bardeletti</figcaption>
</figure>
@ -130,8 +125,7 @@
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*ohyycinH18fz98TCyUzVgQ.png" data-width="1200"
data-height="24" data-action="zoom" data-action-value="1*ohyycinH18fz98TCyUzVgQ.png"
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*ohyycinH18fz98TCyUzVgQ.png"
/>
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*ohyycinH18fz98TCyUzVgQ.png">
</div>
</figure>
<p name="39a6" id="39a6" class="graf--p">The deep web drug lab is the brainchild of Fernando Caudevilla, a Spanish
@ -147,8 +141,7 @@
<figure name="eebc" id="eebc" class="graf--figure postField--fillWidthImage">
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*mKvUNOAVQxl6atCbxbCZsg.jpeg"
data-width="2100" data-height="1241" src="https://d262ilb51hltx0.cloudfront.net/max/2000/1*mKvUNOAVQxl6atCbxbCZsg.jpeg"
/>
data-width="2100" data-height="1241" src="https://d262ilb51hltx0.cloudfront.net/max/2000/1*mKvUNOAVQxl6atCbxbCZsg.jpeg">
</div>
<figcaption class="imageCaption">Fernando Caudevilla, AKA DoctorX. Photo: Joseph Cox</figcaption>
</figure>
@ -203,8 +196,7 @@
<figure name="4058" id="4058" class="graf--figure postField--fillWidthImage">
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*knT10_FNVUmqQIBLnutmzQ.jpeg"
data-width="4400" data-height="3141" src="https://d262ilb51hltx0.cloudfront.net/max/2000/1*knT10_FNVUmqQIBLnutmzQ.jpeg"
/>
data-width="4400" data-height="3141" src="https://d262ilb51hltx0.cloudfront.net/max/2000/1*knT10_FNVUmqQIBLnutmzQ.jpeg">
</div>
<figcaption class="imageCaption">Photo: Joseph Cox</figcaption>
</figure>
@ -214,8 +206,7 @@
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*ohyycinH18fz98TCyUzVgQ.png" data-width="1200"
data-height="24" data-action="zoom" data-action-value="1*ohyycinH18fz98TCyUzVgQ.png"
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*ohyycinH18fz98TCyUzVgQ.png"
/>
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*ohyycinH18fz98TCyUzVgQ.png">
</div>
</figure>
<p name="7b5e" id="7b5e" class="graf--p">While the Energy Control lab in Madrid lab only tests Spanish drugs from
@ -248,8 +239,7 @@
<figure name="b885" id="b885" class="graf--figure postField--fillWidthImage">
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*Vr61dyCTRwk6CemmVF8YAQ.jpeg"
data-width="2100" data-height="1402" src="https://d262ilb51hltx0.cloudfront.net/max/2000/1*Vr61dyCTRwk6CemmVF8YAQ.jpeg"
/>
data-width="2100" data-height="1402" src="https://d262ilb51hltx0.cloudfront.net/max/2000/1*Vr61dyCTRwk6CemmVF8YAQ.jpeg">
</div>
<figcaption class="imageCaption">Photo by Joan Bardeletti</figcaption>
</figure>
@ -296,8 +286,7 @@
<figure name="8544" id="8544" class="graf--figure postField--fillWidthImage">
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*a-1_13xE6_ErQ-QSlz6myw.jpeg"
data-width="2100" data-height="1402" src="https://d262ilb51hltx0.cloudfront.net/max/2000/1*a-1_13xE6_ErQ-QSlz6myw.jpeg"
/>
data-width="2100" data-height="1402" src="https://d262ilb51hltx0.cloudfront.net/max/2000/1*a-1_13xE6_ErQ-QSlz6myw.jpeg">
</div>
<figcaption class="imageCaption">Photo by Joan Bardeletti</figcaption>
</figure>
@ -307,8 +296,7 @@
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*ohyycinH18fz98TCyUzVgQ.png" data-width="1200"
data-height="24" data-action="zoom" data-action-value="1*ohyycinH18fz98TCyUzVgQ.png"
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*ohyycinH18fz98TCyUzVgQ.png"
/>
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*ohyycinH18fz98TCyUzVgQ.png">
</div>
</figure>
<p name="126b" id="126b" class="graf--p">Despite the prevalence of people using the service to gauge the quality
@ -357,8 +345,7 @@
<figure name="552a" id="552a" class="graf--figure postField--fillWidthImage">
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*IWXhtSsVv0gNnCwnDEXk-Q.jpeg"
data-width="2100" data-height="1192" src="https://d262ilb51hltx0.cloudfront.net/max/2000/1*IWXhtSsVv0gNnCwnDEXk-Q.jpeg"
/>
data-width="2100" data-height="1192" src="https://d262ilb51hltx0.cloudfront.net/max/2000/1*IWXhtSsVv0gNnCwnDEXk-Q.jpeg">
</div>
<figcaption class="imageCaption">Photo by Joan Bardeletti</figcaption>
</figure>
@ -391,8 +378,7 @@
<figure name="9d32" id="9d32" class="graf--figure postField--fillWidthImage">
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*NGcrjfkV0l37iQH2uyYjEw.jpeg"
data-width="1368" data-height="913" src="https://d262ilb51hltx0.cloudfront.net/max/2000/1*NGcrjfkV0l37iQH2uyYjEw.jpeg"
/>
data-width="1368" data-height="913" src="https://d262ilb51hltx0.cloudfront.net/max/2000/1*NGcrjfkV0l37iQH2uyYjEw.jpeg">
</div>
<figcaption class="imageCaption">Photo by Joan Bardeletti</figcaption>
</figure>
@ -455,8 +441,7 @@
<figure name="890b" id="890b" class="graf--figure postField--fillWidthImage">
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*WRlKt3q3mt7utmwxcbl3sQ.jpeg"
data-width="2100" data-height="1373" src="https://d262ilb51hltx0.cloudfront.net/max/2000/1*WRlKt3q3mt7utmwxcbl3sQ.jpeg"
/>
data-width="2100" data-height="1373" src="https://d262ilb51hltx0.cloudfront.net/max/2000/1*WRlKt3q3mt7utmwxcbl3sQ.jpeg">
</div>
<figcaption class="imageCaption">Photo by Joan Bardeletti</figcaption>
</figure>
@ -475,8 +460,7 @@
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*320_4I0lxbn5x3bx4XPI5Q.png" data-width="1200"
data-height="24" data-action="zoom" data-action-value="1*320_4I0lxbn5x3bx4XPI5Q.png"
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*320_4I0lxbn5x3bx4XPI5Q.png"
/>
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*320_4I0lxbn5x3bx4XPI5Q.png">
</div>
</figure>
<p name="9b87" id="9b87" data-align="center" class="graf--p"><em class="markup--em markup--p-em">Top photo by Joan Bardeletti</em>
@ -493,4 +477,4 @@
</p>
</div>
</div>
</div>
</div>

24
test/test-pages/lifehacker-post-comment-load/expected.html
Unescape Escape View File

@ -1,11 +1,11 @@
<div id="readability-page-1" class="page">
<div>
<p data-textannotation-id="58a492029dca5e6a6e481d21b6b2933a" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--hqqO9fze--/n1s6c2m6kc07iqdyllj6.jpg" data-chomp-id="n1s6c2m6kc07iqdyllj6" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--hqqO9fze--/n1s6c2m6kc07iqdyllj6.jpg" class="js_annotatable-image cursor-crosshair"/></span>
<p data-textannotation-id="58a492029dca5e6a6e481d21b6b2933a" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--hqqO9fze--/n1s6c2m6kc07iqdyllj6.jpg" data-chomp-id="n1s6c2m6kc07iqdyllj6" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--hqqO9fze--/n1s6c2m6kc07iqdyllj6.jpg" class="js_annotatable-image cursor-crosshair"></span>
</p>
<p data-textannotation-id="a043044f9b3e31fd85568b17e3b1b5f3" class="first-text"><span>We all buy things from time to time that we don't really need. It's okay to appeal to your wants every once in a while, as long as you're in control. If you struggle with clutter, impulse buys, and buyer's remorse, here's how to put your mind in the right place before you even set foot in a store.</span>
</p>
<h3 data-textannotation-id="e51cbbc52eb8c3b33571908351076cf7"><strong>Understand How Your Own Brain Works Against You</strong></h3>
<p data-textannotation-id="268f7702467d33e3b0972dd09f1cf0a6" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--QeUTCiuW--/o4dpyrcbiqyfrc3bxx6p.jpg" data-chomp-id="o4dpyrcbiqyfrc3bxx6p" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--QeUTCiuW--/o4dpyrcbiqyfrc3bxx6p.jpg" class="js_annotatable-image cursor-crosshair"/></span>
<p data-textannotation-id="268f7702467d33e3b0972dd09f1cf0a6" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--QeUTCiuW--/o4dpyrcbiqyfrc3bxx6p.jpg" data-chomp-id="o4dpyrcbiqyfrc3bxx6p" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--QeUTCiuW--/o4dpyrcbiqyfrc3bxx6p.jpg" class="js_annotatable-image cursor-crosshair"></span>
</p>
<p data-textannotation-id="32604538f84919efff270e87b61191a1">It may come as no surprise to learn that stores employ all kinds of tricks
to get you to part ways with your cash, and your brain plays right along.
@ -57,7 +57,7 @@
always research beforehand and be on the lookout for this common trick
to avoid impulse buys.</p>
<h3 data-textannotation-id="eedde8c384145f2593efc2a15a4d79de"><strong>Make a List of </strong><em><strong>Everything</strong></em><strong> You Own and Do Some Decluttering</strong></h3>
<p data-textannotation-id="8044cf9aab698fd28931acd90ba96f7a" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--mlR3Ku0_--/xrhkwleyurcizy4akiae.jpg" data-chomp-id="xrhkwleyurcizy4akiae" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--mlR3Ku0_--/xrhkwleyurcizy4akiae.jpg" class="js_annotatable-image cursor-crosshair"/></span>
<p data-textannotation-id="8044cf9aab698fd28931acd90ba96f7a" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--mlR3Ku0_--/xrhkwleyurcizy4akiae.jpg" data-chomp-id="xrhkwleyurcizy4akiae" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--mlR3Ku0_--/xrhkwleyurcizy4akiae.jpg" class="js_annotatable-image cursor-crosshair"></span>
</p>
<p data-textannotation-id="a2a886d841e5aed848cdf7088edde4ea">Now that you know what you're up against, it's time to start changing
the way you think. Before you can stop buying crap you don't need, you
@ -112,7 +112,7 @@
is all the crap you bought that you don't need. Take a good look and remember
it.</p>
<h3 data-textannotation-id="f15ab0a628b159459f095f04fef851ba"><strong>See How Much Money and Time You Spent on the Stuff You Threw Out</strong></h3>
<p data-textannotation-id="bc2f55587bf4ab07a1852a8d26217233" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--Tacb0tyW--/qodag11euf2npkawkn9v.jpg" data-chomp-id="qodag11euf2npkawkn9v" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--Tacb0tyW--/qodag11euf2npkawkn9v.jpg" class="js_annotatable-image cursor-crosshair"/></span>
<p data-textannotation-id="bc2f55587bf4ab07a1852a8d26217233" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--Tacb0tyW--/qodag11euf2npkawkn9v.jpg" data-chomp-id="qodag11euf2npkawkn9v" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--Tacb0tyW--/qodag11euf2npkawkn9v.jpg" class="js_annotatable-image cursor-crosshair"></span>
</p>
<p data-textannotation-id="95ab4fe30c3ade42a8011966ea54aa0b">Now take a look at your "crap" list again and start calculating how much
you spent on all of it. If it was a gift, mark it as $0. Otherwise, figure
@ -137,7 +137,7 @@
<h3
data-textannotation-id="6342bf7f15d9eddd21489c23e51ca434"><strong>List Every Non-Material Thing In Your Life that Makes You Happy</strong>
</h3>
<p data-textannotation-id="bafeac1c3808e0d2900190979f058b2c" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--x9hLbIKJ--/imfc9ybqfw0jmztbhfrh.jpg" data-chomp-id="imfc9ybqfw0jmztbhfrh" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--x9hLbIKJ--/imfc9ybqfw0jmztbhfrh.jpg" class="js_annotatable-image cursor-crosshair"/></span>
<p data-textannotation-id="bafeac1c3808e0d2900190979f058b2c" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--x9hLbIKJ--/imfc9ybqfw0jmztbhfrh.jpg" data-chomp-id="imfc9ybqfw0jmztbhfrh" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--x9hLbIKJ--/imfc9ybqfw0jmztbhfrh.jpg" class="js_annotatable-image cursor-crosshair"></span>
</p>
<p data-textannotation-id="4bd8fbaabb33ff1cb5dc93c16e1f83cc">Now it's time to make a different list. While material items may bring
plenty of joy, the things in your life that make you happiest probably
@ -148,7 +148,7 @@
<p data-textannotation-id="104a646a62ad7a0cfb4e3ff086185fdc"><span>These are probably the things that actually make you want to get out of bed in the morning and keep on keepin' on. Once you have it all down, put it in your purse or wallet. The next time you feel the urge to buy something, whip this list out first and remind yourself why you probably don't need it.</span>
</p>
<h3 data-textannotation-id="532cf992ff45d52de501c1a8f80fc152"><strong>Spend Some Time Away from Material Things to Gain Perspective</strong></h3>
<p data-textannotation-id="64f5c7155ad89bd2835399d33c1ae28a" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--6NwBgQLy--/afy7n45jfvsjdmmhonct.jpg" data-chomp-id="afy7n45jfvsjdmmhonct" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--6NwBgQLy--/afy7n45jfvsjdmmhonct.jpg" class="js_annotatable-image cursor-crosshair"/></span>
<p data-textannotation-id="64f5c7155ad89bd2835399d33c1ae28a" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--6NwBgQLy--/afy7n45jfvsjdmmhonct.jpg" data-chomp-id="afy7n45jfvsjdmmhonct" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--6NwBgQLy--/afy7n45jfvsjdmmhonct.jpg" class="js_annotatable-image cursor-crosshair"></span>
</p>
<p data-textannotation-id="84554492c487779e921b98fb64222177">If you're having a really hard time with your spending, it can help to
get away from material objects completely. When you're constantly surrounded
@ -163,7 +163,7 @@
without your purse or wallet (but carry your ID). If you can't buy anything,
you'll be forced to experience things a different way.</p>
<h3 data-textannotation-id="98c11bebae0bbcdbe8411df0186d6465"><strong>Develop a Personal "Should I Buy This?" Test</strong></h3>
<p data-textannotation-id="ff438b878771354bb7f6d065ff50dbb2" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--ciqk42G0--/s3pq8vjrvyjgne4lfsod.jpg" data-chomp-id="s3pq8vjrvyjgne4lfsod" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--ciqk42G0--/s3pq8vjrvyjgne4lfsod.jpg" class="js_annotatable-image cursor-crosshair"/></span>
<p data-textannotation-id="ff438b878771354bb7f6d065ff50dbb2" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--ciqk42G0--/s3pq8vjrvyjgne4lfsod.jpg" data-chomp-id="s3pq8vjrvyjgne4lfsod" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--ciqk42G0--/s3pq8vjrvyjgne4lfsod.jpg" class="js_annotatable-image cursor-crosshair"></span>
</p>
<p data-textannotation-id="4af04ae83f18d9c37da21527bcd4a290">If you don't have a personal "should I buy this?" test, now's the perfect
time to make one. When you find an item you think you need or want, it
@ -191,11 +191,7 @@
<h3
data-textannotation-id="c0ed0882675acc340dcd88e13ca514b3"><strong>Learn to Delay Gratification and Destroy the Urge to Impulse Buy</strong>
</h3>
<p data-textannotation-id="1d43712fc5ce8f156e4661cca5750575" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--mtob1sjR--/y2ldv5eufb3jcrtfouye.jpg" data-chomp-id="y2ldv5eufb3jcrtfouye" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--mtob1sjR--/y2ldv5eufb3jcrtfouye.jpg" class="js_annotatable-image cursor-crosshair"/></span>
<span
class="annotation-footnote-wrapper clearfix"><span data-annotation-type="image" data-image-chompid="y2ldv5eufb3jcrtfouye"
data-annotation-y="56" data-annotation-x="47" data-annotation-id="1690289549"
class="js_annotation-footnote annotation-footnote"><a class="js_annotation-footnote-link annotation-footnote-link proxima" href="http://fakehost/does-it-count-that-im-waiting-for-final-fantasy-type-0-1690289549">1</a><div data-annotation-id="1690289551" class="annotation-inset-under js_annotation-inset-1690289551 hide"><div class="annotation-content"><div class="js_annotation-content"><p class="first-text">Does it count that I'm waiting for Final Fantasy Type-0 before buying a PS4?</p><footer class="row proxima"></footer></div></div></div></span></span>
<p data-textannotation-id="1d43712fc5ce8f156e4661cca5750575" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--mtob1sjR--/y2ldv5eufb3jcrtfouye.jpg" data-chomp-id="y2ldv5eufb3jcrtfouye" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--mtob1sjR--/y2ldv5eufb3jcrtfouye.jpg" class="js_annotatable-image cursor-crosshair"></span>
</p>
<p data-textannotation-id="3d8086719c5da749f877629d498ccab9">When it comes to the unnecessary crap we buy, impulse purchases probably
make up a good deal of them. We love to feel gratification instantly and
@ -245,7 +241,7 @@
do and you won't be subconsciously trying to fill that void with useless
crap.</p>
<h3 data-textannotation-id="aed9b435c4ed23e573c453ceeb34ed18"><strong>Turn the Money You Save Into More Money</strong></h3>
<p data-textannotation-id="21154394d63f1943d01f2b717aa31115" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--4Ajak63w--/atb9qm07fvvg7hqkumkw.jpg" data-chomp-id="atb9qm07fvvg7hqkumkw" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--4Ajak63w--/atb9qm07fvvg7hqkumkw.jpg" class="js_annotatable-image cursor-crosshair"/></span>
<p data-textannotation-id="21154394d63f1943d01f2b717aa31115" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--4Ajak63w--/atb9qm07fvvg7hqkumkw.jpg" data-chomp-id="atb9qm07fvvg7hqkumkw" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--4Ajak63w--/atb9qm07fvvg7hqkumkw.jpg" class="js_annotatable-image cursor-crosshair"></span>
</p>
<p data-textannotation-id="6141942e977cc058fd7a0fa06a3f7389">Once you've programmed your mind to stop buying crap you don't need, you'll
have some extra cash to play with. Take all that money and start putting
@ -279,4 +275,4 @@
<p data-textannotation-id="b54d87ffdace50f420c3a6ff0404cbf3"><em><small>Photos by <a target="_blank" href="http://www.shutterstock.com/pic-129762989/stock-vector-consumer.html?src=id&amp;ws=1">cmgirl</a> (Shutterstock), <a target="_blank" href="http://www.shutterstock.com/pic-227832739/stock-vector-hacker-icon-man-in-hoody-with-laptop-flat-isolated-on-dark-background-vector-illustration.html?src=id&amp;ws=1">Macrovector</a> (Shutterstock), <a target="_blank" href="https://www.flickr.com/photos/jetheriot/6186786217">J E Theriot</a>, <a target="_blank" href="https://www.flickr.com/photos/puuikibeach/15289861843">davidd</a>, <a target="_blank" href="https://www.flickr.com/photos/funfilledgeorgie/10922459733">George Redgrave</a>, <a target="_blank" href="https://www.flickr.com/photos/amslerpix/7252002214">David Amsler</a>, <a target="_blank" href="https://www.flickr.com/photos/amalakar/7299820870">Arup Malakar</a>, <a target="_blank" href="https://www.flickr.com/photos/lobsterstew/89644885">J B</a>, <a target="_blank" href="https://www.flickr.com/photos/jakerome/3298702453">jakerome</a>, <a target="_blank" href="http://401kcalculator.org/">401(K) 2012</a>.</small></em>
</p>
</div>
</div>
</div>

4
test/test-pages/lifehacker-post-comment-load/source.html
Unescape Escape View File

@ -778,7 +778,7 @@ google_ad_channel = '1102379497';
<p data-textannotation-id="1d43712fc5ce8f156e4661cca5750575" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--mtob1sjR--/y2ldv5eufb3jcrtfouye.jpg" data-chomp-id="y2ldv5eufb3jcrtfouye" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--mtob1sjR--/y2ldv5eufb3jcrtfouye.jpg" class="js_annotatable-image cursor-crosshair" /></span><span class="annotation-footnote-wrapper clearfix"><span data-annotation-type="image" data-image-chompid="y2ldv5eufb3jcrtfouye" data-annotation-y="56" data-annotation-x="47" data-annotation-id="1690289549" class="js_annotation-footnote annotation-footnote"><a class="js_annotation-footnote-link annotation-footnote-link proxima" href="/does-it-count-that-im-waiting-for-final-fantasy-type-0-1690289549">1</a><div data-annotation-id="1690289551" class="annotation-inset-under js_annotation-inset-1690289551 hide"><div id="annotation_1690289551" class="hide-annotation right cursor-pointer"><span class="icon icon-x-small"></span></div><div class="annotation-content"><div class="js_annotation-content"><p class="first-text">Does it count that I'm waiting for Final Fantasy Type-0 before buying a PS4?</p><footer class="row proxima"><div class="medium-8 columns"><span class="floated-container img-30"><span class="avatar"><span class="img-border mbn mrm"><img alt="" class="avatar" src="http://i.kinja-img.com/gawker-media/image/upload/c_fill,fl_progressive,g_center,h_200,q_80,w_200/17jcxjgw9pi83png.png" /></span></span><span class="txt blogname proxima text-upper text-strong text-light txt-30">greenarcher02</span></span></div><div class="medium-4 columns medium-text-right text-center txt-30"><a href="/does-it-count-that-im-waiting-for-final-fantasy-type-0-1690289549" class="text-light text-small view-discussion">View discussion &gt;&gt;</a></div></footer></div></div></div></span></span></p>
<p data-textannotation-id="1d43712fc5ce8f156e4661cca5750575" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--mtob1sjR--/y2ldv5eufb3jcrtfouye.jpg" data-chomp-id="y2ldv5eufb3jcrtfouye" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--mtob1sjR--/y2ldv5eufb3jcrtfouye.jpg" class="js_annotatable-image cursor-crosshair" /></span></p>
@ -1302,4 +1302,4 @@ google_ad_channel = '1102379497';
&lt;img src="http://b.scorecardresearch.com/p?c1=2&amp;c2=6770184&amp;cv=2.0&amp;cj=1" /&gt;
</noscript>
<!-- End comScore Tag -->
</div><div class="footer-kinja__bottom"><div class="row"><div class="column"><div class="logo-wrapper"><span>Powered by</span><a data-ga="[Kinja Footer, Kinja.com Click, js_pageType]" href="http://kinja.com"><h1 class="kinja-title kinja-title--white">Kinja</h1></a></div></div></div></div></div></div> <div id="read-only-warning" style="display:none;"><div class="row"><div class="column small-12">Kinja is in read-only mode. We are working to restore service.</div></div></div><div id="matchbuy-placeholder"></div><iframe width="1" height="1" name="spr" src="//d8rk54i4mohrb.cloudfront.net/iframe.html?pid=5266d09097b0c95740000002&amp;title=How%20to%20Program%20Your%20Mind%20to%20Stop%20Buying%20Crap%20You%20Don%E2%80%99t%20Need&amp;url=http%3A%2F%2Flifehacker.com%2Fhow-to-program-your-mind-to-stop-buying-crap-you-don-t-1690268064&amp;date=Mon%20Mar%2009%202015%2015%3A00%3A00%20GMT%2B0000%20%28GMT%29&amp;authors=PatrickAllan&amp;channels=&amp;tags=money%7Cshopping%7Csaving%20money%7Cpersonal%20finances%7Cmind%20hacks%7Chabits%7Cbudget%7Cpsychology%7Ceditors%20picks&amp;iframe=true&amp;domain=lifehacker.com&amp;r=true&amp;referrer=&amp;page_url=http%3A%2F%2Flifehacker.com%2Fhow-to-program-your-mind-to-stop-buying-crap-you-don-t-1690268064&amp;ref_url=&amp;cache_buster=1427305231937" visible="false" id="spr-iframe-n" style="display: none;"></iframe><iframe width="1" height="1" name="spr" src="//d8rk54i4mohrb.cloudfront.net/container.html?pid=5266d09097b0c95740000002&amp;title=How%20to%20Program%20Your%20Mind%20to%20Stop%20Buying%20Crap%20You%20Don%E2%80%99t%20Need&amp;url=http%3A%2F%2Flifehacker.com%2Fhow-to-program-your-mind-to-stop-buying-crap-you-don-t-1690268064&amp;date=Mon%20Mar%2009%202015%2015%3A00%3A00%20GMT%2B0000%20%28GMT%29&amp;authors=PatrickAllan&amp;channels=&amp;tags=money%7Cshopping%7Csaving%20money%7Cpersonal%20finances%7Cmind%20hacks%7Chabits%7Cbudget%7Cpsychology%7Ceditors%20picks&amp;iframe=true&amp;domain=lifehacker.com&amp;r=true&amp;referrer=&amp;page_url=http%3A%2F%2Flifehacker.com%2Fhow-to-program-your-mind-to-stop-buying-crap-you-don-t-1690268064&amp;ref_url=&amp;cache_buster=1427305231939" visible="false" id="spr-iframe-x" style="display: none;"></iframe><div class="js_loading-layer row hide"><div class="column"><div class="row"><div class="loading-layer"><div class="large-8 large-offset-4 columns"><div class="loading-layer-main-column"> <span class="spinner bounce"><span class="one"></span><span class="two"></span><span class="three"></span></span></div></div></div></div></div></div></body></html>
</div><div class="footer-kinja__bottom"><div class="row"><div class="column"><div class="logo-wrapper"><span>Powered by</span><a data-ga="[Kinja Footer, Kinja.com Click, js_pageType]" href="http://kinja.com"><h1 class="kinja-title kinja-title--white">Kinja</h1></a></div></div></div></div></div></div> <div id="read-only-warning" style="display:none;"><div class="row"><div class="column small-12">Kinja is in read-only mode. We are working to restore service.</div></div></div><div id="matchbuy-placeholder"></div><iframe width="1" height="1" name="spr" src="//d8rk54i4mohrb.cloudfront.net/iframe.html?pid=5266d09097b0c95740000002&amp;title=How%20to%20Program%20Your%20Mind%20to%20Stop%20Buying%20Crap%20You%20Don%E2%80%99t%20Need&amp;url=http%3A%2F%2Flifehacker.com%2Fhow-to-program-your-mind-to-stop-buying-crap-you-don-t-1690268064&amp;date=Mon%20Mar%2009%202015%2015%3A00%3A00%20GMT%2B0000%20%28GMT%29&amp;authors=PatrickAllan&amp;channels=&amp;tags=money%7Cshopping%7Csaving%20money%7Cpersonal%20finances%7Cmind%20hacks%7Chabits%7Cbudget%7Cpsychology%7Ceditors%20picks&amp;iframe=true&amp;domain=lifehacker.com&amp;r=true&amp;referrer=&amp;page_url=http%3A%2F%2Flifehacker.com%2Fhow-to-program-your-mind-to-stop-buying-crap-you-don-t-1690268064&amp;ref_url=&amp;cache_buster=1427305231937" visible="false" id="spr-iframe-n" style="display: none;"></iframe><iframe width="1" height="1" name="spr" src="//d8rk54i4mohrb.cloudfront.net/container.html?pid=5266d09097b0c95740000002&amp;title=How%20to%20Program%20Your%20Mind%20to%20Stop%20Buying%20Crap%20You%20Don%E2%80%99t%20Need&amp;url=http%3A%2F%2Flifehacker.com%2Fhow-to-program-your-mind-to-stop-buying-crap-you-don-t-1690268064&amp;date=Mon%20Mar%2009%202015%2015%3A00%3A00%20GMT%2B0000%20%28GMT%29&amp;authors=PatrickAllan&amp;channels=&amp;tags=money%7Cshopping%7Csaving%20money%7Cpersonal%20finances%7Cmind%20hacks%7Chabits%7Cbudget%7Cpsychology%7Ceditors%20picks&amp;iframe=true&amp;domain=lifehacker.com&amp;r=true&amp;referrer=&amp;page_url=http%3A%2F%2Flifehacker.com%2Fhow-to-program-your-mind-to-stop-buying-crap-you-don-t-1690268064&amp;ref_url=&amp;cache_buster=1427305231939" visible="false" id="spr-iframe-x" style="display: none;"></iframe><div class="js_loading-layer row hide"><div class="column"><div class="row"><div class="loading-layer"><div class="large-8 large-offset-4 columns"><div class="loading-layer-main-column"> <span class="spinner bounce"><span class="one"></span><span class="two"></span><span class="three"></span></span></div></div></div></div></div></div></body></html>

20
test/test-pages/lifehacker-working/expected.html
Unescape Escape View File

@ -1,11 +1,11 @@
<div id="readability-page-1" class="page">
<div>
<p data-textannotation-id="58a492029dca5e6a6e481d21b6b2933a" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--hqqO9fze--/n1s6c2m6kc07iqdyllj6.jpg" data-chomp-id="n1s6c2m6kc07iqdyllj6" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--hqqO9fze--/n1s6c2m6kc07iqdyllj6.jpg"/></span>
<p data-textannotation-id="58a492029dca5e6a6e481d21b6b2933a" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--hqqO9fze--/n1s6c2m6kc07iqdyllj6.jpg" data-chomp-id="n1s6c2m6kc07iqdyllj6" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--hqqO9fze--/n1s6c2m6kc07iqdyllj6.jpg"></span>
</p>
<p data-textannotation-id="a043044f9b3e31fd85568b17e3b1b5f3" class="first-text"><span>We all buy things from time to time that we don't really need. It's okay to appeal to your wants every once in a while, as long as you're in control. If you struggle with clutter, impulse buys, and buyer's remorse, here's how to put your mind in the right place before you even set foot in a store.</span>
</p>
<h3 data-textannotation-id="e51cbbc52eb8c3b33571908351076cf7"><strong>Understand How Your Own Brain Works Against You</strong></h3>
<p data-textannotation-id="268f7702467d33e3b0972dd09f1cf0a6" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--QeUTCiuW--/o4dpyrcbiqyfrc3bxx6p.jpg" data-chomp-id="o4dpyrcbiqyfrc3bxx6p" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--QeUTCiuW--/o4dpyrcbiqyfrc3bxx6p.jpg"/></span>
<p data-textannotation-id="268f7702467d33e3b0972dd09f1cf0a6" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--QeUTCiuW--/o4dpyrcbiqyfrc3bxx6p.jpg" data-chomp-id="o4dpyrcbiqyfrc3bxx6p" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--QeUTCiuW--/o4dpyrcbiqyfrc3bxx6p.jpg"></span>
</p>
<p data-textannotation-id="32604538f84919efff270e87b61191a1">It may come as no surprise to learn that stores employ all kinds of tricks
to get you to part ways with your cash, and your brain plays right along.
@ -57,7 +57,7 @@
always research beforehand and be on the lookout for this common trick
to avoid impulse buys.</p>
<h3 data-textannotation-id="eedde8c384145f2593efc2a15a4d79de"><strong>Make a List of </strong><em><strong>Everything</strong></em><strong> You Own and Do Some Decluttering</strong></h3>
<p data-textannotation-id="8044cf9aab698fd28931acd90ba96f7a" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--mlR3Ku0_--/xrhkwleyurcizy4akiae.jpg" data-chomp-id="xrhkwleyurcizy4akiae" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--mlR3Ku0_--/xrhkwleyurcizy4akiae.jpg"/></span>
<p data-textannotation-id="8044cf9aab698fd28931acd90ba96f7a" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--mlR3Ku0_--/xrhkwleyurcizy4akiae.jpg" data-chomp-id="xrhkwleyurcizy4akiae" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--mlR3Ku0_--/xrhkwleyurcizy4akiae.jpg"></span>
</p>
<p data-textannotation-id="a2a886d841e5aed848cdf7088edde4ea">Now that you know what you're up against, it's time to start changing
the way you think. Before you can stop buying crap you don't need, you
@ -112,7 +112,7 @@
is all the crap you bought that you don't need. Take a good look and remember
it.</p>
<h3 data-textannotation-id="f15ab0a628b159459f095f04fef851ba"><strong>See How Much Money and Time You Spent on the Stuff You Threw Out</strong></h3>
<p data-textannotation-id="bc2f55587bf4ab07a1852a8d26217233" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--Tacb0tyW--/qodag11euf2npkawkn9v.jpg" data-chomp-id="qodag11euf2npkawkn9v" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--Tacb0tyW--/qodag11euf2npkawkn9v.jpg"/></span>
<p data-textannotation-id="bc2f55587bf4ab07a1852a8d26217233" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--Tacb0tyW--/qodag11euf2npkawkn9v.jpg" data-chomp-id="qodag11euf2npkawkn9v" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--Tacb0tyW--/qodag11euf2npkawkn9v.jpg"></span>
</p>
<p data-textannotation-id="95ab4fe30c3ade42a8011966ea54aa0b">Now take a look at your "crap" list again and start calculating how much
you spent on all of it. If it was a gift, mark it as $0. Otherwise, figure
@ -137,7 +137,7 @@
<h3
data-textannotation-id="6342bf7f15d9eddd21489c23e51ca434"><strong>List Every Non-Material Thing In Your Life that Makes You Happy</strong>
</h3>
<p data-textannotation-id="bafeac1c3808e0d2900190979f058b2c" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--x9hLbIKJ--/imfc9ybqfw0jmztbhfrh.jpg" data-chomp-id="imfc9ybqfw0jmztbhfrh" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--x9hLbIKJ--/imfc9ybqfw0jmztbhfrh.jpg"/></span>
<p data-textannotation-id="bafeac1c3808e0d2900190979f058b2c" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--x9hLbIKJ--/imfc9ybqfw0jmztbhfrh.jpg" data-chomp-id="imfc9ybqfw0jmztbhfrh" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--x9hLbIKJ--/imfc9ybqfw0jmztbhfrh.jpg"></span>
</p>
<p data-textannotation-id="4bd8fbaabb33ff1cb5dc93c16e1f83cc">Now it's time to make a different list. While material items may bring
plenty of joy, the things in your life that make you happiest probably
@ -148,7 +148,7 @@
<p data-textannotation-id="104a646a62ad7a0cfb4e3ff086185fdc"><span>These are probably the things that actually make you want to get out of bed in the morning and keep on keepin' on. Once you have it all down, put it in your purse or wallet. The next time you feel the urge to buy something, whip this list out first and remind yourself why you probably don't need it.</span>
</p>
<h3 data-textannotation-id="532cf992ff45d52de501c1a8f80fc152"><strong>Spend Some Time Away from Material Things to Gain Perspective</strong></h3>
<p data-textannotation-id="64f5c7155ad89bd2835399d33c1ae28a" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--6NwBgQLy--/afy7n45jfvsjdmmhonct.jpg" data-chomp-id="afy7n45jfvsjdmmhonct" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--6NwBgQLy--/afy7n45jfvsjdmmhonct.jpg"/></span>
<p data-textannotation-id="64f5c7155ad89bd2835399d33c1ae28a" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--6NwBgQLy--/afy7n45jfvsjdmmhonct.jpg" data-chomp-id="afy7n45jfvsjdmmhonct" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--6NwBgQLy--/afy7n45jfvsjdmmhonct.jpg"></span>
</p>
<p data-textannotation-id="84554492c487779e921b98fb64222177">If you're having a really hard time with your spending, it can help to
get away from material objects completely. When you're constantly surrounded
@ -163,7 +163,7 @@
without your purse or wallet (but carry your ID). If you can't buy anything,
you'll be forced to experience things a different way.</p>
<h3 data-textannotation-id="98c11bebae0bbcdbe8411df0186d6465"><strong>Develop a Personal "Should I Buy This?" Test</strong></h3>
<p data-textannotation-id="ff438b878771354bb7f6d065ff50dbb2" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--ciqk42G0--/s3pq8vjrvyjgne4lfsod.jpg" data-chomp-id="s3pq8vjrvyjgne4lfsod" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--ciqk42G0--/s3pq8vjrvyjgne4lfsod.jpg"/></span>
<p data-textannotation-id="ff438b878771354bb7f6d065ff50dbb2" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--ciqk42G0--/s3pq8vjrvyjgne4lfsod.jpg" data-chomp-id="s3pq8vjrvyjgne4lfsod" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--ciqk42G0--/s3pq8vjrvyjgne4lfsod.jpg"></span>
</p>
<p data-textannotation-id="4af04ae83f18d9c37da21527bcd4a290">If you don't have a personal "should I buy this?" test, now's the perfect
time to make one. When you find an item you think you need or want, it
@ -191,7 +191,7 @@
<h3
data-textannotation-id="c0ed0882675acc340dcd88e13ca514b3"><strong>Learn to Delay Gratification and Destroy the Urge to Impulse Buy</strong>
</h3>
<p data-textannotation-id="1d43712fc5ce8f156e4661cca5750575" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--mtob1sjR--/y2ldv5eufb3jcrtfouye.jpg" data-chomp-id="y2ldv5eufb3jcrtfouye" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--mtob1sjR--/y2ldv5eufb3jcrtfouye.jpg"/></span>
<p data-textannotation-id="1d43712fc5ce8f156e4661cca5750575" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--mtob1sjR--/y2ldv5eufb3jcrtfouye.jpg" data-chomp-id="y2ldv5eufb3jcrtfouye" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--mtob1sjR--/y2ldv5eufb3jcrtfouye.jpg"></span>
</p>
<p data-textannotation-id="3d8086719c5da749f877629d498ccab9">When it comes to the unnecessary crap we buy, impulse purchases probably
make up a good deal of them. We love to feel gratification instantly and
@ -241,7 +241,7 @@
do and you won't be subconsciously trying to fill that void with useless
crap.</p>
<h3 data-textannotation-id="aed9b435c4ed23e573c453ceeb34ed18"><strong>Turn the Money You Save Into More Money</strong></h3>
<p data-textannotation-id="21154394d63f1943d01f2b717aa31115" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--4Ajak63w--/atb9qm07fvvg7hqkumkw.jpg" data-chomp-id="atb9qm07fvvg7hqkumkw" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--4Ajak63w--/atb9qm07fvvg7hqkumkw.jpg"/></span>
<p data-textannotation-id="21154394d63f1943d01f2b717aa31115" class="has-media media-640"><span class="img-border"><img width="636" height="358" data-format="jpg" data-asset-url="http://i.kinja-img.com/gawker-media/image/upload/s--4Ajak63w--/atb9qm07fvvg7hqkumkw.jpg" data-chomp-id="atb9qm07fvvg7hqkumkw" alt="How to Program Your Mind to Stop Buying Crap You Don’t Need" src="http://i.kinja-img.com/gawker-media/image/upload/s--4Ajak63w--/atb9qm07fvvg7hqkumkw.jpg"></span>
</p>
<p data-textannotation-id="6141942e977cc058fd7a0fa06a3f7389">Once you've programmed your mind to stop buying crap you don't need, you'll
have some extra cash to play with. Take all that money and start putting
@ -275,4 +275,4 @@
<p data-textannotation-id="b54d87ffdace50f420c3a6ff0404cbf3"><em><small>Photos by <a target="_blank" href="http://www.shutterstock.com/pic-129762989/stock-vector-consumer.html?src=id&amp;ws=1">cmgirl</a> (Shutterstock), <a target="_blank" href="http://www.shutterstock.com/pic-227832739/stock-vector-hacker-icon-man-in-hoody-with-laptop-flat-isolated-on-dark-background-vector-illustration.html?src=id&amp;ws=1">Macrovector</a> (Shutterstock), <a target="_blank" href="https://www.flickr.com/photos/jetheriot/6186786217">J E Theriot</a>, <a target="_blank" href="https://www.flickr.com/photos/puuikibeach/15289861843">davidd</a>, <a target="_blank" href="https://www.flickr.com/photos/funfilledgeorgie/10922459733">George Redgrave</a>, <a target="_blank" href="https://www.flickr.com/photos/amslerpix/7252002214">David Amsler</a>, <a target="_blank" href="https://www.flickr.com/photos/amalakar/7299820870">Arup Malakar</a>, <a target="_blank" href="https://www.flickr.com/photos/lobsterstew/89644885">J B</a>, <a target="_blank" href="https://www.flickr.com/photos/jakerome/3298702453">jakerome</a>, <a target="_blank" href="http://401kcalculator.org/">401(K) 2012</a>.</small></em>
</p>
</div>
</div>
</div>

45
test/test-pages/medium-1/expected.html
Unescape Escape View File

@ -1,7 +1,7 @@
<div id="readability-page-1" class="page">
<div>
<h4 name="425a" id="425a" data-align="center" class="graf--h4"><em class="markup--em markup--h4-em">Better Student Journalism</em></h4>
<h4 name="08db" id="08db" class="graf--h4 graf--empty"><br/></h4>
<h4 name="08db" id="08db" class="graf--h4 graf--empty"><br></h4>
<p name="d178" id="d178" class="graf--p">We pushed out the first version of the <a href="http://pippinlee.github.io/open-journalism-project/"
data-href="http://pippinlee.github.io/open-journalism-project/" class="markup--anchor markup--p-anchor"
rel="nofollow">Open Journalism site</a> in January. Our goal is for the
@ -36,8 +36,7 @@
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*AzYWbe4cZkMMEUbfRjysLQ.png" data-width="1000"
data-height="500" data-action="zoom" data-action-value="1*AzYWbe4cZkMMEUbfRjysLQ.png"
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*AzYWbe4cZkMMEUbfRjysLQ.png"
/>
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*AzYWbe4cZkMMEUbfRjysLQ.png">
</div>
<figcaption class="imageCaption">topleftpixel.com</figcaption>
</figure>
@ -64,8 +63,7 @@
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*d0Hp6KlzyIcGHcL6to1sYQ.png" data-width="868"
data-height="451" data-action="zoom" data-action-value="1*d0Hp6KlzyIcGHcL6to1sYQ.png"
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*d0Hp6KlzyIcGHcL6to1sYQ.png"
/>
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*d0Hp6KlzyIcGHcL6to1sYQ.png">
</div>
</figure>
<h3 name="e2f0" id="e2f0" class="graf--h3">We don’t know what we don’t know</h3>
@ -119,8 +117,7 @@
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*_9KYIFrk_PqWFgptsMDeww.png" data-width="1086"
data-height="500" data-action="zoom" data-action-value="1*_9KYIFrk_PqWFgptsMDeww.png"
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*_9KYIFrk_PqWFgptsMDeww.png"
/>
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*_9KYIFrk_PqWFgptsMDeww.png">
</div>
<figcaption class="imageCaption">From our 2011 research</figcaption>
</figure>
@ -180,8 +177,7 @@
<figure name="416f" id="416f" class="graf--figure">
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*Vh2MpQjqjPkzYJaaWExoVg.png" data-width="624"
data-height="560" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*Vh2MpQjqjPkzYJaaWExoVg.png"
/>
data-height="560" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*Vh2MpQjqjPkzYJaaWExoVg.png">
</div>
<figcaption class="imageCaption"><strong class="markup--strong markup--figure-strong">We designed many of these slides to help explain to ourselves what we were doing</strong>
@ -196,21 +192,21 @@
<ol class="postList">
<li name="91b5" id="91b5" class="graf--li"><strong class="markup--strong markup--li-strong">The handoff</strong>
<br/>Problems arise because web editors are given roles that absolve the rest
<br>Problems arise because web editors are given roles that absolve the rest
of the editors from thinking about the web. All editors should be involved
in the process of story development for the web. While it’s a good idea
to have one specific editor manage the website, contributors and editors
should all play with and learn about the web. Instead of “can you make
a computer do XYZ for me?”, we should be saying “can you show me how to
make a computer do XYZ?”</li>
<li name="6448" id="6448" class="graf--li"><strong class="markup--strong markup--li-strong">Not just social media<br/></strong>A
<li name="6448" id="6448" class="graf--li"><strong class="markup--strong markup--li-strong">Not just social media<br></strong>A
web editor could do much more than simply being in charge of the social
media accounts for the student paper. Their responsibility could include
teaching all other editors to be listening to what’s happening online.
The web editor can take advantage of live information to change how the
student newsroom reports news in real time.</li>
<li name="ab30" id="ab30"
class="graf--li"><strong class="markup--strong markup--li-strong">Web (interactive) editor<br/></strong>The
class="graf--li"><strong class="markup--strong markup--li-strong">Web (interactive) editor<br></strong>The
goal of having a web editor should be for someone to build and tell stories
that take full advantage of the web as their medium. Too often the web’s
interactivity is not considered when developing the story. The web then
@ -234,8 +230,7 @@
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*2Ln_DmC95Xpz6LzgywkcFQ.png" data-width="1315"
data-height="718" data-action="zoom" data-action-value="1*2Ln_DmC95Xpz6LzgywkcFQ.png"
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*2Ln_DmC95Xpz6LzgywkcFQ.png"
/>
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*2Ln_DmC95Xpz6LzgywkcFQ.png">
</div>
<figcaption class="imageCaption">The current Open Journalism site was a few years in the making. This was
an original launch page we use in 2012</figcaption>
@ -244,7 +239,7 @@
<ul class="postList">
<li name="f7fe" id="f7fe" class="graf--li"><strong class="markup--strong markup--li-strong">New process</strong>
<br/>Our rough research has told us newsrooms need to be reorganized. This
<br>Our rough research has told us newsrooms need to be reorganized. This
includes every part of the newsroom’s workflow: from where a story and
its information comes from, to thinking of every word, pixel, and interaction
the reader will have with your stories. If I was a photo editor that wanted
@ -258,7 +253,7 @@
fits your newsroom’s needs.</li>
<li name="d757" id="d757" class="graf--li"><strong class="markup--strong markup--li-strong">More (remote) mentorship</strong>
<br/>Lack of mentorship is still a big problem. <a href="http://www.google.com/get/journalismfellowship/"
<br>Lack of mentorship is still a big problem. <a href="http://www.google.com/get/journalismfellowship/"
data-href="http://www.google.com/get/journalismfellowship/" class="markup--anchor markup--li-anchor"
rel="nofollow">Google’s fellowship program</a> is great. The fact that it
only caters to United States students isn’t. There are only a handful of
@ -270,7 +265,7 @@
<li name="a9b8"
id="a9b8" class="graf--li"><strong class="markup--strong markup--li-strong">Changing a newsroom culture</strong>
<br/>Skill diversity needs to change. We encourage every student newsroom we
<br>Skill diversity needs to change. We encourage every student newsroom we
talk to, to start building a partnership with their school’s Computer Science
department. It will take some work, but you’ll find there are many CS undergrads
that love playing with web technologies, and using data to tell stories.
@ -285,7 +280,7 @@
<ul class="postList">
<li name="7320" id="7320" class="graf--li"><strong class="markup--strong markup--li-strong">Sharing curiosity for the web</strong>
<br/>We don’t know how to best teach students about the web. It’s not efficient
<br>We don’t know how to best teach students about the web. It’s not efficient
for us to teach coding classes. We do go into newsrooms and get them running
their first code exercises, but if someone wants to learn to program, we
can only provide the initial push and curiosity. We will be trying out
@ -293,13 +288,13 @@
of how to teach students about the web.</li>
<li name="8b23" id="8b23" class="graf--li"><strong class="markup--strong markup--li-strong">Business</strong>
<br/>We don’t know how to convince the business side of student papers that
<br>We don’t know how to convince the business side of student papers that
they should invest in the web. At the very least we’re able to explain
that having students graduate with their current skill set is painful in
the current job market.</li>
<li name="191e" id="191e" class="graf--li"><strong class="markup--strong markup--li-strong">The future</strong>
<br/>We don’t know what journalism or the web will be like in 10 years, but
<br>We don’t know what journalism or the web will be like in 10 years, but
we can start encouraging students to keep an open mind about the skills
they’ll need. We’re less interested in preparing students for the current
newsroom climate, than we are in teaching students to have the ability
@ -311,7 +306,7 @@
<ul class="postList">
<li name="8bfa" id="8bfa" class="graf--li"><strong class="markup--strong markup--li-strong">A concise guide to building stories for the web</strong>
<br/>There are too many options to get started. We hope to provide an opinionated
<br>There are too many options to get started. We hope to provide an opinionated
guide that follows both our experiences, research, and observations from
trying to teach our peers.</li>
</ul>
@ -329,8 +324,7 @@
id="7ed3" class="graf--figure">
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*bXaR_NBJdoHpRc8lUWSsow.png" data-width="686"
data-height="400" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*bXaR_NBJdoHpRc8lUWSsow.png"
/>
data-height="400" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*bXaR_NBJdoHpRc8lUWSsow.png">
</div>
<figcaption class="imageCaption">2012</figcaption>
</figure>
@ -358,8 +352,7 @@
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*lulfisQxgSQ209vPHMAifg.png" data-width="950"
data-height="534" data-action="zoom" data-action-value="1*lulfisQxgSQ209vPHMAifg.png"
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*lulfisQxgSQ209vPHMAifg.png"
/>
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*lulfisQxgSQ209vPHMAifg.png">
</div>
</figure>
<p name="2c5c" id="2c5c" class="graf--p"><strong class="markup--strong markup--p-strong">Let’s talk. Let’s listen.</strong>
@ -381,4 +374,4 @@
</p>
</div>
</div>
</div>

5
test/test-pages/medium-2/expected.html
Unescape Escape View File

@ -4,8 +4,7 @@
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*eR_J8DurqygbhrwDg-WPnQ.png" data-width="1891"
data-height="1280" data-action="zoom" data-action-value="1*eR_J8DurqygbhrwDg-WPnQ.png"
src="https://d262ilb51hltx0.cloudfront.net/max/1600/1*eR_J8DurqygbhrwDg-WPnQ.png"
/>
src="https://d262ilb51hltx0.cloudfront.net/max/1600/1*eR_J8DurqygbhrwDg-WPnQ.png">
</div>
<figcaption class="imageCaption">Words need defenders.</figcaption>
</figure>
@ -95,4 +94,4 @@
stopped, or the world will be lost to meaninglessness forever. Figuratively
speaking.</p>
</div>
</div>
</div>

4
test/test-pages/reordering-paragraphs/expected.html
Unescape Escape View File

@ -23,5 +23,5 @@
of matter is called quark-gluon plasma.[81] The exact conditions needed
to give rise to this state are unknown and have been the subject of a great
deal of speculation and experimentation.</p>
<br id="br2" />
</div>
<br id="br2">
</div>

11
test/test-pages/tmz-1/expected.html
Unescape Escape View File

@ -12,8 +12,7 @@
</p>
<p>
<img alt="0225-lupita-nyongo-getty-01" src="http://ll-media.tmz.com/2015/02/26/0225-lupita-nyongo-getty-4.jpg"
/><strong>Lupita Nyong</strong>'<strong>o</strong>'s now-famous Oscar dress
<img alt="0225-lupita-nyongo-getty-01" src="http://ll-media.tmz.com/2015/02/26/0225-lupita-nyongo-getty-4.jpg"><strong>Lupita Nyong</strong>'<strong>o</strong>'s now-famous Oscar dress
-- adorned in pearls -- was stolen right out of her hotel room ... TMZ
has learned.</p>
<p>Law enforcement sources tell TMZ ... the dress was taken out of Lupita's
@ -24,14 +23,12 @@
<p>We're told there is security footage that cops are looking at that could
catch the culprit right in the act.&nbsp;</p>
<p>
<img alt="update_graphic_red_bar" src="http://ll-media.tmz.com/2013/11/20/update-graphic-red-bar.jpg"
/><strong>12:00 PM PT</strong> -- Sheriff's deputies were at The London Thursday
<img alt="update_graphic_red_bar" src="http://ll-media.tmz.com/2013/11/20/update-graphic-red-bar.jpg"><strong>12:00 PM PT</strong> -- Sheriff's deputies were at The London Thursday
morning. &nbsp;We know they were in the manager's office and we're told
they have looked at security footage to determine if they can ID the culprit.</p>
<p>
<img alt="0226-SUB-london-hotel-swipe-tmz-02" src="http://ll-media.tmz.com/2015/02/26/0226-sub-london-hotel-swipe-tmz-11.jpg"
/>
<img alt="0226-SUB-london-hotel-swipe-tmz-02" src="http://ll-media.tmz.com/2015/02/26/0226-sub-london-hotel-swipe-tmz-11.jpg">
</p><a name="continued"></a>
</div>
</div>
</div>
</div>

7
test/test-pages/wapo-1/expected.html
Unescape Escape View File

@ -114,9 +114,8 @@
<div class="inline-content inline-graphic-embedded">
<img class="unprocessed" data-hi-res-src="https://img.washingtonpost.com/rf/image_1484w/2010-2019/WashingtonPost/2015/03/18/Foreign/Graphics/tunisia600.jpg?uuid=1_yuLs2LEeSHME9HNBbnWQ"
data-low-res-src="https://img.washingtonpost.com/rf/image_480w/2010-2019/WashingtonPost/2015/03/18/Foreign/Graphics/tunisia600.jpg?uuid=1_yuLs2LEeSHME9HNBbnWQ"
src="https://img.washingtonpost.com/rf/image_480w/2010-2019/WashingtonPost/2015/03/18/Foreign/Graphics/tunisia600.jpg?uuid=1_yuLs2LEeSHME9HNBbnWQ"
/>
<br/>
src="https://img.washingtonpost.com/rf/image_480w/2010-2019/WashingtonPost/2015/03/18/Foreign/Graphics/tunisia600.jpg?uuid=1_yuLs2LEeSHME9HNBbnWQ">
<br>
</div>
<p>Officials are worried about the number of Tunisian militants who may have
joined the jihadists in Libya — with the goal of returning home to fight
@ -143,4 +142,4 @@
<p channel="wp.com"> <a href="http://www.washingtonpost.com/blogs/worldviews/wp/2015/03/18/tunisias-bardo-museum-attacked-by-terrorists-is-home-to-amazing-roman-treasures/">Tunisia’s Bardo museum is home to amazing Roman treasures</a>
</p>
</article>
</div>
</div>

4
test/test-pages/wapo-2/expected.html
Unescape Escape View File

@ -96,9 +96,9 @@
<p>“That could be an issue forced onto the agenda about the same time as
a potential nuclear deal.”</p>
</article>
<div><a href="http://www.washingtonpost.com/people/steven-mufson"><img class="post-body-headshot-left" src="http://img.washingtonpost.com/wp-apps/imrs.php?src=http://www.washingtonpost.com/blogs/wonkblog/files/2014/07/mufson_steve.jpg&amp;h=180&amp;w=180"/></a>
<div><a href="http://www.washingtonpost.com/people/steven-mufson"><img class="post-body-headshot-left" src="http://img.washingtonpost.com/wp-apps/imrs.php?src=http://www.washingtonpost.com/blogs/wonkblog/files/2014/07/mufson_steve.jpg&amp;h=180&amp;w=180"></a>
<p
class="post-body-bio has-photo">Steven Mufson covers the White House. Since joining The Post, he has covered
economics, China, foreign policy and energy.</p>
</div>
</div>
</div>

84
test/test-readability.js
Unescape Escape View File

@ -1,4 +1,5 @@
var prettyPrint = require("html").prettyPrint;
var jsdom = require("jsdom").jsdom;
var chai = require("chai");
chai.config.includeStack = true;
var expect = chai.expect;
@ -9,28 +10,45 @@ var JSDOMParser = readability.JSDOMParser;
var testPages = require("./bootstrap").getTestPages();
describe("Test isProbablyReaderable", function() {
testPages.forEach(function(testPage) {
describe(testPage.dir, function() {
var doc, isProbablyReaderable;
function suite(result, expectedContent, expectedMetadata) {
it("should return a result object", function() {
expect(result).to.include.keys("content", "title", "excerpt", "byline");
});
before(function() {
doc = new JSDOMParser().parse(testPage.source);
isProbablyReaderable = new Readability(null, doc).isProbablyReaderable();
});
it("should extract expected content", function() {
expect(expectedContent).eql(prettyPrint(result.content));
});
it("should probably be readerable", function() {
expect(isProbablyReaderable).eql(testPage.expectedMetadata.readerable);
});
});
it("should extract expected title", function() {
expect(expectedMetadata.title).eql(result.title);
});
it("should extract expected byline", function() {
expect(expectedMetadata.byline).eql(result.byline);
});
});
it("should extract expected excerpt", function() {
expect(expectedMetadata.excerpt).eql(result.excerpt);
});
it("should probably be readerable", function() {
expect(expectedMetadata.readerable).eql(result.readerable);
});
}
function removeCommentNodesRecursively(node) {
[].forEach.call(node.childNodes, function(child) {
if (child.nodeType === child.COMMENT_NODE) {
node.removeChild(child);
} else if (child.nodeType === child.ELEMENT_NODE) {
removeCommentNodesRecursively(child);
}
});
}
describe("Test page", function() {
testPages.forEach(function(testPage) {
describe(testPage.dir, function() {
var doc, result;
var uri = {
spec: "http://fakehost/test/page.html",
host: "fakehost",
@ -39,29 +57,23 @@ describe("Test page", function() {
pathBase: "http://fakehost/test/"
};
before(function() {
doc = new JSDOMParser().parse(testPage.source);
result = new Readability(uri, doc).parse();
});
it("should return a result object", function() {
expect(result).to.include.keys("content", "title", "excerpt", "byline");
});
it("should extract expected content", function() {
expect(testPage.expectedContent).eql(prettyPrint(result.content));
});
it("should extract expected title", function() {
expect(testPage.expectedMetadata.title).eql(result.title);
});
it("should extract expected byline", function() {
expect(testPage.expectedMetadata.byline).eql(result.byline);
describe("jsdom", function() {
var doc = jsdom(testPage.source);
removeCommentNodesRecursively(doc);
var readability = new Readability(uri, doc);
var readerable = readability.isProbablyReaderable();
var result = readability.parse();
result.readerable = readerable;
suite(result, testPage.expectedContent, testPage.expectedMetadata);
});
it("should extract expected excerpt", function() {
expect(testPage.expectedMetadata.excerpt).eql(result.excerpt);
describe("JSDOMParser", function() {
var doc = new JSDOMParser().parse(testPage.source);
var readability = new Readability(uri, doc);
var readerable = readability.isProbablyReaderable();
var result = readability.parse();
result.readerable = readerable;
suite(result, testPage.expectedContent, testPage.expectedMetadata);
});
});
});

Write Preview
Loading…
Cancel
Save