mirror of
https://github.com/danog/inline-critical.git
synced 2024-11-26 12:04:38 +01:00
Merge pull request #272 from bezoerb/feature/print-strategy
adds media=print strategy (#270)
This commit is contained in:
Ben Zörb
GitHub
commit
c36307318a
@ -69,6 +69,8 @@ Run `inline-critical --help` to see the list of options.
|
||||
- `html` is the HTML you want to use to inline your critical styles, or any other styles
|
||||
- `styles` are the styles you're looking to inline
|
||||
- `options` is an optional configuration object
|
||||
- `polyfill` will use loadCSS polyfill instead of preferred media=print strategy (https://www.filamentgroup.com/lab/load-css-simpler/)
|
||||
- `preload` will add preload tags
|
||||
- `minify` will minify the styles before inlining (default: true)
|
||||
- `extract` will remove the inlined styles from any stylesheets referenced in the HTML
|
||||
- `basePath` will be used when extracting styles to find the files references by `href` attributes
|
||||
|
||||
12
cli.js
12
cli.js
@ -22,10 +22,13 @@ Options:
|
||||
-h, --html Path to HTML file
|
||||
-i, --ignore Skip matching stylesheets
|
||||
-m, --minify Minify the styles before inlining (default)
|
||||
-p, --preload Adds preload tags
|
||||
|
||||
-e, --extract Remove the inlined styles from any stylesheets referenced in the HTML
|
||||
-b, --base Is used when extracting styles to find the files references by href attributes
|
||||
-s, --selector Optionally defines the element used by loadCSS as a reference for inlining
|
||||
|
||||
--polyfill Use loadCSS polyfill instead of media=print
|
||||
--noscript Position of noscript fallback ('body' - end of body, 'head' - end of head, false - no noscript)
|
||||
`;
|
||||
|
||||
@ -62,6 +65,15 @@ const cli = meow(help, {
|
||||
type: 'string',
|
||||
alias: 's',
|
||||
},
|
||||
preload: {
|
||||
type: 'boolean',
|
||||
alias: 'p',
|
||||
default: false,
|
||||
},
|
||||
polyfill: {
|
||||
type: 'boolean',
|
||||
default: false,
|
||||
},
|
||||
noscript: {
|
||||
type: 'string',
|
||||
},
|
||||
|
||||
44
index.js
44
index.js
@ -24,7 +24,8 @@ const {prettifyCss, extractCss} = require('./src/css');
|
||||
const DEFAULT_OPTIONS = {
|
||||
minify: true,
|
||||
extract: false,
|
||||
polyfill: true,
|
||||
polyfill: false,
|
||||
preload: false,
|
||||
ignore: [],
|
||||
replaceStylesheets: false,
|
||||
noscript: 'body',
|
||||
@ -110,11 +111,26 @@ function inline(html, styles, options) {
|
||||
link.setAttribute('href', href);
|
||||
document.addNoscript(link);
|
||||
|
||||
link.setAttribute('rel', 'preload');
|
||||
link.setAttribute('as', 'style');
|
||||
link.setAttribute('onload', "this.onload=null;this.rel='stylesheet'");
|
||||
if (o.polyfill) {
|
||||
link.setAttribute('rel', 'preload');
|
||||
link.setAttribute('as', 'style');
|
||||
link.setAttribute('onload', "this.onload=null;this.rel='stylesheet'");
|
||||
} else {
|
||||
link.setAttribute('rel', 'stylesheet');
|
||||
link.setAttribute('media', 'print');
|
||||
link.setAttribute('onload', "this.media='all'");
|
||||
}
|
||||
|
||||
document.insertBefore(link, ref);
|
||||
|
||||
if (!o.polyfill && o.preload) {
|
||||
const preload = document.createElement('link');
|
||||
preload.setAttribute('rel', 'preload');
|
||||
preload.setAttribute('href', link.getAttribute('href'));
|
||||
preload.setAttribute('as', 'style');
|
||||
|
||||
document.insertBefore(preload, link);
|
||||
}
|
||||
});
|
||||
|
||||
// Remove old links
|
||||
@ -148,9 +164,23 @@ function inline(html, styles, options) {
|
||||
|
||||
document.addNoscript(link);
|
||||
|
||||
link.setAttribute('rel', 'preload');
|
||||
link.setAttribute('as', 'style');
|
||||
link.setAttribute('onload', "this.onload=null;this.rel='stylesheet'");
|
||||
if (o.polyfill) {
|
||||
link.setAttribute('rel', 'preload');
|
||||
link.setAttribute('as', 'style');
|
||||
link.setAttribute('onload', "this.onload=null;this.rel='stylesheet'");
|
||||
} else {
|
||||
link.setAttribute('rel', 'stylesheet');
|
||||
link.setAttribute('media', 'print');
|
||||
link.setAttribute('onload', "this.media='all'");
|
||||
}
|
||||
|
||||
if (!o.polyfill && o.preload) {
|
||||
const preload = document.createElement('link');
|
||||
preload.setAttribute('href', link.getAttribute('href'));
|
||||
preload.setAttribute('rel', 'preload');
|
||||
preload.setAttribute('as', 'style');
|
||||
document.insertBefore(preload, link);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ describe('acceptance', () => {
|
||||
});
|
||||
|
||||
test('should work well with the critical CSS & html file passed as input', async () => {
|
||||
const expected = await read('expected/index-inlined-async-final.html');
|
||||
const expected = await read('expected/index-inlined-async-final-print.html');
|
||||
const {stdout, code} = await run(['test/fixtures/index.html', 'test/fixtures/critical.css', '--no-minify']);
|
||||
|
||||
expect(code).toBe(0);
|
||||
@ -33,6 +33,7 @@ describe('acceptance', () => {
|
||||
'test/fixtures/index.html',
|
||||
'test/fixtures/critical.css',
|
||||
'--no-minify',
|
||||
'--polyfill',
|
||||
]);
|
||||
|
||||
expect(code).toBe(0);
|
||||
@ -46,6 +47,7 @@ describe('acceptance', () => {
|
||||
'test/fixtures/critical.css',
|
||||
'test/fixtures/index.html',
|
||||
'--no-minify',
|
||||
'--polyfill',
|
||||
]);
|
||||
|
||||
expect(code).toBe(0);
|
||||
@ -53,7 +55,7 @@ describe('acceptance', () => {
|
||||
});
|
||||
|
||||
test('Work well with the critical CSS file piped to inline-critical and html file as input', async () => {
|
||||
const expected = await read('expected/index-inlined-async-final.html');
|
||||
const expected = await read('expected/index-inlined-async-final-print.html');
|
||||
const {stdout, code} = await pipe('fixtures/critical.css', ['test/fixtures/index.html', '--no-minify']);
|
||||
|
||||
expect(code).toBe(0);
|
||||
@ -61,7 +63,7 @@ describe('acceptance', () => {
|
||||
});
|
||||
|
||||
test('Work well with the html file piped to inline-critical and critical CSS file as input', async () => {
|
||||
const expected = await read('expected/index-inlined-async-final.html');
|
||||
const expected = await read('expected/index-inlined-async-final-print.html');
|
||||
const {stdout, code} = await pipe('fixtures/index.html', ['test/fixtures/critical.css', '--no-minify']);
|
||||
|
||||
expect(code).toBe(0);
|
||||
@ -100,6 +102,7 @@ describe('Mocked', () => {
|
||||
'selector',
|
||||
'-m',
|
||||
'-e',
|
||||
'-p',
|
||||
]);
|
||||
|
||||
const cssExpected = await read('fixtures/critical.css');
|
||||
@ -111,6 +114,7 @@ describe('Mocked', () => {
|
||||
ignore: ['ignore-me', /regexp/],
|
||||
minify: true,
|
||||
extract: true,
|
||||
preload: true,
|
||||
});
|
||||
});
|
||||
|
||||
@ -130,6 +134,8 @@ describe('Mocked', () => {
|
||||
'selector',
|
||||
'--minify',
|
||||
'--extract',
|
||||
'--preload',
|
||||
'--polyfill',
|
||||
'--noscript',
|
||||
'head',
|
||||
]);
|
||||
@ -143,6 +149,8 @@ describe('Mocked', () => {
|
||||
ignore: ['ignore-me', /regexp/],
|
||||
minify: true,
|
||||
extract: true,
|
||||
preload: true,
|
||||
polyfill: true,
|
||||
noscript: 'head',
|
||||
});
|
||||
});
|
||||
|
||||
329
test/expected/cartoon-absolute-expected-print.html
Normal file
329
test/expected/cartoon-absolute-expected-print.html
Normal file
@ -0,0 +1,329 @@
|
||||
<!doctype html>
|
||||
<html class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>critical css test</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
|
||||
|
||||
<!-- build:css styles/main.css -->
|
||||
<style>
|
||||
body {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.header {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.header {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
.header h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
line-height: 40px;
|
||||
padding-bottom: 19px;
|
||||
}
|
||||
.jumbotron {
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
.jumbotron .btn {
|
||||
font-size: 21px;
|
||||
padding: 14px 24px;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 730px;
|
||||
}
|
||||
.header {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.jumbotron {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
background: 0 0;
|
||||
}
|
||||
h1 {
|
||||
margin: 0.67em 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
@media print {
|
||||
* {
|
||||
color: #000 !important;
|
||||
text-shadow: none !important;
|
||||
background: 0 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
a[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
a[href^="#"]:after {
|
||||
content: "";
|
||||
}
|
||||
h3,
|
||||
p {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:after,
|
||||
:before {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.42857143;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
a {
|
||||
color: #428bca;
|
||||
text-decoration: none;
|
||||
}
|
||||
h1,
|
||||
h3 {
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
color: inherit;
|
||||
}
|
||||
h1,
|
||||
h3 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.lead {
|
||||
margin-bottom: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.lead {
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
.text-muted {
|
||||
color: #999;
|
||||
}
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.container {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
width: 750px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
width: 970px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
width: 1170px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.42857143;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.btn-success {
|
||||
color: #fff;
|
||||
background-color: #5cb85c;
|
||||
border-color: #4cae4c;
|
||||
}
|
||||
.btn-lg {
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.33;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.nav {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.nav > li {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.nav > li > a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.nav-pills > li {
|
||||
float: left;
|
||||
}
|
||||
.nav-pills > li > a {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.nav-pills > li + li {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.nav-pills > li.active > a {
|
||||
color: #fff;
|
||||
background-color: #428bca;
|
||||
}
|
||||
.jumbotron {
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
color: inherit;
|
||||
background-color: #eee;
|
||||
}
|
||||
.jumbotron h1 {
|
||||
color: inherit;
|
||||
}
|
||||
.jumbotron p {
|
||||
margin-bottom: 15px;
|
||||
font-size: 21px;
|
||||
font-weight: 200;
|
||||
}
|
||||
.container .jumbotron {
|
||||
border-radius: 6px;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.jumbotron {
|
||||
padding-top: 48px;
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
.container .jumbotron {
|
||||
padding-right: 60px;
|
||||
padding-left: 60px;
|
||||
}
|
||||
.jumbotron h1 {
|
||||
font-size: 63px;
|
||||
}
|
||||
}
|
||||
.container:after,
|
||||
.container:before,
|
||||
.nav:after,
|
||||
.nav:before {
|
||||
display: table;
|
||||
content: " ";
|
||||
}
|
||||
.container:after,
|
||||
.nav:after {
|
||||
clear: both;
|
||||
}
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/css/cartoon.08b3295a.css" media="print" onload="this.media='all'">
|
||||
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.c8dce395.css" media="print" onload="this.media='all'">
|
||||
<!-- endbuild -->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lt IE 10]>
|
||||
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
|
||||
your browser</a> to improve your experience.</p>
|
||||
<![endif]-->
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<h3 class="text-muted">critical css test</h3>
|
||||
</div>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1>'Allo, 'Allo!</h1>
|
||||
|
||||
<p class="lead">Always a pleasure scaffolding your apps.</p>
|
||||
|
||||
<p><a class="btn btn-lg btn-success" href="#">Splendid!</a></p>
|
||||
</div>
|
||||
|
||||
<div class="row marketing">
|
||||
<div class="col-lg-6">
|
||||
<h4>HTML5 Boilerplate</h4>
|
||||
|
||||
<p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or
|
||||
sites.</p>
|
||||
|
||||
<h4>Bootstrap</h4>
|
||||
|
||||
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>♥ from the Yeoman team</p>
|
||||
</div>
|
||||
</div>
|
||||
<noscript><link rel="stylesheet" href="/css/cartoon.08b3295a.css"></noscript>
|
||||
<noscript><link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.c8dce395.css"></noscript>
|
||||
</body>
|
||||
</html>
|
||||
62
test/expected/cartoon-expected-minified-alt-print.html
Normal file
62
test/expected/cartoon-expected-minified-alt-print.html
Normal file
@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>critical css test</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
|
||||
|
||||
<!-- build:css styles/main.css -->
|
||||
<style>body{padding-top:20px;padding-bottom:20px}.header{padding-left:15px;padding-right:15px}.header{border-bottom:1px solid #e5e5e5}.header h3{margin-top:0;margin-bottom:0;line-height:40px;padding-bottom:19px}.jumbotron{text-align:center;border-bottom:1px solid #e5e5e5}.jumbotron .btn{font-size:21px;padding:14px 24px}@media screen and (min-width:768px){.container{max-width:730px}.header{padding-left:0;padding-right:0}.header{margin-bottom:30px}.jumbotron{border-bottom:0}}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a{background:0 0}h1{margin:.67em 0;font-size:2em}@media print{*{color:#000!important;text-shadow:none!important;background:0 0!important;box-shadow:none!important}a{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}a[href^="#"]:after{content:""}h3,p{orphans:3;widows:3}h3{page-break-after:avoid}}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%;-webkit-tap-highlight-color:transparent}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}a{color:#428bca;text-decoration:none}h1,h3{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}h1,h3{margin-top:20px;margin-bottom:10px}h1{font-size:36px}h3{font-size:24px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:200;line-height:1.4}@media (min-width:768px){.lead{font-size:21px}}.text-muted{color:#999}ul{margin-top:0;margin-bottom:10px}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-lg{padding:10px 16px;font-size:18px;line-height:1.33;border-radius:6px}.nav{padding-left:0;margin-bottom:0;list-style:none}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav-pills>li{float:left}.nav-pills>li>a{border-radius:4px}.nav-pills>li+li{margin-left:2px}.nav-pills>li.active>a{color:#fff;background-color:#428bca}.jumbotron{padding:30px;margin-bottom:30px;color:inherit;background-color:#eee}.jumbotron h1{color:inherit}.jumbotron p{margin-bottom:15px;font-size:21px;font-weight:200}.container .jumbotron{border-radius:6px}@media screen and (min-width:768px){.jumbotron{padding-top:48px;padding-bottom:48px}.container .jumbotron{padding-right:60px;padding-left:60px}.jumbotron h1{font-size:63px}}.container:after,.container:before,.nav:after,.nav:before{display:table;content:" "}.container:after,.nav:after{clear:both}.pull-right{float:right!important}</style>
|
||||
<link rel="stylesheet" href="css/cartoon.08b3295a.css" media="print" onload="this.media='all'">
|
||||
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.c8dce395.css" media="print" onload="this.media='all'">
|
||||
<!-- endbuild -->
|
||||
<noscript><link rel="stylesheet" href="css/cartoon.08b3295a.css"></noscript>
|
||||
<noscript><link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.c8dce395.css"></noscript>
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lt IE 10]>
|
||||
<p class="browsehappy">
|
||||
You are using an <strong>outdated</strong> browser. Please
|
||||
<a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
|
||||
</p>
|
||||
<![endif]-->
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<h3 class="text-muted">critical css test</h3>
|
||||
</div>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1>'Allo, 'Allo!</h1>
|
||||
|
||||
<p class="lead">Always a pleasure scaffolding your apps.</p>
|
||||
|
||||
<p><a class="btn btn-lg btn-success" href="#">Splendid!</a></p>
|
||||
</div>
|
||||
|
||||
<div class="row marketing">
|
||||
<div class="col-lg-6">
|
||||
<h4>HTML5 Boilerplate</h4>
|
||||
|
||||
<p>
|
||||
HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or
|
||||
sites.
|
||||
</p>
|
||||
|
||||
<h4>Bootstrap</h4>
|
||||
|
||||
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer"><p>♥ from the Yeoman team</p></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
62
test/expected/cartoon-expected-minified-print.html
Normal file
62
test/expected/cartoon-expected-minified-print.html
Normal file
@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>critical css test</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
|
||||
|
||||
<!-- build:css styles/main.css -->
|
||||
<style>body{padding-top:20px;padding-bottom:20px}.header{padding-left:15px;padding-right:15px}.header{border-bottom:1px solid #e5e5e5}.header h3{margin-top:0;margin-bottom:0;line-height:40px;padding-bottom:19px}.jumbotron{text-align:center;border-bottom:1px solid #e5e5e5}.jumbotron .btn{font-size:21px;padding:14px 24px}@media screen and (min-width:768px){.container{max-width:730px}.header{padding-left:0;padding-right:0}.header{margin-bottom:30px}.jumbotron{border-bottom:0}}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a{background:0 0}h1{margin:.67em 0;font-size:2em}@media print{*{color:#000!important;text-shadow:none!important;background:0 0!important;box-shadow:none!important}a{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}a[href^="#"]:after{content:""}h3,p{orphans:3;widows:3}h3{page-break-after:avoid}}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%;-webkit-tap-highlight-color:transparent}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}a{color:#428bca;text-decoration:none}h1,h3{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}h1,h3{margin-top:20px;margin-bottom:10px}h1{font-size:36px}h3{font-size:24px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:200;line-height:1.4}@media (min-width:768px){.lead{font-size:21px}}.text-muted{color:#999}ul{margin-top:0;margin-bottom:10px}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-lg{padding:10px 16px;font-size:18px;line-height:1.33;border-radius:6px}.nav{padding-left:0;margin-bottom:0;list-style:none}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav-pills>li{float:left}.nav-pills>li>a{border-radius:4px}.nav-pills>li+li{margin-left:2px}.nav-pills>li.active>a{color:#fff;background-color:#428bca}.jumbotron{padding:30px;margin-bottom:30px;color:inherit;background-color:#eee}.jumbotron h1{color:inherit}.jumbotron p{margin-bottom:15px;font-size:21px;font-weight:200}.container .jumbotron{border-radius:6px}@media screen and (min-width:768px){.jumbotron{padding-top:48px;padding-bottom:48px}.container .jumbotron{padding-right:60px;padding-left:60px}.jumbotron h1{font-size:63px}}.container:after,.container:before,.nav:after,.nav:before{display:table;content:" "}.container:after,.nav:after{clear:both}.pull-right{float:right!important}</style>
|
||||
<link rel="stylesheet" href="css/cartoon.08b3295a.css" media="print" onload="this.media='all'">
|
||||
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.c8dce395.css" media="print" onload="this.media='all'">
|
||||
<!-- endbuild -->
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lt IE 10]>
|
||||
<p class="browsehappy">
|
||||
You are using an <strong>outdated</strong> browser. Please
|
||||
<a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
|
||||
</p>
|
||||
<![endif]-->
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<h3 class="text-muted">critical css test</h3>
|
||||
</div>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1>'Allo, 'Allo!</h1>
|
||||
|
||||
<p class="lead">Always a pleasure scaffolding your apps.</p>
|
||||
|
||||
<p><a class="btn btn-lg btn-success" href="#">Splendid!</a></p>
|
||||
</div>
|
||||
|
||||
<div class="row marketing">
|
||||
<div class="col-lg-6">
|
||||
<h4>HTML5 Boilerplate</h4>
|
||||
|
||||
<p>
|
||||
HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or
|
||||
sites.
|
||||
</p>
|
||||
|
||||
<h4>Bootstrap</h4>
|
||||
|
||||
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer"><p>♥ from the Yeoman team</p></div>
|
||||
</div>
|
||||
<noscript><link rel="stylesheet" href="css/cartoon.08b3295a.css"></noscript>
|
||||
<noscript><link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.c8dce395.css"></noscript>
|
||||
</body>
|
||||
</html>
|
||||
330
test/expected/cartoon-expected-print.html
Normal file
330
test/expected/cartoon-expected-print.html
Normal file
@ -0,0 +1,330 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>critical css test</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
|
||||
|
||||
<!-- build:css styles/main.css -->
|
||||
<style>
|
||||
body {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.header {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.header {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
.header h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
line-height: 40px;
|
||||
padding-bottom: 19px;
|
||||
}
|
||||
.jumbotron {
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
.jumbotron .btn {
|
||||
font-size: 21px;
|
||||
padding: 14px 24px;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 730px;
|
||||
}
|
||||
.header {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.jumbotron {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
background: 0 0;
|
||||
}
|
||||
h1 {
|
||||
margin: 0.67em 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
@media print {
|
||||
* {
|
||||
color: #000 !important;
|
||||
text-shadow: none !important;
|
||||
background: 0 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
a[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
a[href^="#"]:after {
|
||||
content: "";
|
||||
}
|
||||
h3,
|
||||
p {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:after,
|
||||
:before {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.42857143;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
a {
|
||||
color: #428bca;
|
||||
text-decoration: none;
|
||||
}
|
||||
h1,
|
||||
h3 {
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
color: inherit;
|
||||
}
|
||||
h1,
|
||||
h3 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.lead {
|
||||
margin-bottom: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.lead {
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
.text-muted {
|
||||
color: #999;
|
||||
}
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.container {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
width: 750px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
width: 970px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
width: 1170px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.42857143;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.btn-success {
|
||||
color: #fff;
|
||||
background-color: #5cb85c;
|
||||
border-color: #4cae4c;
|
||||
}
|
||||
.btn-lg {
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.33;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.nav {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.nav > li {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.nav > li > a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.nav-pills > li {
|
||||
float: left;
|
||||
}
|
||||
.nav-pills > li > a {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.nav-pills > li + li {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.nav-pills > li.active > a {
|
||||
color: #fff;
|
||||
background-color: #428bca;
|
||||
}
|
||||
.jumbotron {
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
color: inherit;
|
||||
background-color: #eee;
|
||||
}
|
||||
.jumbotron h1 {
|
||||
color: inherit;
|
||||
}
|
||||
.jumbotron p {
|
||||
margin-bottom: 15px;
|
||||
font-size: 21px;
|
||||
font-weight: 200;
|
||||
}
|
||||
.container .jumbotron {
|
||||
border-radius: 6px;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.jumbotron {
|
||||
padding-top: 48px;
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
.container .jumbotron {
|
||||
padding-right: 60px;
|
||||
padding-left: 60px;
|
||||
}
|
||||
.jumbotron h1 {
|
||||
font-size: 63px;
|
||||
}
|
||||
}
|
||||
.container:after,
|
||||
.container:before,
|
||||
.nav:after,
|
||||
.nav:before {
|
||||
display: table;
|
||||
content: " ";
|
||||
}
|
||||
.container:after,
|
||||
.nav:after {
|
||||
clear: both;
|
||||
}
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="css/cartoon.08b3295a.css" media="print" onload="this.media='all'">
|
||||
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.c8dce395.css" media="print" onload="this.media='all'">
|
||||
<!-- endbuild -->
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lt IE 10]>
|
||||
<p class="browsehappy">
|
||||
You are using an <strong>outdated</strong> browser. Please
|
||||
<a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
|
||||
</p>
|
||||
<![endif]-->
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<h3 class="text-muted">critical css test</h3>
|
||||
</div>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1>'Allo, 'Allo!</h1>
|
||||
|
||||
<p class="lead">Always a pleasure scaffolding your apps.</p>
|
||||
|
||||
<p><a class="btn btn-lg btn-success" href="#">Splendid!</a></p>
|
||||
</div>
|
||||
|
||||
<div class="row marketing">
|
||||
<div class="col-lg-6">
|
||||
<h4>HTML5 Boilerplate</h4>
|
||||
|
||||
<p>
|
||||
HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or
|
||||
sites.
|
||||
</p>
|
||||
|
||||
<h4>Bootstrap</h4>
|
||||
|
||||
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer"><p>♥ from the Yeoman team</p></div>
|
||||
</div>
|
||||
<noscript><link rel="stylesheet" href="css/cartoon.08b3295a.css"></noscript>
|
||||
<noscript><link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.c8dce395.css"></noscript>
|
||||
</body>
|
||||
</html>
|
||||
328
test/expected/external-expected-print.html
Normal file
328
test/expected/external-expected-print.html
Normal file
@ -0,0 +1,328 @@
|
||||
<!doctype html>
|
||||
<html class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>critical css test</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
|
||||
|
||||
<!-- build:css styles/main.css -->
|
||||
<style>
|
||||
body {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.header {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.header {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
.header h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
line-height: 40px;
|
||||
padding-bottom: 19px;
|
||||
}
|
||||
.jumbotron {
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
.jumbotron .btn {
|
||||
font-size: 21px;
|
||||
padding: 14px 24px;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 730px;
|
||||
}
|
||||
.header {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.jumbotron {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
background: 0 0;
|
||||
}
|
||||
h1 {
|
||||
margin: 0.67em 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
@media print {
|
||||
* {
|
||||
color: #000 !important;
|
||||
text-shadow: none !important;
|
||||
background: 0 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
a[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
a[href^="#"]:after {
|
||||
content: "";
|
||||
}
|
||||
h3,
|
||||
p {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:after,
|
||||
:before {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.42857143;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
a {
|
||||
color: #428bca;
|
||||
text-decoration: none;
|
||||
}
|
||||
h1,
|
||||
h3 {
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
color: inherit;
|
||||
}
|
||||
h1,
|
||||
h3 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.lead {
|
||||
margin-bottom: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.lead {
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
.text-muted {
|
||||
color: #999;
|
||||
}
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.container {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
width: 750px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
width: 970px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
width: 1170px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.42857143;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.btn-success {
|
||||
color: #fff;
|
||||
background-color: #5cb85c;
|
||||
border-color: #4cae4c;
|
||||
}
|
||||
.btn-lg {
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.33;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.nav {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.nav > li {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.nav > li > a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.nav-pills > li {
|
||||
float: left;
|
||||
}
|
||||
.nav-pills > li > a {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.nav-pills > li + li {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.nav-pills > li.active > a {
|
||||
color: #fff;
|
||||
background-color: #428bca;
|
||||
}
|
||||
.jumbotron {
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
color: inherit;
|
||||
background-color: #eee;
|
||||
}
|
||||
.jumbotron h1 {
|
||||
color: inherit;
|
||||
}
|
||||
.jumbotron p {
|
||||
margin-bottom: 15px;
|
||||
font-size: 21px;
|
||||
font-weight: 200;
|
||||
}
|
||||
.container .jumbotron {
|
||||
border-radius: 6px;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.jumbotron {
|
||||
padding-top: 48px;
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
.container .jumbotron {
|
||||
padding-right: 60px;
|
||||
padding-left: 60px;
|
||||
}
|
||||
.jumbotron h1 {
|
||||
font-size: 63px;
|
||||
}
|
||||
}
|
||||
.container:after,
|
||||
.container:before,
|
||||
.nav:after,
|
||||
.nav:before {
|
||||
display: table;
|
||||
content: " ";
|
||||
}
|
||||
.container:after,
|
||||
.nav:after {
|
||||
clear: both;
|
||||
}
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
</style>
|
||||
<link href="css/main.css" rel="preload" as="style">
|
||||
<link rel="stylesheet" href="css/main.css" media="print" onload="this.media='all'">
|
||||
<link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="preload" as="style">
|
||||
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" media="print" onload="this.media='all'">
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="preload" as="style">
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css" media="print" onload="this.media='all'">
|
||||
<!-- endbuild -->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lt IE 10]>
|
||||
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
||||
<![endif]-->
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<h3 class="text-muted">critical css test</h3>
|
||||
</div>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1>'Allo, 'Allo!</h1>
|
||||
<p class="lead">Always a pleasure scaffolding your apps.</p>
|
||||
<p><a class="btn btn-lg btn-success" href="#">Splendid!</a></p>
|
||||
</div>
|
||||
|
||||
<div class="row marketing">
|
||||
<div class="col-lg-6">
|
||||
<h4>HTML5 Boilerplate</h4>
|
||||
<p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>
|
||||
|
||||
<h4>Bootstrap</h4>
|
||||
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>♥ from the Yeoman team</p>
|
||||
</div>
|
||||
</div>
|
||||
<noscript><link rel="stylesheet" href="css/main.css"></noscript>
|
||||
<noscript><link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"></noscript>
|
||||
<noscript><link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css"></noscript>
|
||||
</body>
|
||||
</html>
|
||||
325
test/expected/external-extract-expected-print.html
Normal file
325
test/expected/external-extract-expected-print.html
Normal file
@ -0,0 +1,325 @@
|
||||
<!doctype html>
|
||||
<html class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>critical css test</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
|
||||
|
||||
<!-- build:css styles/main.css -->
|
||||
<style>
|
||||
body {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.header {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.header {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
.header h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
line-height: 40px;
|
||||
padding-bottom: 19px;
|
||||
}
|
||||
.jumbotron {
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
.jumbotron .btn {
|
||||
font-size: 21px;
|
||||
padding: 14px 24px;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 730px;
|
||||
}
|
||||
.header {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.jumbotron {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
background: 0 0;
|
||||
}
|
||||
h1 {
|
||||
margin: 0.67em 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
@media print {
|
||||
* {
|
||||
color: #000 !important;
|
||||
text-shadow: none !important;
|
||||
background: 0 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
a[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
a[href^="#"]:after {
|
||||
content: "";
|
||||
}
|
||||
h3,
|
||||
p {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:after,
|
||||
:before {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.42857143;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
a {
|
||||
color: #428bca;
|
||||
text-decoration: none;
|
||||
}
|
||||
h1,
|
||||
h3 {
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
color: inherit;
|
||||
}
|
||||
h1,
|
||||
h3 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.lead {
|
||||
margin-bottom: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.lead {
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
.text-muted {
|
||||
color: #999;
|
||||
}
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.container {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
width: 750px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
width: 970px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
width: 1170px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.42857143;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.btn-success {
|
||||
color: #fff;
|
||||
background-color: #5cb85c;
|
||||
border-color: #4cae4c;
|
||||
}
|
||||
.btn-lg {
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.33;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.nav {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.nav > li {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.nav > li > a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.nav-pills > li {
|
||||
float: left;
|
||||
}
|
||||
.nav-pills > li > a {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.nav-pills > li + li {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.nav-pills > li.active > a {
|
||||
color: #fff;
|
||||
background-color: #428bca;
|
||||
}
|
||||
.jumbotron {
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
color: inherit;
|
||||
background-color: #eee;
|
||||
}
|
||||
.jumbotron h1 {
|
||||
color: inherit;
|
||||
}
|
||||
.jumbotron p {
|
||||
margin-bottom: 15px;
|
||||
font-size: 21px;
|
||||
font-weight: 200;
|
||||
}
|
||||
.container .jumbotron {
|
||||
border-radius: 6px;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.jumbotron {
|
||||
padding-top: 48px;
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
.container .jumbotron {
|
||||
padding-right: 60px;
|
||||
padding-left: 60px;
|
||||
}
|
||||
.jumbotron h1 {
|
||||
font-size: 63px;
|
||||
}
|
||||
}
|
||||
.container:after,
|
||||
.container:before,
|
||||
.nav:after,
|
||||
.nav:before {
|
||||
display: table;
|
||||
content: " ";
|
||||
}
|
||||
.container:after,
|
||||
.nav:after {
|
||||
clear: both;
|
||||
}
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="css/main.d41d8cd9.css" media="print" onload="this.media='all'">
|
||||
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.c8dce395.css" media="print" onload="this.media='all'">
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css" media="print" onload="this.media='all'">
|
||||
<!-- endbuild -->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lt IE 10]>
|
||||
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
||||
<![endif]-->
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<h3 class="text-muted">critical css test</h3>
|
||||
</div>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1>'Allo, 'Allo!</h1>
|
||||
<p class="lead">Always a pleasure scaffolding your apps.</p>
|
||||
<p><a class="btn btn-lg btn-success" href="#">Splendid!</a></p>
|
||||
</div>
|
||||
|
||||
<div class="row marketing">
|
||||
<div class="col-lg-6">
|
||||
<h4>HTML5 Boilerplate</h4>
|
||||
<p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>
|
||||
|
||||
<h4>Bootstrap</h4>
|
||||
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>♥ from the Yeoman team</p>
|
||||
</div>
|
||||
</div>
|
||||
<noscript><link rel="stylesheet" href="css/main.d41d8cd9.css"></noscript>
|
||||
<noscript><link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.c8dce395.css"></noscript>
|
||||
<noscript><link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css"></noscript>
|
||||
</body>
|
||||
</html>
|
||||
324
test/expected/external-ignore-expected-print.html
Normal file
324
test/expected/external-ignore-expected-print.html
Normal file
@ -0,0 +1,324 @@
|
||||
<!doctype html>
|
||||
<html class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>critical css test</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
|
||||
|
||||
<!-- build:css styles/main.css -->
|
||||
<style>
|
||||
body {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.header {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.header {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
.header h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
line-height: 40px;
|
||||
padding-bottom: 19px;
|
||||
}
|
||||
.jumbotron {
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
.jumbotron .btn {
|
||||
font-size: 21px;
|
||||
padding: 14px 24px;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 730px;
|
||||
}
|
||||
.header {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.jumbotron {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
background: 0 0;
|
||||
}
|
||||
h1 {
|
||||
margin: 0.67em 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
@media print {
|
||||
* {
|
||||
color: #000 !important;
|
||||
text-shadow: none !important;
|
||||
background: 0 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
a[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
a[href^="#"]:after {
|
||||
content: "";
|
||||
}
|
||||
h3,
|
||||
p {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:after,
|
||||
:before {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.42857143;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
a {
|
||||
color: #428bca;
|
||||
text-decoration: none;
|
||||
}
|
||||
h1,
|
||||
h3 {
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
color: inherit;
|
||||
}
|
||||
h1,
|
||||
h3 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.lead {
|
||||
margin-bottom: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.lead {
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
.text-muted {
|
||||
color: #999;
|
||||
}
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.container {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
width: 750px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
width: 970px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
width: 1170px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.42857143;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.btn-success {
|
||||
color: #fff;
|
||||
background-color: #5cb85c;
|
||||
border-color: #4cae4c;
|
||||
}
|
||||
.btn-lg {
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.33;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.nav {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.nav > li {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.nav > li > a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.nav-pills > li {
|
||||
float: left;
|
||||
}
|
||||
.nav-pills > li > a {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.nav-pills > li + li {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.nav-pills > li.active > a {
|
||||
color: #fff;
|
||||
background-color: #428bca;
|
||||
}
|
||||
.jumbotron {
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
color: inherit;
|
||||
background-color: #eee;
|
||||
}
|
||||
.jumbotron h1 {
|
||||
color: inherit;
|
||||
}
|
||||
.jumbotron p {
|
||||
margin-bottom: 15px;
|
||||
font-size: 21px;
|
||||
font-weight: 200;
|
||||
}
|
||||
.container .jumbotron {
|
||||
border-radius: 6px;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.jumbotron {
|
||||
padding-top: 48px;
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
.container .jumbotron {
|
||||
padding-right: 60px;
|
||||
padding-left: 60px;
|
||||
}
|
||||
.jumbotron h1 {
|
||||
font-size: 63px;
|
||||
}
|
||||
}
|
||||
.container:after,
|
||||
.container:before,
|
||||
.nav:after,
|
||||
.nav:before {
|
||||
display: table;
|
||||
content: " ";
|
||||
}
|
||||
.container:after,
|
||||
.nav:after {
|
||||
clear: both;
|
||||
}
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="css/main.css" media="print" onload="this.media='all'">
|
||||
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css" media="print" onload="this.media='all'">
|
||||
<!-- endbuild -->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lt IE 10]>
|
||||
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
||||
<![endif]-->
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<h3 class="text-muted">critical css test</h3>
|
||||
</div>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1>'Allo, 'Allo!</h1>
|
||||
<p class="lead">Always a pleasure scaffolding your apps.</p>
|
||||
<p><a class="btn btn-lg btn-success" href="#">Splendid!</a></p>
|
||||
</div>
|
||||
|
||||
<div class="row marketing">
|
||||
<div class="col-lg-6">
|
||||
<h4>HTML5 Boilerplate</h4>
|
||||
<p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>
|
||||
|
||||
<h4>Bootstrap</h4>
|
||||
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>♥ from the Yeoman team</p>
|
||||
</div>
|
||||
</div>
|
||||
<noscript><link rel="stylesheet" href="css/main.css"></noscript>
|
||||
<noscript><link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css"></noscript>
|
||||
</body>
|
||||
</html>
|
||||
57
test/expected/index-before-print.html
Normal file
57
test/expected/index-before-print.html
Normal file
@ -0,0 +1,57 @@
|
||||
<!doctype html>
|
||||
<html class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body{padding-top:20px;padding-bottom:20px}.header{padding-left:15px;padding-right:15px}.header{border-bottom:1px solid #e5e5e5}.header h3{margin-top:0;margin-bottom:0;line-height:40px;padding-bottom:19px}.jumbotron{text-align:center;border-bottom:1px solid #e5e5e5}.jumbotron .btn{font-size:21px;padding:14px 24px}@media screen and (min-width:768px){.container{max-width:730px}.header{padding-left:0;padding-right:0}.header{margin-bottom:30px}.jumbotron{border-bottom:0}}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a{background:0 0}h1{margin:.67em 0;font-size:2em}@media print{*{color:#000!important;text-shadow:none!important;background:0 0!important;box-shadow:none!important}a{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}a[href^="#"]:after{content:""}h3,p{orphans:3;widows:3}h3{page-break-after:avoid}}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%;-webkit-tap-highlight-color:transparent}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}a{color:#428bca;text-decoration:none}h1,h3{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}h1,h3{margin-top:20px;margin-bottom:10px}h1{font-size:36px}h3{font-size:24px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:200;line-height:1.4}@media (min-width:768px){.lead{font-size:21px}}.text-muted{color:#999}ul{margin-top:0;margin-bottom:10px}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-lg{padding:10px 16px;font-size:18px;line-height:1.33;border-radius:6px}.nav{padding-left:0;margin-bottom:0;list-style:none}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav-pills>li{float:left}.nav-pills>li>a{border-radius:4px}.nav-pills>li+li{margin-left:2px}.nav-pills>li.active>a{color:#fff;background-color:#428bca}.jumbotron{padding:30px;margin-bottom:30px;color:inherit;background-color:#eee}.jumbotron h1{color:inherit}.jumbotron p{margin-bottom:15px;font-size:21px;font-weight:200}.container .jumbotron{border-radius:6px}@media screen and (min-width:768px){.jumbotron{padding-top:48px;padding-bottom:48px}.container .jumbotron{padding-right:60px;padding-left:60px}.jumbotron h1{font-size:63px}}.container:after,.container:before,.nav:after,.nav:before{display:table;content:" "}.container:after,.nav:after{clear:both}.pull-right{float:right!important}
|
||||
</style>
|
||||
<title>critical css test</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
|
||||
|
||||
<!-- build:css styles/main.css -->
|
||||
<link rel="stylesheet" href="css/main.css" media="print" onload="this.media='all'">
|
||||
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" media="print" onload="this.media='all'">
|
||||
<!-- endbuild -->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lt IE 10]>
|
||||
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
||||
<![endif]-->
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<h3 class="text-muted">critical css test</h3>
|
||||
</div>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1>'Allo, 'Allo!</h1>
|
||||
<p class="lead">Always a pleasure scaffolding your apps.</p>
|
||||
<p><a class="btn btn-lg btn-success" href="#">Splendid!</a></p>
|
||||
</div>
|
||||
|
||||
<div class="row marketing">
|
||||
<div class="col-lg-6">
|
||||
<h4>HTML5 Boilerplate</h4>
|
||||
<p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>
|
||||
|
||||
<h4>Bootstrap</h4>
|
||||
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>♥ from the Yeoman team</p>
|
||||
</div>
|
||||
</div>
|
||||
<noscript><link rel="stylesheet" href="css/main.css"></noscript>
|
||||
<noscript><link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"></noscript>
|
||||
</body>
|
||||
</html>
|
||||
323
test/expected/index-inlined-absolute-print.html
Normal file
323
test/expected/index-inlined-absolute-print.html
Normal file
@ -0,0 +1,323 @@
|
||||
<!doctype html>
|
||||
<html class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>critical css test</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
|
||||
|
||||
<!-- build:css styles/main.css -->
|
||||
<style>
|
||||
body {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.header {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.header {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
.header h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
line-height: 40px;
|
||||
padding-bottom: 19px;
|
||||
}
|
||||
.jumbotron {
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
.jumbotron .btn {
|
||||
font-size: 21px;
|
||||
padding: 14px 24px;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 730px;
|
||||
}
|
||||
.header {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.jumbotron {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
background: 0 0;
|
||||
}
|
||||
h1 {
|
||||
margin: 0.67em 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
@media print {
|
||||
* {
|
||||
color: #000 !important;
|
||||
text-shadow: none !important;
|
||||
background: 0 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
a[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
a[href^="#"]:after {
|
||||
content: "";
|
||||
}
|
||||
h3,
|
||||
p {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:after,
|
||||
:before {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.42857143;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
a {
|
||||
color: #428bca;
|
||||
text-decoration: none;
|
||||
}
|
||||
h1,
|
||||
h3 {
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
color: inherit;
|
||||
}
|
||||
h1,
|
||||
h3 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.lead {
|
||||
margin-bottom: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.lead {
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
.text-muted {
|
||||
color: #999;
|
||||
}
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.container {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
width: 750px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
width: 970px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
width: 1170px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.42857143;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.btn-success {
|
||||
color: #fff;
|
||||
background-color: #5cb85c;
|
||||
border-color: #4cae4c;
|
||||
}
|
||||
.btn-lg {
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.33;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.nav {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.nav > li {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.nav > li > a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.nav-pills > li {
|
||||
float: left;
|
||||
}
|
||||
.nav-pills > li > a {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.nav-pills > li + li {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.nav-pills > li.active > a {
|
||||
color: #fff;
|
||||
background-color: #428bca;
|
||||
}
|
||||
.jumbotron {
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
color: inherit;
|
||||
background-color: #eee;
|
||||
}
|
||||
.jumbotron h1 {
|
||||
color: inherit;
|
||||
}
|
||||
.jumbotron p {
|
||||
margin-bottom: 15px;
|
||||
font-size: 21px;
|
||||
font-weight: 200;
|
||||
}
|
||||
.container .jumbotron {
|
||||
border-radius: 6px;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.jumbotron {
|
||||
padding-top: 48px;
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
.container .jumbotron {
|
||||
padding-right: 60px;
|
||||
padding-left: 60px;
|
||||
}
|
||||
.jumbotron h1 {
|
||||
font-size: 63px;
|
||||
}
|
||||
}
|
||||
.container:after,
|
||||
.container:before,
|
||||
.nav:after,
|
||||
.nav:before {
|
||||
display: table;
|
||||
content: " ";
|
||||
}
|
||||
.container:after,
|
||||
.nav:after {
|
||||
clear: both;
|
||||
}
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'">
|
||||
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" media="print" onload="this.media='all'">
|
||||
<!-- endbuild -->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lt IE 10]>
|
||||
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
||||
<![endif]-->
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<h3 class="text-muted">critical css test</h3>
|
||||
</div>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1>'Allo, 'Allo!</h1>
|
||||
<p class="lead">Always a pleasure scaffolding your apps.</p>
|
||||
<p><a class="btn btn-lg btn-success" href="#">Splendid!</a></p>
|
||||
</div>
|
||||
|
||||
<div class="row marketing">
|
||||
<div class="col-lg-6">
|
||||
<h4>HTML5 Boilerplate</h4>
|
||||
<p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>
|
||||
|
||||
<h4>Bootstrap</h4>
|
||||
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>♥ from the Yeoman team</p>
|
||||
</div>
|
||||
</div>
|
||||
<noscript><link rel="stylesheet" href="/css/main.css"></noscript>
|
||||
<noscript><link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css"></noscript>
|
||||
</body>
|
||||
</html>
|
||||
323
test/expected/index-inlined-async-final-print.html
Normal file
323
test/expected/index-inlined-async-final-print.html
Normal file
@ -0,0 +1,323 @@
|
||||
<!doctype html>
|
||||
<html class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>critical css test</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
|
||||
|
||||
<!-- build:css styles/main.css -->
|
||||
<style>
|
||||
body {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.header {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.header {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
.header h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
line-height: 40px;
|
||||
padding-bottom: 19px;
|
||||
}
|
||||
.jumbotron {
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
.jumbotron .btn {
|
||||
font-size: 21px;
|
||||
padding: 14px 24px;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 730px;
|
||||
}
|
||||
.header {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.jumbotron {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
background: 0 0;
|
||||
}
|
||||
h1 {
|
||||
margin: 0.67em 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
@media print {
|
||||
* {
|
||||
color: #000 !important;
|
||||
text-shadow: none !important;
|
||||
background: 0 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
a[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
a[href^="#"]:after {
|
||||
content: "";
|
||||
}
|
||||
h3,
|
||||
p {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:after,
|
||||
:before {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.42857143;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
a {
|
||||
color: #428bca;
|
||||
text-decoration: none;
|
||||
}
|
||||
h1,
|
||||
h3 {
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
color: inherit;
|
||||
}
|
||||
h1,
|
||||
h3 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.lead {
|
||||
margin-bottom: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.lead {
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
.text-muted {
|
||||
color: #999;
|
||||
}
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.container {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
width: 750px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
width: 970px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
width: 1170px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.42857143;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.btn-success {
|
||||
color: #fff;
|
||||
background-color: #5cb85c;
|
||||
border-color: #4cae4c;
|
||||
}
|
||||
.btn-lg {
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.33;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.nav {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.nav > li {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.nav > li > a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.nav-pills > li {
|
||||
float: left;
|
||||
}
|
||||
.nav-pills > li > a {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.nav-pills > li + li {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.nav-pills > li.active > a {
|
||||
color: #fff;
|
||||
background-color: #428bca;
|
||||
}
|
||||
.jumbotron {
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
color: inherit;
|
||||
background-color: #eee;
|
||||
}
|
||||
.jumbotron h1 {
|
||||
color: inherit;
|
||||
}
|
||||
.jumbotron p {
|
||||
margin-bottom: 15px;
|
||||
font-size: 21px;
|
||||
font-weight: 200;
|
||||
}
|
||||
.container .jumbotron {
|
||||
border-radius: 6px;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.jumbotron {
|
||||
padding-top: 48px;
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
.container .jumbotron {
|
||||
padding-right: 60px;
|
||||
padding-left: 60px;
|
||||
}
|
||||
.jumbotron h1 {
|
||||
font-size: 63px;
|
||||
}
|
||||
}
|
||||
.container:after,
|
||||
.container:before,
|
||||
.nav:after,
|
||||
.nav:before {
|
||||
display: table;
|
||||
content: " ";
|
||||
}
|
||||
.container:after,
|
||||
.nav:after {
|
||||
clear: both;
|
||||
}
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="css/main.css" media="print" onload="this.media='all'">
|
||||
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" media="print" onload="this.media='all'">
|
||||
<!-- endbuild -->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lt IE 10]>
|
||||
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
||||
<![endif]-->
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<h3 class="text-muted">critical css test</h3>
|
||||
</div>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1>'Allo, 'Allo!</h1>
|
||||
<p class="lead">Always a pleasure scaffolding your apps.</p>
|
||||
<p><a class="btn btn-lg btn-success" href="#">Splendid!</a></p>
|
||||
</div>
|
||||
|
||||
<div class="row marketing">
|
||||
<div class="col-lg-6">
|
||||
<h4>HTML5 Boilerplate</h4>
|
||||
<p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>
|
||||
|
||||
<h4>Bootstrap</h4>
|
||||
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>♥ from the Yeoman team</p>
|
||||
</div>
|
||||
</div>
|
||||
<noscript><link rel="stylesheet" href="css/main.css"></noscript>
|
||||
<noscript><link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"></noscript>
|
||||
</body>
|
||||
</html>
|
||||
57
test/expected/index-inlined-async-minified-final-print.html
Normal file
57
test/expected/index-inlined-async-minified-final-print.html
Normal file
@ -0,0 +1,57 @@
|
||||
<!doctype html>
|
||||
<html class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>critical css test</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
|
||||
|
||||
<!-- build:css styles/main.css -->
|
||||
<style>
|
||||
body{padding-top:20px;padding-bottom:20px}.header{padding-left:15px;padding-right:15px}.header{border-bottom:1px solid #e5e5e5}.header h3{margin-top:0;margin-bottom:0;line-height:40px;padding-bottom:19px}.jumbotron{text-align:center;border-bottom:1px solid #e5e5e5}.jumbotron .btn{font-size:21px;padding:14px 24px}@media screen and (min-width:768px){.container{max-width:730px}.header{padding-left:0;padding-right:0}.header{margin-bottom:30px}.jumbotron{border-bottom:0}}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a{background:0 0}h1{margin:.67em 0;font-size:2em}@media print{*{color:#000!important;text-shadow:none!important;background:0 0!important;box-shadow:none!important}a{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}a[href^="#"]:after{content:""}h3,p{orphans:3;widows:3}h3{page-break-after:avoid}}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%;-webkit-tap-highlight-color:transparent}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}a{color:#428bca;text-decoration:none}h1,h3{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}h1,h3{margin-top:20px;margin-bottom:10px}h1{font-size:36px}h3{font-size:24px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:200;line-height:1.4}@media (min-width:768px){.lead{font-size:21px}}.text-muted{color:#999}ul{margin-top:0;margin-bottom:10px}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-lg{padding:10px 16px;font-size:18px;line-height:1.33;border-radius:6px}.nav{padding-left:0;margin-bottom:0;list-style:none}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav-pills>li{float:left}.nav-pills>li>a{border-radius:4px}.nav-pills>li+li{margin-left:2px}.nav-pills>li.active>a{color:#fff;background-color:#428bca}.jumbotron{padding:30px;margin-bottom:30px;color:inherit;background-color:#eee}.jumbotron h1{color:inherit}.jumbotron p{margin-bottom:15px;font-size:21px;font-weight:200}.container .jumbotron{border-radius:6px}@media screen and (min-width:768px){.jumbotron{padding-top:48px;padding-bottom:48px}.container .jumbotron{padding-right:60px;padding-left:60px}.jumbotron h1{font-size:63px}}.container:after,.container:before,.nav:after,.nav:before{display:table;content:" "}.container:after,.nav:after{clear:both}.pull-right{float:right!important}
|
||||
</style>
|
||||
<link rel="stylesheet" href="css/main.css" media="print" onload="this.media='all'">
|
||||
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" media="print" onload="this.media='all'">
|
||||
<!-- endbuild -->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lt IE 10]>
|
||||
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
||||
<![endif]-->
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<h3 class="text-muted">critical css test</h3>
|
||||
</div>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1>'Allo, 'Allo!</h1>
|
||||
<p class="lead">Always a pleasure scaffolding your apps.</p>
|
||||
<p><a class="btn btn-lg btn-success" href="#">Splendid!</a></p>
|
||||
</div>
|
||||
|
||||
<div class="row marketing">
|
||||
<div class="col-lg-6">
|
||||
<h4>HTML5 Boilerplate</h4>
|
||||
<p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>
|
||||
|
||||
<h4>Bootstrap</h4>
|
||||
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>♥ from the Yeoman team</p>
|
||||
</div>
|
||||
</div>
|
||||
<noscript><link rel="stylesheet" href="css/main.css"></noscript>
|
||||
<noscript><link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"></noscript>
|
||||
</body>
|
||||
</html>
|
||||
104
test/expected/index-inlined-print-preload.html
Normal file
104
test/expected/index-inlined-print-preload.html
Normal file
@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>critical css test</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
|
||||
|
||||
<style>
|
||||
#not {
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.header {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.header h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
line-height: 40px;
|
||||
padding-bottom: 19px;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.jumbotron .btn {
|
||||
font-size: 21px;
|
||||
padding: 14px 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- build:css styles/main.css -->
|
||||
<style>
|
||||
@media screen and (min-width:768px){.container{max-width:730px}.header{padding-left:0;padding-right:0}.header{margin-bottom:30px}.jumbotron{border-bottom:0}}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a{background:0 0}h1{margin:.67em 0;font-size:2em}@media print{*{color:#000!important;text-shadow:none!important;background:0 0!important;box-shadow:none!important}a{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}a[href^="#"]:after{content:""}h3,p{orphans:3;widows:3}h3{page-break-after:avoid}}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%;-webkit-tap-highlight-color:transparent}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}a{color:#428bca;text-decoration:none}h1,h3{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}h1,h3{margin-top:20px;margin-bottom:10px}h1{font-size:36px}h3{font-size:24px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:200;line-height:1.4}@media (min-width:768px){.lead{font-size:21px}}.text-muted{color:#999}ul{margin-top:0;margin-bottom:10px}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-lg{padding:10px 16px;font-size:18px;line-height:1.33;border-radius:6px}.nav{padding-left:0;margin-bottom:0;list-style:none}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav-pills>li{float:left}.nav-pills>li>a{border-radius:4px}.nav-pills>li+li{margin-left:2px}.nav-pills>li.active>a{color:#fff;background-color:#428bca}.jumbotron{padding:30px;margin-bottom:30px;color:inherit;background-color:#eee}.jumbotron h1{color:inherit}.jumbotron p{margin-bottom:15px;font-size:21px;font-weight:200}.container .jumbotron{border-radius:6px}@media screen and (min-width:768px){.jumbotron{padding-top:48px;padding-bottom:48px}.container .jumbotron{padding-right:60px;padding-left:60px}.jumbotron h1{font-size:63px}}.container:after,.container:before,.nav:after,.nav:before{display:table;content:" "}.container:after,.nav:after{clear:both}.pull-right{float:right!important}
|
||||
</style>
|
||||
<link href="css/cartoon.css" rel="preload" as="style">
|
||||
<link rel="stylesheet" href="css/cartoon.css" media="print" onload="this.media='all'">
|
||||
<!-- endbuild -->
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lt IE 10]>
|
||||
<p class="browsehappy">
|
||||
You are using an <strong>outdated</strong> browser. Please
|
||||
<a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
|
||||
</p>
|
||||
<![endif]-->
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<h3 class="text-muted">critical css test</h3>
|
||||
</div>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1>'Allo, 'Allo!</h1>
|
||||
|
||||
<p class="lead">Always a pleasure scaffolding your apps.</p>
|
||||
|
||||
<p><a class="btn btn-lg btn-success" href="#">Splendid!</a></p>
|
||||
</div>
|
||||
|
||||
<div class="row marketing">
|
||||
<div class="col-lg-6">
|
||||
<h4>HTML5 Boilerplate</h4>
|
||||
|
||||
<p>
|
||||
HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or
|
||||
sites.
|
||||
</p>
|
||||
|
||||
<h4>Bootstrap</h4>
|
||||
|
||||
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer"><p>♥ from the Yeoman team</p></div>
|
||||
</div>
|
||||
<noscript><link rel="stylesheet" href="css/cartoon.css"></noscript>
|
||||
</body>
|
||||
</html>
|
||||
103
test/expected/index-inlined-print.html
Normal file
103
test/expected/index-inlined-print.html
Normal file
@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>critical css test</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
|
||||
|
||||
<style>
|
||||
#not {
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.header {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.header h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
line-height: 40px;
|
||||
padding-bottom: 19px;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.jumbotron .btn {
|
||||
font-size: 21px;
|
||||
padding: 14px 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- build:css styles/main.css -->
|
||||
<style>
|
||||
@media screen and (min-width:768px){.container{max-width:730px}.header{padding-left:0;padding-right:0}.header{margin-bottom:30px}.jumbotron{border-bottom:0}}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a{background:0 0}h1{margin:.67em 0;font-size:2em}@media print{*{color:#000!important;text-shadow:none!important;background:0 0!important;box-shadow:none!important}a{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}a[href^="#"]:after{content:""}h3,p{orphans:3;widows:3}h3{page-break-after:avoid}}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%;-webkit-tap-highlight-color:transparent}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}a{color:#428bca;text-decoration:none}h1,h3{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}h1,h3{margin-top:20px;margin-bottom:10px}h1{font-size:36px}h3{font-size:24px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:200;line-height:1.4}@media (min-width:768px){.lead{font-size:21px}}.text-muted{color:#999}ul{margin-top:0;margin-bottom:10px}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-lg{padding:10px 16px;font-size:18px;line-height:1.33;border-radius:6px}.nav{padding-left:0;margin-bottom:0;list-style:none}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav-pills>li{float:left}.nav-pills>li>a{border-radius:4px}.nav-pills>li+li{margin-left:2px}.nav-pills>li.active>a{color:#fff;background-color:#428bca}.jumbotron{padding:30px;margin-bottom:30px;color:inherit;background-color:#eee}.jumbotron h1{color:inherit}.jumbotron p{margin-bottom:15px;font-size:21px;font-weight:200}.container .jumbotron{border-radius:6px}@media screen and (min-width:768px){.jumbotron{padding-top:48px;padding-bottom:48px}.container .jumbotron{padding-right:60px;padding-left:60px}.jumbotron h1{font-size:63px}}.container:after,.container:before,.nav:after,.nav:before{display:table;content:" "}.container:after,.nav:after{clear:both}.pull-right{float:right!important}
|
||||
</style>
|
||||
<link rel="stylesheet" href="css/cartoon.css" media="print" onload="this.media='all'">
|
||||
<!-- endbuild -->
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lt IE 10]>
|
||||
<p class="browsehappy">
|
||||
You are using an <strong>outdated</strong> browser. Please
|
||||
<a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
|
||||
</p>
|
||||
<![endif]-->
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<h3 class="text-muted">critical css test</h3>
|
||||
</div>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1>'Allo, 'Allo!</h1>
|
||||
|
||||
<p class="lead">Always a pleasure scaffolding your apps.</p>
|
||||
|
||||
<p><a class="btn btn-lg btn-success" href="#">Splendid!</a></p>
|
||||
</div>
|
||||
|
||||
<div class="row marketing">
|
||||
<div class="col-lg-6">
|
||||
<h4>HTML5 Boilerplate</h4>
|
||||
|
||||
<p>
|
||||
HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or
|
||||
sites.
|
||||
</p>
|
||||
|
||||
<h4>Bootstrap</h4>
|
||||
|
||||
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer"><p>♥ from the Yeoman team</p></div>
|
||||
</div>
|
||||
<noscript><link rel="stylesheet" href="css/cartoon.css"></noscript>
|
||||
</body>
|
||||
</html>
|
||||
@ -14,7 +14,15 @@ test('Inline css', async () => {
|
||||
const html = await read('fixtures/index.html');
|
||||
const css = await read('fixtures/critical.css');
|
||||
const expected = await read('expected/index-inlined-async-final.html');
|
||||
const out = inline(html, css, {minify: false});
|
||||
const out = inline(html, css, {minify: false, polyfill: true});
|
||||
expect(strip(out.toString())).toBe(strip(expected));
|
||||
});
|
||||
|
||||
test('Inline css with media=print', async () => {
|
||||
const html = await read('fixtures/index.html');
|
||||
const css = await read('fixtures/critical.css');
|
||||
const expected = await read('expected/index-inlined-async-final-print.html');
|
||||
const out = inline(html, css, {minify: false, polyfill: false});
|
||||
expect(strip(out.toString())).toBe(strip(expected));
|
||||
});
|
||||
|
||||
@ -23,7 +31,7 @@ test('Inline in head if no stylesheets are there', async () => {
|
||||
const css = await read('fixtures/critical.css');
|
||||
|
||||
const expected = await read('expected/index-nostyle.html');
|
||||
const out = inline(html, css, {minify: true});
|
||||
const out = inline(html, css, {minify: true, polyfill: true});
|
||||
|
||||
expect(strip(out.toString('utf-8'))).toBe(strip(expected));
|
||||
});
|
||||
@ -33,7 +41,17 @@ test('Inline absolute css', async () => {
|
||||
const css = await read('fixtures/critical.css');
|
||||
|
||||
const expected = await read('expected/index-inlined-absolute.html');
|
||||
const out = inline(html, css, {minify: false});
|
||||
const out = inline(html, css, {minify: false, polyfill: true});
|
||||
|
||||
expect(strip(out.toString('utf-8'))).toBe(strip(expected));
|
||||
});
|
||||
|
||||
test('Inline absolute css with media=print', async () => {
|
||||
const html = await read('fixtures/index-absolute.html');
|
||||
const css = await read('fixtures/critical.css');
|
||||
|
||||
const expected = await read('expected/index-inlined-absolute-print.html');
|
||||
const out = inline(html, css, {minify: false, polyfill: false});
|
||||
|
||||
expect(strip(out.toString('utf-8'))).toBe(strip(expected));
|
||||
});
|
||||
@ -43,7 +61,17 @@ test('Inline and minify css', async () => {
|
||||
const css = await read('fixtures/critical.css');
|
||||
|
||||
const expected = await read('expected/index-inlined-async-minified-final.html');
|
||||
const out = inline(html, css, {minify: true});
|
||||
const out = inline(html, css, {minify: true, polyfill: true});
|
||||
|
||||
expect(strip(out.toString('utf-8'))).toBe(strip(expected));
|
||||
});
|
||||
|
||||
test('Inline and minify css with media=print', async () => {
|
||||
const html = await read('fixtures/index.html');
|
||||
const css = await read('fixtures/critical.css');
|
||||
|
||||
const expected = await read('expected/index-inlined-async-minified-final-print.html');
|
||||
const out = inline(html, css, {minify: true, polyfill: false});
|
||||
|
||||
expect(strip(out.toString('utf-8'))).toBe(strip(expected));
|
||||
});
|
||||
@ -66,6 +94,36 @@ test('Inline and extract css', async () => {
|
||||
const out = inline(html, css, {
|
||||
minify: false,
|
||||
extract: true,
|
||||
polyfill: true,
|
||||
basePath: 'test/fixtures',
|
||||
});
|
||||
|
||||
expect(out.toString('utf8')).toMatch(path.basename(reved[0]));
|
||||
expect(out.toString('utf8')).toMatch(path.basename(reved[1]));
|
||||
expect(checkAndDelete(reved[0])).toBe(true);
|
||||
expect(checkAndDelete(reved[1])).toBe(true);
|
||||
expect(strip(out.toString('utf8'))).toBe(strip(expected));
|
||||
});
|
||||
|
||||
test('Inline and extract css with media=print', async () => {
|
||||
const html = await read('fixtures/cartoon.html');
|
||||
const css = await read('fixtures/critical.css');
|
||||
const expected = await read('expected/cartoon-expected-print.html');
|
||||
|
||||
const styles = await Promise.all([
|
||||
read('fixtures/css/cartoon.css'),
|
||||
read('fixtures/bower_components/bootstrap/dist/css/bootstrap.css'),
|
||||
]);
|
||||
|
||||
const reved = [
|
||||
reaver.rev('fixtures/css/cartoon.css', extractCss(styles[0], css)),
|
||||
reaver.rev('fixtures/bower_components/bootstrap/dist/css/bootstrap.css', extractCss(styles[1], css)),
|
||||
];
|
||||
|
||||
const out = inline(html, css, {
|
||||
minify: false,
|
||||
extract: true,
|
||||
polyfill: false,
|
||||
basePath: 'test/fixtures',
|
||||
});
|
||||
|
||||
@ -93,6 +151,35 @@ test('Extract and minify css', async () => {
|
||||
|
||||
const out = inline(html, css, {
|
||||
extract: true,
|
||||
polyfill: true,
|
||||
basePath: 'test/fixtures',
|
||||
});
|
||||
|
||||
expect(out.toString('utf8')).toMatch(path.basename(reved[0]));
|
||||
expect(out.toString('utf8')).toMatch(path.basename(reved[1]));
|
||||
expect(checkAndDelete(reved[0])).toBe(true);
|
||||
expect(checkAndDelete(reved[1])).toBe(true);
|
||||
expect(strip(out.toString('utf8'))).toBe(strip(expected));
|
||||
});
|
||||
|
||||
test('Extract and minify css with media=print', async () => {
|
||||
const html = await read('fixtures/cartoon.html');
|
||||
const css = await read('fixtures/critical.css');
|
||||
const expected = await read('expected/cartoon-expected-minified-print.html');
|
||||
|
||||
const styles = await Promise.all([
|
||||
read('fixtures/css/cartoon.css'),
|
||||
read('fixtures/bower_components/bootstrap/dist/css/bootstrap.css'),
|
||||
]);
|
||||
|
||||
const reved = [
|
||||
reaver.rev('fixtures/css/cartoon.css', extractCss(styles[0], css)),
|
||||
reaver.rev('fixtures/bower_components/bootstrap/dist/css/bootstrap.css', extractCss(styles[1], css)),
|
||||
];
|
||||
|
||||
const out = inline(html, css, {
|
||||
extract: true,
|
||||
polyfill: false,
|
||||
basePath: 'test/fixtures',
|
||||
});
|
||||
|
||||
@ -120,6 +207,36 @@ test('Extract and minify css with alternative noscript option', async () => {
|
||||
|
||||
const out = inline(html, css, {
|
||||
extract: true,
|
||||
polyfill: true,
|
||||
noscript: 'head',
|
||||
basePath: 'test/fixtures',
|
||||
});
|
||||
|
||||
expect(out.toString('utf8')).toMatch(path.basename(reved[0]));
|
||||
expect(out.toString('utf8')).toMatch(path.basename(reved[1]));
|
||||
expect(checkAndDelete(reved[0])).toBe(true);
|
||||
expect(checkAndDelete(reved[1])).toBe(true);
|
||||
expect(strip(out.toString('utf8'))).toBe(strip(expected));
|
||||
});
|
||||
|
||||
test('Extract and minify css with alternative noscript option with media=print', async () => {
|
||||
const html = await read('fixtures/cartoon.html');
|
||||
const css = await read('fixtures/critical.css');
|
||||
const expected = await read('expected/cartoon-expected-minified-alt-print.html');
|
||||
|
||||
const styles = await Promise.all([
|
||||
read('fixtures/css/cartoon.css'),
|
||||
read('fixtures/bower_components/bootstrap/dist/css/bootstrap.css'),
|
||||
]);
|
||||
|
||||
const reved = [
|
||||
reaver.rev('fixtures/css/cartoon.css', extractCss(styles[0], css)),
|
||||
reaver.rev('fixtures/bower_components/bootstrap/dist/css/bootstrap.css', extractCss(styles[1], css)),
|
||||
];
|
||||
|
||||
const out = inline(html, css, {
|
||||
extract: true,
|
||||
polyfill: false,
|
||||
noscript: 'head',
|
||||
basePath: 'test/fixtures',
|
||||
});
|
||||
@ -148,6 +265,36 @@ test('Inline and extract css correctly with absolute paths', async () => {
|
||||
|
||||
const out = inline(html, css, {
|
||||
minify: false,
|
||||
polyfill: true,
|
||||
extract: true,
|
||||
basePath: 'test/fixtures',
|
||||
});
|
||||
|
||||
expect(out.toString('utf8')).toMatch(path.basename(reved[0]));
|
||||
expect(out.toString('utf8')).toMatch(path.basename(reved[1]));
|
||||
expect(checkAndDelete(reved[0])).toBe(true);
|
||||
expect(checkAndDelete(reved[1])).toBe(true);
|
||||
expect(strip(out.toString('utf8'))).toBe(strip(expected));
|
||||
});
|
||||
|
||||
test('Inline and extract css correctly with absolute paths with media=print', async () => {
|
||||
const html = await read('fixtures/cartoon-absolute.html');
|
||||
const css = await read('fixtures/critical.css');
|
||||
const expected = await read('expected/cartoon-absolute-expected-print.html');
|
||||
|
||||
const styles = await Promise.all([
|
||||
read('fixtures/css/cartoon.css'),
|
||||
read('fixtures/bower_components/bootstrap/dist/css/bootstrap.css'),
|
||||
]);
|
||||
|
||||
const reved = [
|
||||
reaver.rev('fixtures/css/cartoon.css', extractCss(styles[0], css)),
|
||||
reaver.rev('fixtures/bower_components/bootstrap/dist/css/bootstrap.css', extractCss(styles[1], css)),
|
||||
];
|
||||
|
||||
const out = inline(html, css, {
|
||||
minify: false,
|
||||
polyfill: false,
|
||||
extract: true,
|
||||
basePath: 'test/fixtures',
|
||||
});
|
||||
@ -161,7 +308,7 @@ test('Inline and extract css correctly with absolute paths', async () => {
|
||||
|
||||
test('Does not strip of svg closing tags', async () => {
|
||||
const html = await read('fixtures/entities.html');
|
||||
const out = inline(html, '', {minify: false});
|
||||
const out = inline(html, '', {minify: false, polyfill: true});
|
||||
|
||||
expect(strip(out.toString('utf-8'))).toBe(strip(html));
|
||||
});
|
||||
@ -170,7 +317,7 @@ test('Does not strip svg closing tags test 2', async () => {
|
||||
const html = await read('fixtures/svg.html');
|
||||
const expected = await read('expected/test-svg.html');
|
||||
const css = 'html{font-size:16;}';
|
||||
const out = inline(html, css, {minify: true});
|
||||
const out = inline(html, css, {minify: true, polyfill: true});
|
||||
|
||||
expect(strip(out.toString('utf-8'))).toBe(strip(expected));
|
||||
});
|
||||
@ -183,7 +330,19 @@ test('Also preload external urls', async () => {
|
||||
const html = await read('fixtures/external.html');
|
||||
const expected = await read('expected/external-expected.html');
|
||||
const css = await read('fixtures/critical.css');
|
||||
const out = inline(html, css, {minify: false});
|
||||
const out = inline(html, css, {minify: false, polyfill: true});
|
||||
expect(strip2(out.toString('utf-8'))).toBe(strip2(expected));
|
||||
});
|
||||
|
||||
test('Also preload external urls with media=print', async () => {
|
||||
function strip2(string) {
|
||||
return string.replace(/\s+/gm, '');
|
||||
}
|
||||
|
||||
const html = await read('fixtures/external.html');
|
||||
const expected = await read('expected/external-expected-print.html');
|
||||
const css = await read('fixtures/critical.css');
|
||||
const out = inline(html, css, {minify: false, polyfill: false, preload: true});
|
||||
expect(strip2(out.toString('utf-8'))).toBe(strip2(expected));
|
||||
});
|
||||
|
||||
@ -205,6 +364,35 @@ test("Don't try to extract for external urls", async () => {
|
||||
const out = inline(html, css, {
|
||||
minify: false,
|
||||
extract: true,
|
||||
polyfill: true,
|
||||
basePath: 'test/fixtures',
|
||||
});
|
||||
expect(out.toString('utf8')).toMatch(path.basename(reved[0]));
|
||||
expect(out.toString('utf8')).toMatch(path.basename(reved[1]));
|
||||
expect(checkAndDelete(reved[0])).toBe(true);
|
||||
expect(checkAndDelete(reved[1])).toBe(true);
|
||||
expect(strip(out.toString('utf8'))).toBe(strip(expected));
|
||||
});
|
||||
|
||||
test("Don't try to extract for external urls (with media=print)", async () => {
|
||||
const html = await read('fixtures/external.html');
|
||||
const css = await read('fixtures/critical.css');
|
||||
const expected = await read('expected/external-extract-expected-print.html');
|
||||
|
||||
const styles = await Promise.all([
|
||||
read('fixtures/css/main.css'),
|
||||
read('fixtures/bower_components/bootstrap/dist/css/bootstrap.css'),
|
||||
]);
|
||||
|
||||
const reved = [
|
||||
reaver.rev('fixtures/css/main.css', extractCss(styles[0], css)),
|
||||
reaver.rev('fixtures/bower_components/bootstrap/dist/css/bootstrap.css', extractCss(styles[1], css)),
|
||||
];
|
||||
|
||||
const out = inline(html, css, {
|
||||
minify: false,
|
||||
extract: true,
|
||||
polyfill: false,
|
||||
basePath: 'test/fixtures',
|
||||
});
|
||||
expect(out.toString('utf8')).toMatch(path.basename(reved[0]));
|
||||
@ -216,7 +404,7 @@ test("Don't try to extract for external urls", async () => {
|
||||
|
||||
test('Keep self closing svg elements', async () => {
|
||||
const html = await read('fixtures/entities2.html');
|
||||
const out = inline(html, '');
|
||||
const out = inline(html, '', {polyfill: true});
|
||||
expect(strip(out.toString('utf-8'))).toBe(strip(html));
|
||||
});
|
||||
|
||||
@ -230,6 +418,24 @@ test('Respect ignore option with string array', async () => {
|
||||
const css = await read('fixtures/critical.css');
|
||||
const out = inline(html, css, {
|
||||
minify: false,
|
||||
polyfill: true,
|
||||
ignore: ['bower_components/bootstrap/dist/css/bootstrap.css'],
|
||||
});
|
||||
|
||||
expect(strip2(out.toString('utf-8'))).toBe(strip2(expected));
|
||||
});
|
||||
|
||||
test('Respect ignore option with string array (with media=print)', async () => {
|
||||
function strip2(string) {
|
||||
return string.replace(/\s+/gm, '');
|
||||
}
|
||||
|
||||
const html = await read('fixtures/external.html');
|
||||
const expected = await read('expected/external-ignore-expected-print.html');
|
||||
const css = await read('fixtures/critical.css');
|
||||
const out = inline(html, css, {
|
||||
minify: false,
|
||||
polyfill: false,
|
||||
ignore: ['bower_components/bootstrap/dist/css/bootstrap.css'],
|
||||
});
|
||||
|
||||
@ -246,6 +452,24 @@ test('Respect single ignore option with string', async () => {
|
||||
const css = await read('fixtures/critical.css');
|
||||
const out = inline(html, css, {
|
||||
minify: false,
|
||||
polyfill: true,
|
||||
ignore: 'bower_components/bootstrap/dist/css/bootstrap.css',
|
||||
});
|
||||
|
||||
expect(strip2(out.toString('utf-8'))).toBe(strip2(expected));
|
||||
});
|
||||
|
||||
test('Respect single ignore option with string (with media=print)', async () => {
|
||||
function strip2(string) {
|
||||
return string.replace(/\s+/gm, '');
|
||||
}
|
||||
|
||||
const html = await read('fixtures/external.html');
|
||||
const expected = await read('expected/external-ignore-expected-print.html');
|
||||
const css = await read('fixtures/critical.css');
|
||||
const out = inline(html, css, {
|
||||
minify: false,
|
||||
polyfill: false,
|
||||
ignore: 'bower_components/bootstrap/dist/css/bootstrap.css',
|
||||
});
|
||||
|
||||
@ -262,6 +486,24 @@ test('Respect ignore option with RegExp array', async () => {
|
||||
const css = await read('fixtures/critical.css');
|
||||
const out = inline(html, css, {
|
||||
minify: false,
|
||||
polyfill: true,
|
||||
ignore: [/bootstrap/],
|
||||
});
|
||||
|
||||
expect(strip2(out.toString('utf-8'))).toBe(strip2(expected));
|
||||
});
|
||||
|
||||
test('Respect ignore option with RegExp array (with media=print)', async () => {
|
||||
function strip2(string) {
|
||||
return string.replace(/\s+/gm, '');
|
||||
}
|
||||
|
||||
const html = await read('fixtures/external.html');
|
||||
const expected = await read('expected/external-ignore-expected-print.html');
|
||||
const css = await read('fixtures/critical.css');
|
||||
const out = inline(html, css, {
|
||||
minify: false,
|
||||
polyfill: false,
|
||||
ignore: [/bootstrap/],
|
||||
});
|
||||
|
||||
@ -275,6 +517,21 @@ test('Respect selector option', async () => {
|
||||
const expected = await read('expected/index-before.html');
|
||||
const out = inline(html, css, {
|
||||
minify: true,
|
||||
polyfill: true,
|
||||
selector: 'title',
|
||||
});
|
||||
|
||||
expect(strip(out.toString('utf-8'))).toBe(strip(expected));
|
||||
});
|
||||
|
||||
test('Respect selector option (with media=print)', async () => {
|
||||
const html = await read('fixtures/index.html');
|
||||
const css = await read('fixtures/critical.css');
|
||||
|
||||
const expected = await read('expected/index-before-print.html');
|
||||
const out = inline(html, css, {
|
||||
minify: true,
|
||||
polyfill: false,
|
||||
selector: 'title',
|
||||
});
|
||||
|
||||
@ -286,7 +543,7 @@ test('Ignore stylesheets wrapped in noscript', async () => {
|
||||
const css = await read('fixtures/critical.css');
|
||||
|
||||
const expected = await read('expected/index-noscript-inlined-minified-final.html');
|
||||
const out = inline(html, css, {minify: true});
|
||||
const out = inline(html, css, {minify: true, polyfill: true});
|
||||
|
||||
expect(strip(out.toString('utf-8'))).toBe(strip(expected));
|
||||
});
|
||||
@ -296,7 +553,7 @@ test("Skip loadcss if it's already present and used for all existing link tags",
|
||||
const css = await read('fixtures/critical.css');
|
||||
|
||||
const expected = await read('expected/index-loadcss.html');
|
||||
const out = inline(html, css, {minify: true});
|
||||
const out = inline(html, css, {minify: true, polyfill: true});
|
||||
|
||||
expect(strip(out.toString('utf-8'))).toBe(strip(expected));
|
||||
});
|
||||
@ -306,17 +563,37 @@ test('Consider existing style tags', async () => {
|
||||
const css = await read('fixtures/critical.css');
|
||||
|
||||
const expected = await read('expected/index-inlined.html');
|
||||
const out = inline(html, css, {polyfill: true});
|
||||
|
||||
expect(strip(out.toString('utf-8'))).toBe(strip(expected));
|
||||
});
|
||||
|
||||
test('Consider existing style tags with media=print', async () => {
|
||||
const html = await read('fixtures/index-inlined.html');
|
||||
const css = await read('fixtures/critical.css');
|
||||
|
||||
const expected = await read('expected/index-inlined-print.html');
|
||||
const out = inline(html, css);
|
||||
|
||||
expect(strip(out.toString('utf-8'))).toBe(strip(expected));
|
||||
});
|
||||
|
||||
test('Consider existing style tags with media=print && preload', async () => {
|
||||
const html = await read('fixtures/index-inlined.html');
|
||||
const css = await read('fixtures/critical.css');
|
||||
|
||||
const expected = await read('expected/index-inlined-print-preload.html');
|
||||
const out = inline(html, css, {preload: true});
|
||||
|
||||
expect(strip(out.toString('utf-8'))).toBe(strip(expected));
|
||||
});
|
||||
|
||||
test("Don't add loadcss twice", async () => {
|
||||
const html = await read('fixtures/loadcss-again.html');
|
||||
const css = await read('fixtures/critical.css');
|
||||
|
||||
const expected = await read('expected/loadcss-again.html');
|
||||
const out = inline(html, css);
|
||||
const out = inline(html, css, {polyfill: true});
|
||||
|
||||
expect(strip(out.toString('utf-8'))).toBe(strip(expected));
|
||||
});
|
||||
@ -327,11 +604,20 @@ test('Replace stylesheets', async () => {
|
||||
|
||||
const out = inline(html, css, {
|
||||
replaceStylesheets: ['replace/all.css'],
|
||||
polyfill: true,
|
||||
});
|
||||
|
||||
const out2 = inline(html, css, {
|
||||
replaceStylesheets: ['replace/all.css'],
|
||||
polyfill: false,
|
||||
});
|
||||
|
||||
expect(out.toString('utf8')).not.toMatch('css/cartoon.css');
|
||||
expect(out.toString('utf8')).not.toMatch('css/bootstrap.css');
|
||||
expect(out.toString('utf8')).toMatch('href="replace/all.css"');
|
||||
expect(out2.toString('utf8')).not.toMatch('css/cartoon.css');
|
||||
expect(out2.toString('utf8')).not.toMatch('css/bootstrap.css');
|
||||
expect(out2.toString('utf8')).toMatch('href="replace/all.css"');
|
||||
});
|
||||
|
||||
test('Remove stylesheets', async () => {
|
||||
@ -340,8 +626,16 @@ test('Remove stylesheets', async () => {
|
||||
|
||||
const out = inline(html, css, {
|
||||
replaceStylesheets: [],
|
||||
polyfill: true,
|
||||
});
|
||||
|
||||
expect(out.toString('utf8')).not.toMatch('css/cartoon.css');
|
||||
const out2 = inline(html, css, {
|
||||
replaceStylesheets: [],
|
||||
polyfill: false,
|
||||
});
|
||||
|
||||
expect(out2.toString('utf8')).not.toMatch('css/cartoon.css');
|
||||
expect(out2.toString('utf8')).not.toMatch('css/bootstrap.css');
|
||||
expect(out.toString('utf8')).not.toMatch('css/bootstrap.css');
|
||||
expect(out.toString('utf8')).not.toMatch('css/bootstrap.css');
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user