-
Notifications
You must be signed in to change notification settings - Fork 200
/
index.html
145 lines (135 loc) · 4.64 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>Guide to Monocle tests</title>
<link href="tests.css" rel="stylesheet" />
</head>
<body class="narrow">
<h1>Guide to Monocle tests</h1>
<p>
Monocle has three kinds of tests:
</p>
<ol>
<li>
<strong>Examples</strong> show you how to implement a Monocle
Reader.
</li>
<li>
<strong>Feature tests</strong> exercise the various aspects of
Monocle, including the way book content is loaded, the way content is
paginated, the way pages are animated, etc.
</li>
<li>
<strong>Bug tests</strong> typically highlight rendering or logic
problems in browsers, and in some cases test Monocle's workarounds.
</li>
</ol>
<h2>Examples</h2>
<ul>
<li>
<a href="showcase/01-velveteen/index.html">Showcase: Velveteen Rabbit</a>
— The simplest possible reader. (Variation:
<a href="showcase/01-velveteen/full.html">full-screen</a>.)
</li>
<li>
<a href="showcase/02-dickens/index.html">Showcase: Charles Dickens</a>
— A visually appealing, full-featured reader.
</li>
<li>
<a href="dogfood/index.html">Dogfood</a>
— Tests the example code from Monocle's README.
(And its <a href="dogfood/simplest.html">simplest variation</a>.)
</li>
</ul>
<h2>Feature tests</h2>
<ul>
<li>
<a href="compat/index.html">Compatibility diagnostics</a>
— A chart of supported features and detected bugs in the
current browser environment that affect Monocle performance.
</li>
<li>
<a href="bookdata/index.html">Book data</a>
— Loading different kinds of HTML content.
</li>
<li>
<a href="componentry/index.html">Componentry</a>
— Various strategies for loading content into components.
</li>
<li>
<a href="controls/index.html">Controls</a>
— Simple tests for Monocle's stock controls.
</li>
<li>
<a href="events/index.html">Events</a>
— Displays the events that are dispatched during initialisation
and page turning.
</li>
<li>
<a href="flippers/index.html">Flippers</a>
— Ways that Monocle can animate page-turns.
</li>
<li>
<a href="locus-search/index.html">Locus search</a>
— Jumping to elements within a component via XPath or CSS selectors.
</li>
<li>
<a href="panels/index.html">Panels</a>
— Ways that you can interact with Monocle pages.
</li>
<li>
<a href="selection/index.html">Selection</a>
— Fire events whenever the text selection changes in a Monocle
component.
</li>
<li>
<a href="stencil/index.html">Stencil</a>
— A Monocle feature that makes links clickable through panels.
</li>
<li>
<a href="stylesheet/index.html">Stylesheet</a>
— Set a default stylesheet for all components when creating
the Reader.
</li>
</ul>
<h2>Bug tests</h2>
<ul>
<li>
The <strong>How It Works</strong> series.
1: How do we force iframe body content into
<a href="how-it-works/1-columns/index.html">columns</a>? —
2: How do we clip the content without
<a href="how-it-works/2-scrollbars/index.html">scrollbars</a>? —
3: How do we
<a href="how-it-works/3-measurements/index.html">measure the width</a>
of a columned iframe body? —
4: In
<a href="how-it-works/4-node-location/index.html">which column</a>
is a given element?
</li>
<li>
<a href="rich_content/index.html">Rich content</a>
— Shows the problems browsers have paginating rich content
like tables, and suggests solutions.
</li>
<li>
<a href="embedded/index.html">Embedded Reader</a>
— Some old mobile browsers struggle with iframes inside iframes.
</li>
<li>
<a href="bugs/">Client-specific bug index</a>
— A repository of other bugs that afflict only specific clients.
</li>
<li>
<a href="experimental/">Experiments</a>
— Ideas and proofs-of-concept that might eventually show up
in core.
</li>
</ul>
</body>
</html>