components/dom_distiller/core/html/preview_english.html - Issue 1192363006: Update reader mode viewer according to specs

Unified Diff: components/dom_distiller/core/html/preview_english.html

Issue 1192363006: Update reader mode viewer according to specs (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 5 years, 6 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« components/dom_distiller/core/css/distilledpage.css ('K') | « components/dom_distiller/core/html/dom_distiller_viewer.html ('k') | components/dom_distiller/core/javascript/dom_distiller_viewer.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: components/dom_distiller/core/html/preview_english.html

diff --git a/components/dom_distiller/core/html/preview_english.html b/components/dom_distiller/core/html/preview_english.html

new file mode 100644

index 0000000000000000000000000000000000000000..a938da2879e8d8db0625f3eda51207a9d6dec2e7

--- /dev/null

+++ b/components/dom_distiller/core/html/preview_english.html

@@ -0,0 +1,188 @@

+<!DOCTYPE HTML>

+<!--

+Use of this source code is governed by a BSD-style license that can be

+found in the LICENSE file.

+-->

+<html>

+<head>

+ <meta charset="utf-8">

+ <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

+ <title>Title goes here and it could be kind of lengthy - Publisher name</title>

+ <link href="../css/distilledpage.css" rel="stylesheet" type="text/css">

+ <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

+</head>

+<body class="light sans-serif">

+ <div id="menus" style="position: absolute; right: 0; z-index: 2; color: black; background: #CCC; opacity: 0.8;">

+ Theme:

+ <select id="selectTheme" onchange="useTheme(this.value)">

+ <option value="light" selected="selected">light</option>

+ <option value="dark">dark</option>

+ <option value="sepia">sepia</option>

+ </select>

+ <br/>

+ Lead image:

+ <select id="showLeadImg" onchange="document.getElementById('leadImg').style.display=this.value">

+ <option value="block" selected="selected">show</option>

+ <option value="none">hide</option>

+ </select>

+ </div>

+ <div id="contentWrap">

+ <div id="mainContent">

+ <article>

+ <header id="articleHeader">

+ <h1 id="titleHolder">Title goes here and it could be kind of lengthy - Publisher name</h1>

+ </header>

+ <div id="content">

+ <div id="leadImg">

+ <img

+ src="https://www.webkit.org/demos/srcset/image-1x.png"

+ srcset="https://www.webkit.org/demos/srcset/image-1x.png 1x,

+ https://www.webkit.org/demos/srcset/image-2x.png 2x,

+ https://www.webkit.org/demos/srcset/image-3x.png 3x,

+ https://www.webkit.org/demos/srcset/image-4x.png 4x">

+ <div class="media_caption">

+ Head image with srcset attribute

+ </div>

+ <h1 id="firstHeading">

+ The first heading might show up just below the header H1

+ </h1>

+ <p>

+ Lorem ipsum C<sub>sub</sub> 2<sup>sup</sup> sit amet, elit velit in vehicula et, blandit diam

+ suscipit luctus in, <code>Code outside of PRE</code>. Aenean interdum nulla ridiculus nibh vitae.

+ Placerat malesuada lorem, <a href="">visited link</a> sed cras enim in nibh nullam eros. Sed

+ sapien etiam donec ipsum. Tristique tortor, <a href="link">link vestibulum eget

+ amet</a>,

+ sem vel. Leo euismod magna leo vestibulum, <cite>cite: massa sed amet pretium

+ mattis quisque ipsum, ut iaculis consectetuer</cite>, semper facilisi et

+ neque sit, in sit amet. Vel wisi viverra velit nullam velit vel,

+ maecenas vestibulum ridiculus turpis, nec aliquam id, in dui.

+ </p>

+ <img

+ src="https://www.webkit.org/demos/srcset/image-1x.png"

+ srcset="https://www.webkit.org/demos/srcset/image-1x.png 1x,

+ https://www.webkit.org/demos/srcset/image-2x.png 2x,

+ https://www.webkit.org/demos/srcset/image-3x.png 3x,

+ https://www.webkit.org/demos/srcset/image-4x.png 4x">

+ <div class="media_caption">

+ Image with srcset attribute

+ </div>

+ <pre>Pre: nulla libero elit sit, penatibus mi donec bibendum risus, aliquam elit orci, ducimus iaculis leo porta eget curabitur pede. <code>

+Code inside PRE:

+Justo dolor

+ vehicula augue

+ ante

+ suspendisse

+ mauris

+eleifend sagittis tortor turpis.</code></pre>

+ </pre>

+ <table>

+ <thead>

+ <th>Title 1</th><th>Title of column 2</th>

+ </thead>

+ <tbody>

+ <tr>

+ <td>Content of row one column 1 goes here</td>

+ <td>Content of row one column 2 goes here</td>

+ </tr>

+ <tr>

+ <td>row 2 column 1</td>

+ <td>Content of row two column two goes here and it is much

+ longer than the rest of the cells</td>

+ </tr>

+ </tbody>

+ </table>

+ <p>

+ A ac, vitae tristique, aliquam vitae ut integer sed

+ in pharetra, pharetra volutpat non porttitor nunc, massa curabitur

+ officia. Q: <q>Sodales consectetuer pellentesque duis sed, at risus, risus

+ enim lacus pede, morbi quis. Malesuada at, proin facilisis nec

+ congue.</q> Dolor tincidunt eget massa eget neque ultrices, quis eu id

+ semper, odio est elit in, dolor et, mauris suspendisse tellus

+ dictum.

+ </p>

+ <hr>

+ <ol>

+ <li>Justo convallis at porttitor

+ <li>Sodales neque metus habitasse vel sem

+ <li>Praesent ipsum nunc lorem dui pellentesque morbi

+ </ol>

+ <ul>

+ <li>Mauris integer feugiat erat luctus

+ <li>Orci netus pretium purus neque mauris arcu vel maecenas nec aliquam

+ <li>Sed consequat

+ </ul>

+ <h1>Fermentum ligula mauris cras h1</h1>

+ <p>

+ Blockquote:

+ </p>

+ <blockquote>

+ Urna ad leo vel at,

+ nibh purus arcu, penatibus maecenas tristique tristique proin,

+ fermentum et feugiat. Netus in, sapien risus et in consectetuer,

+ mauris egestas rhoncus dui duis malesuada. Laoreet eros eu posuere,

+ neque arcu eget, sed nulla suspendisse, quis quibusdam sed tristique

+ porta amet bibendum.

+ </blockquote>

+ <h2>Fermentum ligula mauris cras h2</h2>

+ <p>

+ Fermentum ligula mauris cras, elementum pede mi impedit mi nulla,

+ tristique vitae nisl pede, blandit nec nullam semper cras a, sit

+ iure eget hendrerit.

+ </p>

+ <p>

+ Id elit nullam lorem mollit vitae, elementum

+ at, pulvinar ipsum orci placerat vel velit nulla.

+ </p>

+ <p>

+ Metus sagittis a

+ lacus nec mattis vel, mauris malesuada et nisl, scelerisque risus,

+ in pede morbi.

+ </p>

+ <h3>Fermentum ligula mauris cras h3</h3>

+ <p>Laoreet urna dapibus at nulla ac, sed ornare

+ lobortis, non id nascetur non. Placerat vitae at interdum duis hac,

+ lacus luctus, amet dolore pharetra urna nulla vitae. Sed sit dui.

+ <img

+ src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Ara-Zoo-Muenster-2013-02.jpg/800px-Ara-Zoo-Muenster-2013-02.jpg">

+ <img

+ src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Ara-Zoo-Muenster-2013-02.jpg/800px-Ara-Zoo-Muenster-2013-02.jpg">

+ <span>Span text between pics</span>

+ <img

+ src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Ara-Zoo-Muenster-2013-02.jpg/800px-Ara-Zoo-Muenster-2013-02.jpg">

+ Ipsum aliquam placerat odio turpis, est lacinia, risus aenean

+ adipiscing integer, semper wisi tortor.

+ </p>

+ <h4>Fermentum ligula mauris cras h4</h4>

+ <p>

+ Quia in elementum senectus,

+ sapien eu integer, id nibh, nec amet nibh suscipit. Hendrerit risus,

+ est sit vestibulum erat eu rutrum, nulla natoque etiam vehicula eu

+ pellentesque tincidunt, ligula neque praesent odio aliquam. Ultrices

+ risus suscipit vel quam lacus, sed mauris elit suspendisse, enim

+ risus convallis et, feugiat a integer ultrices, ut velit integer

+ lectus velit volutpat et. Tellus suspendisse, aliquam nulla tempor

+ praesent eget vestibulum.

+ </p>

+ </div>

+ </article>

+ </div>

+ <a href="" id="closeReaderView">Close Reader View</a>

+ </div>

+ <div id="feedbackContainer" class="footerFeedback">

+ <div class="feedbackContent">

+ <div id="feedbackQuestion"></div>

+ <div class="feedbackButtonWrap">

+ <a class="feedbackButton" id="feedbackNo"></a>

+ <a class="feedbackButton" id="feedbackYes"></a>

+ </div>

+ <div class="clear"></div>

+ </div>

+</body>

+<script src="../javascript/dom_distiller_viewer.js">

+</script>

+</html>