Moved css into html files

verlok · Mar 14, 2014 · 9dfc5fb · 9dfc5fb
1 parent 41896b6
commit 9dfc5fb
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 83 deletions.
diff --git a/index.css b/index.css
diff --git a/index.html b/index.html
@@ -3,8 +3,19 @@
 <head>
 	<meta charset="UTF-8">
 	<title>Responsive images using verlok/picturePolyfill - by Andrea Verlicchi</title>
-	<link rel="stylesheet" href="index.css"/>
 	<meta name="viewport" content="width=device-width">
+	<style>
+		body { margin: 0; padding: 0; text-align: center; }
+		.intro { padding: 0 16px; }
+		.outro { padding: 1px 16px; clear: both; }
+		.element a, .element span, .element img { display: block; }
+		img { width: 100%; height: auto; border: 0; }
+		.element h2 { padding: 0 16px; }
+		.element:hover h2 { text-decoration: underline; }
+		@media screen and (min-width: 481px) {
+			.element { float: left; width: 50%; }
+		}
+	</style>
 </head>
 <body>
 	<div id="container">

diff --git a/tests/index.html b/tests/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title>Responsive images with picturePolyfill - by Andrea Verlicchi</title>
+	<meta name="viewport" content="width=device-width">
+	<style>
+		body { margin: 0; padding: 0; text-align: center; }
+		.element a, .element span, .element img { display: block; }
+		img { width: 100%; height: auto; border: 0; }
+		.element h2 { padding: 0 16px; }
+		.element:hover h2 { text-decoration: underline; }
+	</style>
+</head>
+<body>
+	<div id="container">
+		<h1>picturePolyfill Test</h1>
+		<p>To test script solidness.</p>
+		<div class="element">
+			<h2>Most complex usage</h2>
+			<span data-alt="A beautiful image" data-picture='[
+				{"srcset": "../img/320x320.gif"},
+				{"srcset": ["../img/768x768.gif", "../img/768x768x2.gif"], "media": "(min-width: 321px)"},
+				{"srcset": ["../img/1024x1024.gif", "../img/1024x1024x2.gif"], "media": "(min-width: 769px)"},
+				{"srcset": ["../img/1280x1280.gif", "../img/1280x1280x2.gif"], "media": "(min-width: 1025px)"},
+				{"srcset": ["../img/1440x1440.gif", "../img/1440x1440x2.gif"], "media": "(min-width: 1281px)"},
+				{"srcset": ["../img/1920x1920.gif", "../img/1920x1920x2.gif"], "media": "(min-width: 1441px)"}
+		    ]'>
+				<noscript>
+					<img src="../img/1280x1280.gif" alt="A beautiful image"/>
+				</noscript>
+			</span>
+		</div>
+	</div>
+	<script src="../external/matchMedia.js"></script>
+	<script src="../picturePolyfill.js"></script>
+</body>
+</html>
diff --git a/tests/picturefill_vs_picturePolyfill.html b/tests/picturefill_vs_picturePolyfill.html
@@ -1,7 +1,11 @@
 <!doctype html>
 <html lang="en">
 <head>
-<title>Hey</title>
+	<title>Hey</title>
+	<style>
+		body { margin: 0; padding: 0; text-align: center; }
+		img { width: 100%; height: auto; border: 0; }
+	</style>
 </head>
 <body>
 
@@ -24,6 +28,8 @@
 		<noscript><img src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=960" alt="A beautiful responsive image"/></noscript>
 	</span>
 
+	<p>This test is published in jsPerf: <a href="http://jsperf.com/picturefill-vs-picturepolyfill-performance-test">picturefill vs picturePolyfill performance test</a></p>
+
 	<script src="js/picturefill.js"></script>
 	<script src="../picturePolyfill.js"></script>
 

diff --git a/tests/test_pic_ie8.html b/tests/test_pic_ie8.html
@@ -3,7 +3,18 @@
 <head>
 	<meta charset="UTF-8">
 	<title>Responsive images with picturePolyfill - by Andrea Verlicchi</title>
-	<link rel="stylesheet" href="../usingPictureMarkup/index.css"/>
+	<style>
+		body { margin: 0; padding: 0; text-align: center; }
+		.intro { padding: 0 16px; }
+		.outro { padding: 1px 16px; clear: both; }
+		.element a, .element span, .element img { display: block; }
+		img { width: 100%; height: auto; border: 0; }
+		.element h2 { padding: 0 16px; }
+		.element:hover h2 { text-decoration: underline; }
+		@media screen and (min-width: 481px) {
+			.element { float: left; width: 50%; }
+		}
+	</style>
 </head>
 <body>
 	<div id="container">

diff --git a/tests/tests.html b/tests/tests.html
@@ -3,8 +3,17 @@
 <head>
 	<meta charset="UTF-8">
 	<title>Responsive images with picturePolyfill - by Andrea Verlicchi</title>
-	<link rel="stylesheet" href="../index.css"/>
 	<meta name="viewport" content="width=device-width">
+	<style>
+		body { margin: 0; padding: 0; text-align: center; }
+		.element a, .element span, .element img { display: block; }
+		img { width: 100%; height: auto; border: 0; }
+		.element h2 { padding: 0 16px; }
+		.element:hover h2 { text-decoration: underline; }
+		@media screen and (min-width: 481px) {
+			.element { float: left; width: 50%; }
+		}
+	</style>
 </head>
 <body>
 	<div id="container">

diff --git a/usingPictureMarkup/index.css b/usingPictureMarkup/index.css
diff --git a/usingPictureMarkup/index.html b/usingPictureMarkup/index.html
@@ -3,8 +3,19 @@
 <head>
 	<meta charset="UTF-8">
 	<title>Responsive images with picturePolyfill - by Andrea Verlicchi</title>
-	<link rel="stylesheet" href="index.css"/>
 	<meta name="viewport" content="width=device-width">
+	<style>
+		body { margin: 0; padding: 0; text-align: center; }
+		.intro { padding: 0 16px; }
+		.outro { padding: 1px 16px; clear: both; }
+		.element a, .element span, .element img { display: block; }
+		img { width: 100%; height: auto; border: 0; }
+		.element h2 { padding: 0 16px; }
+		.element:hover h2 { text-decoration: underline; }
+		@media screen and (min-width: 481px) {
+			.element { float: left; width: 50%; }
+		}
+	</style>
 </head>
 <body>
 	<div id="container">