mhtml: new complex test case
The-Compiler wants a more beautiful test case since the old one was pretty weird and took lots of explaining at pytest demos, so I made a new one. This one is a bit nicer on the eye and - to say it with The-Compiler's words - has no "weird pixelated globe with the geocities-like background". To compensate for the globe I've put in some trivia facts so that - if you are one of the people that like to stare at test pages - you can always learn something.
This commit is contained in:
Daniel Schadt
parent
67efd1c5e0
commit
1e52f459c9
BIN
tests/integration/data/downloads/mhtml/complex/Background.png
Normal file
BIN
tests/integration/data/downloads/mhtml/complex/Background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 186 B |
BIN
tests/integration/data/downloads/mhtml/complex/Banner.png
Normal file
BIN
tests/integration/data/downloads/mhtml/complex/Banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
tests/integration/data/downloads/mhtml/complex/DYK.png
Normal file
BIN
tests/integration/data/downloads/mhtml/complex/DYK.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
tests/integration/data/downloads/mhtml/complex/Inline.png
Normal file
BIN
tests/integration/data/downloads/mhtml/complex/Inline.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 511 B |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
@ -1,3 +1,17 @@
|
||||
div.fancy {
|
||||
background-color: url("div-image.png");
|
||||
@import 'external-in-extern.css';
|
||||
/* We want to make sure that assets referenced in external css files are
|
||||
* properly included
|
||||
*/
|
||||
div.dyk {
|
||||
/* Did you know? */
|
||||
background-image: url('DYK.png');
|
||||
background-repeat: no-repeat;
|
||||
/* Image is 128px wide */
|
||||
min-height: 128px;
|
||||
padding-left: 148px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 2px solid #474747;
|
||||
border-radius: 64px;
|
||||
}
|
||||
|
||||
@ -1,38 +1,109 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
||||
<title>qutebrowser mhtml test</title>
|
||||
|
||||
<!-- make sure <style> tags are parsed -->
|
||||
<style>
|
||||
body {
|
||||
background-image: url('Background.png');
|
||||
background-repeat: repeat-x;
|
||||
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
font-size: 120%;
|
||||
}
|
||||
img#banner {
|
||||
display: block;
|
||||
margin: 20px auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- make sure external css is included -->
|
||||
<link rel="stylesheet" href="base.css">
|
||||
<!-- make sure <style> is parsed -->
|
||||
<style>
|
||||
@import "extern-css.css";
|
||||
body {
|
||||
background-image: url("background.png");
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- don't parse non-CSS styles -->
|
||||
<style rel="stylesheet" type="text/qss">
|
||||
@import "actually-it's-css";
|
||||
@import "actually-it's-css";
|
||||
</style>
|
||||
|
||||
<!-- make sure icons are included -->
|
||||
<link rel="icon" href="favicon.png">
|
||||
|
||||
<!-- make sure authors are NOT included -->
|
||||
<link rel="author" href="author.html">
|
||||
|
||||
<!-- make sure scripts are included -->
|
||||
<script type="text/javascript" src="script.js"></script>
|
||||
<!-- ...but don't crash on scripts without src -->
|
||||
|
||||
<!-- ...but don't crash on scripts without src -->
|
||||
<script>
|
||||
var l = 1+1;
|
||||
var l = 1+1;
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- include a normal image -->
|
||||
<img src="image.gif">
|
||||
<!-- make sure images are included -->
|
||||
<img src="Banner.png" id="banner">
|
||||
|
||||
<h1>Welcome to the qutebrowser mhtml test page</h1>
|
||||
|
||||
<div class="dyk">
|
||||
...that the word <em>qutebrowser</em> is a word play on Qt, the
|
||||
framework the browser is built with?
|
||||
</div>
|
||||
|
||||
<h2>What is this page?</h2>
|
||||
|
||||
<p>This page is a test-case for the mhtml download feature of
|
||||
qutebrowser. Under normal circumstances, you won't see this page, except
|
||||
if you're a qutebrowser developer <em>or</em> you're attending one of
|
||||
The-Compiler's pytest demos.</p>
|
||||
|
||||
<div class="dyk">
|
||||
...that this page was once a monstrosity with <em>"this weird pixelated
|
||||
globe with the geocities-like background"</em>? You can find the old
|
||||
page in the old commits and indeed, it was quite atrocious. But hey,
|
||||
every browser needs a globe...
|
||||
</div>
|
||||
|
||||
<p>This page references other assets and when the page is downloaded,
|
||||
qutebrowser checks if each asset was downloaded. If some assets are
|
||||
missing, the test fails and the poor developers have to search for the
|
||||
error.</p>
|
||||
|
||||
<h2>Can I contribute to qutebrowser?</h2>
|
||||
|
||||
<p>Yes!</p>
|
||||
|
||||
<div class="dyk">
|
||||
...that qutebrowser is free software? Free as in <em>free beer</em> and
|
||||
<em>free speech</em>! Isn't that great?</em>
|
||||
</div>
|
||||
|
||||
<h2>...and how?</h2>
|
||||
|
||||
<p>See <a href="https://github.com/The-Compiler/qutebrowser/blob/master/CONTRIBUTING.asciidoc">
|
||||
here</a> for more information.</p>
|
||||
|
||||
<h2>More useless trivia!</h2>
|
||||
|
||||
<div class="dyk">
|
||||
...that the font in the header is Comic Sans?
|
||||
</div>
|
||||
|
||||
<div class="dyk">
|
||||
...the IRC channel for qutebrowser is <code>#qutebrowser</code> on
|
||||
irc.freenode.net
|
||||
</div>
|
||||
|
||||
<div class="dyk">
|
||||
...the area of a circle is π*r<sup>2</sup>?
|
||||
</div>
|
||||
|
||||
<p>To make this page a bit useful, I've included a chessboard, so you
|
||||
can play chess. Just turn your screen 90 degrees, such that it forms a
|
||||
flat, horizontal surface (you can skip this step if you're using a
|
||||
tablet). Next, zoom the page until it fits your needs. Enjoy your round
|
||||
of chess!</p>
|
||||
<!-- make sure inline styles are parsed -->
|
||||
<p style="background-image: url('inline.png')">foobar</p>
|
||||
<!-- make sure inline.png is only be requested once -->
|
||||
<img src="inline.png">
|
||||
<div style="background-image: url('Inline.png'); background-repeat: no-repeat; width: 160px; height: 160px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
@ -1,4 +0,0 @@
|
||||
@import "external-in-external.css";
|
||||
p {
|
||||
font-family: "Monospace";
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
/* Just making sure that more than one level of external css is included */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #0A396E;
|
||||
border-bottom: 1px dotted #474747;
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
@ -1,9 +1,8 @@
|
||||
background.png
|
||||
Background.png
|
||||
Banner.png
|
||||
base.css
|
||||
div-image.png
|
||||
extern-css.css
|
||||
external-in-external.css
|
||||
DYK.png
|
||||
external-in-extern.css
|
||||
favicon.png
|
||||
image.gif
|
||||
inline.png
|
||||
Inline.png
|
||||
script.js
|
||||
|
||||
@ -1,2 +1,14 @@
|
||||
function noop() {}
|
||||
noop();
|
||||
if (typeof String.prototype.endsWith !== 'function') {
|
||||
String.prototype.endsWith = function(suffix) {
|
||||
return this.indexOf(suffix, this.length - suffix.length) !== -1;
|
||||
};
|
||||
}
|
||||
window._keys = "";
|
||||
document.onkeypress = function(evt) {
|
||||
var e = evt || window.event;
|
||||
window._keys += String.fromCharCode(e.charCode);
|
||||
if (window._keys.endsWith("qute")) {
|
||||
alert("It's just a qute browser!");
|
||||
window._keys = "";
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user