├── README.md ├── _css └── style.css ├── _js └── imageTest.js ├── images ├── desktop.png ├── highres.png ├── lowres.png ├── mobile.png ├── test.psd ├── test1.png ├── test2.png ├── test3.png ├── test6.png ├── test8-599.png └── test8-600.png ├── includes └── testLinks.inc.php ├── index.php ├── test1.php ├── test10.php ├── test2.php ├── test3.php ├── test4.php ├── test5.php ├── test6.php ├── test7.php ├── test8.php └── test9.php /README.md: -------------------------------------------------------------------------------- 1 | #Media Query Automated Test Suite 2 | 3 | Demo: http://timkadlec.com/mq/ 4 | 5 | ##About the tests 6 | These tests are an attempt to determine how images are downloaded by browsers when used in combination with media queries. The initial tests are lovingly adapted from the tests run by the Cloud Four gang ([check-out Jason Grigsby's article on media queries](http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/)). The goal is to automate the process so that more devices and browsers can be tested. 7 | 8 | The test checks to see if a background image or img element has loaded by creating a new image in Javascript, setting the src property, and then checking immediately to see if the image has been loaded, by checking the image.complete property. The result of this test, along with the value of the screen.width and window.outerWidth properties, are passed back to Browserscope. 9 | -------------------------------------------------------------------------------- /_css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 100%/1.4em Georgia, serif; 3 | } 4 | h1 { 5 | line-height: 1.2em; 6 | } 7 | code {white-space:pre;background:#e1e1e1;border:1px solid #ccc;padding:10px;width:100%;display:block;margin-top:5px;} 8 | h4 {margin-bottom:0;} 9 | #loaded{ 10 | border: 1px solid #000; 11 | padding: 20px; 12 | word-wrap:break-word; 13 | } 14 | .load{ 15 | color: green; 16 | } 17 | .noload{ 18 | color: red; 19 | } 20 | .testLinks{ 21 | font-size: 1.2em; 22 | } 23 | .testLinks li{ 24 | margin-bottom: .5em; 25 | } -------------------------------------------------------------------------------- /_js/imageTest.js: -------------------------------------------------------------------------------- 1 | var prefix, suffix, target; 2 | var results = []; 3 | function imageTest(imgs) { 4 | for (var i = 0; i < imgs.length; i++) { 5 | test(imgs[i][0], imgs[i][0]); 6 | }; 7 | return results; 8 | } 9 | function test (img, testName) { 10 | var image = new Image(); 11 | image.src = prefix + img + '?' + suffix; 12 | console.info(image); 13 | if (image.complete || image.height > 0) { 14 | target.innerHTML += "

" + prefix + img + '?' + suffix + " has loaded.

"; 15 | //save the result for Browserscope 16 | results[testName] = 1; 17 | 18 | } else { 19 | target.innerHTML += "

" + prefix + img + '?' + suffix + " has not loaded.

"; 20 | //save the result for Browserscope 21 | results[testName] = 0; 22 | 23 | } 24 | } -------------------------------------------------------------------------------- /images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkadlec/Media-Query-test/5e7d968ce5e44a28e4309ca4a4089143714b02e0/images/desktop.png -------------------------------------------------------------------------------- /images/highres.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkadlec/Media-Query-test/5e7d968ce5e44a28e4309ca4a4089143714b02e0/images/highres.png -------------------------------------------------------------------------------- /images/lowres.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkadlec/Media-Query-test/5e7d968ce5e44a28e4309ca4a4089143714b02e0/images/lowres.png -------------------------------------------------------------------------------- /images/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkadlec/Media-Query-test/5e7d968ce5e44a28e4309ca4a4089143714b02e0/images/mobile.png -------------------------------------------------------------------------------- /images/test.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkadlec/Media-Query-test/5e7d968ce5e44a28e4309ca4a4089143714b02e0/images/test.psd -------------------------------------------------------------------------------- /images/test1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkadlec/Media-Query-test/5e7d968ce5e44a28e4309ca4a4089143714b02e0/images/test1.png -------------------------------------------------------------------------------- /images/test2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkadlec/Media-Query-test/5e7d968ce5e44a28e4309ca4a4089143714b02e0/images/test2.png -------------------------------------------------------------------------------- /images/test3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkadlec/Media-Query-test/5e7d968ce5e44a28e4309ca4a4089143714b02e0/images/test3.png -------------------------------------------------------------------------------- /images/test6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkadlec/Media-Query-test/5e7d968ce5e44a28e4309ca4a4089143714b02e0/images/test6.png -------------------------------------------------------------------------------- /images/test8-599.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkadlec/Media-Query-test/5e7d968ce5e44a28e4309ca4a4089143714b02e0/images/test8-599.png -------------------------------------------------------------------------------- /images/test8-600.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkadlec/Media-Query-test/5e7d968ce5e44a28e4309ca4a4089143714b02e0/images/test8-600.png -------------------------------------------------------------------------------- /includes/testLinks.inc.php: -------------------------------------------------------------------------------- 1 |

The tests

2 |

4 | Test One: Image Tag 5 |
7 | Test Two: Background Image Display None 8 |
10 | Test Three: Background Image, Parent Object Set to Display None 11 |
13 | Test Four: Background Image with Cascade Override 14 |
16 | Test Five: Background Image Where Desktop Image Set with Min-Width 17 |
19 | Test Six: Background Image Display None (max-device-width) 20 |
22 | Test Seven: Cascade Override for High Resolution 23 |
25 | Test Eight: Background Image with Cascade Override and Media Query Overlap 26 |
28 | Test Nine: Cascade Override for High Resolution (min-resolution) 29 |
31 | Test Ten: Background Image with Mobile First Cascade Override 32 |

34 | -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | Media Query Test 10 | 11 | 12 | 13 | 41 | 42 | 43 |

Media Query Image Download Test Suite

44 |

Lovingly pulled from Cloud Four. Cloud Four article on media queries

45 | 46 |

Running the tests

47 |

48 | Please click through each test listed below. The results will be collected by Browserscope. 49 |

50 |

About these tests

51 |

These tests are an attempt to determine how images are downloaded by browsers when used in combination with media queries. The initial tests are lovingly adapted from the tests run by the Cloud Four gang (check-out Jason Grigsby's article on media queries). The goal is to automate the process so that more devices and browsers can be tested.

52 |

The test uses the image.complete property to determine if an image has been downloaded. The result of this test, along with the value of the screen.width and window.outerWidth properties, are passed back to Browserscope.

53 |

If you have a suggestion for another test to include in the suite, or find a bug, please send an email to tim@timkadlec.com or submit a pull request on Github.

54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /test1.php: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | Media Query Test: Hide an image tag 10 | 11 | 12 | 13 | 14 | 15 | 23 | 24 | 25 | 28 | 29 | 30 |

Media Query Image Download Test

31 | 32 |

Lovingly pulled from Cloud Four. Cloud Four article on media queries

33 | 34 |

Test One: Image Tag

35 |

36 | Simple image tag that will show up when page is greater than 600 pixels wide, but are hidden on smaller screens. 37 |

38 | 39 |

40 |

41 |

42 | 43 |

HTML Code

44 |

<div id="test1">
 45 |     <img src="images/test1.png?>" />
 46 | </div>
 47 |

48 | 49 |

CSS Code

50 |

<style type="text/css">
 51 | 
 52 | @media all and (max-width: 600px) {
 53 |     #test1 {
 54 |         display:none;
 55 |     }
 56 | }
 57 | </style>
 58 |

59 | 60 |

61 |

Results

62 |

63 | 64 | 65 | 66 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /test10.php: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | Media Query Test: Background Image with Mobile First Cascade Override 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 23 | 24 | 25 |

Media Query Image Download Test

26 | 27 |

Thanks to Jon Gjengset for the suggestion!

28 | 29 |

Test Ten: Background Image with Mobile First Cascade Override

30 |

31 | In this test, we start with a css background image that is a mobile version of the image. Then we use a css media query to replace that background image with the desktop version using min-width. 32 | This is effectively the opposite of test four, and was added on the intuition that the introduction of min-width might be what is making test 5 work. 33 |

34 | 35 |

36 | 37 |

HTML Code

38 |

<div id="test10"></div>
39 |

40 | 41 |

CSS Code

42 |

<style type="text/css">
43 | #test10 {background-image:url('images/mobile.png?');width:200px;height:75px;}
44 | @media all and (min-width: 600px) {
45 |     #test10 {background-image:url('images/desktop.png?');}
46 | }
47 | </style>
48 |

49 | 50 | 51 | 52 | 53 |

54 |

Results

55 |

56 | 57 | 58 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /test2.php: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | Media Query Test: Background Image Display None 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 24 | 25 | 26 | 27 | 30 | 31 | 32 |

Media Query Image Download Test

33 | 34 |

Lovingly pulled from Cloud Four. Cloud Four article on media queries

35 | 36 |

Test Two: Background Image Display None

37 |

38 | Div is assigned a background image. This div is hidden when the page is smaller than 600 pixels. 39 |

40 | 41 |

42 | 43 |

HTML Code

44 | <div id="test2"></div> 45 | 46 |

CSS Code

47 |

<style type="text/css">
48 | #test2 {background-image:url('images/test2.png?');width:200px;height:75px;}
49 | @media all and (max-width: 600px) {
50 |     #test2 {display:none;}
51 | }
52 | </style>
53 |

54 | 55 | 56 |

57 |

Results

58 |

59 | 60 | 61 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /test3.php: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | Media Query Test: Background Image, Parent Object Set to Display None 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 23 | 24 | 25 |

Media Query Image Download Test

26 | 27 |

Lovingly pulled from Cloud Four. Cloud Four article on media queries

28 | 29 |

Test Three: Background Image, Parent Object Set to Display None

30 |

31 | This should be no different than test #2, but I observed some strange behavior on the dConstruct site that makes me think this might work where #2 does not. 32 |

33 | 34 |

35 |

36 |

37 | 38 |

HTML Code

39 |

<div id="test3">
40 |     <div></div>
41 | </div>
42 |

43 | 44 |

CSS Code

45 |

<style type="text/css">
46 | #test3 div {background-image:url('images/test3.png?');width:200px;height:75px;}
47 | @media all and (max-width: 600px) {
48 |     #test3 {display:none;}
49 | }
50 | </style>
51 |

52 | 53 | 54 | 55 |

56 |

Results

57 |

58 | 59 | 60 | 61 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /test4.php: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | Media Query Test: Background Image with Cascade Override 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 23 | 24 | 25 |

Media Query Image Download Test

26 | 27 |

Lovingly pulled from Cloud Four. Cloud Four article on media queries

28 | 29 |

Test Four: Background Image with Cascade Override

30 |

31 | In this test, we start with a css background image that is a desktop version of the image. Then we use a css media query to replace that background image with a mobile version of the image. 32 |

33 | 34 |

35 | 36 |

HTML Code

37 |

<div id="test4"></div>
38 |

39 | 40 |

CSS Code

41 |

<style type="text/css">
42 | #test4 {background-image:url('images/desktop.png?');width:200px;height:75px;}
43 | @media all and (max-width: 600px) {
44 |     #test4 {background-image:url('images/mobile.png?');}
45 | }
46 | </style>
47 |

48 | 49 | 50 | 51 | 52 |

53 |

Results

54 |

55 | 56 | 57 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /test5.php: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | Media Query Test: Background Image Where Desktop Image Set with Min-Width 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 25 | 26 | 27 |

Media Query Image Download Test

28 | 29 |

Lovingly pulled from Cloud Four. Cloud Four article on media queries

30 | 31 |

Test Five: Background Image Where Desktop Image Set with Min-Width

32 |

33 | In this test, I'm trying to isolate the desktop image by using min-width declaration in addition to the max-width for the mobile image. 34 |

35 | 36 |

37 | 38 |

HTML Code

39 | <div id="test5"></div> 40 | 41 |

CSS Code

42 |

<style type="text/css">
43 | @media all and (min-width: 601px) {
44 |     #test5 {background-image:url('images/desktop.png?');width:200px;height:75px;}
45 | }
46 | @media all and (max-width: 600px) {
47 |     #test5 {background-image:url('images/mobile.png?');width:200px;height:75px;}
48 | }
49 | </style>
50 |

51 | 52 |

53 |

Results

54 |

55 | 56 | 57 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /test6.php: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | Media Query Test: Background Image Display None (max-device-width) 10 | 11 | 12 | 13 | 14 | 15 | 16 | 22 | 23 | 24 |

Media Query Image Download Test

25 | 26 |

Lovingly pulled from Cloud Four. Cloud Four article on media queries

27 | 28 |

Test Six: Background Image Display None (max-device-width)

29 |

30 | Should be same as test two, but testing it anyway out of curiousity. 31 |

32 | 33 |

34 | 35 |

HTML Code

36 | <div id="test6"></div> 37 | 38 |

CSS Code

39 |

<style type="text/css">
40 | #test6 {background-image:url('images/test6.png?');width:200px;height:75px;}
41 | @media all and (max-device-width: 600px) {
42 |     #test6 {display:none;}
43 | }
44 | </style>
45 |

46 | 47 | 48 |

49 |

Results

50 |

51 | 52 | 53 | 54 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /test7.php: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | Media Query Test: Cascade Override for High Resolution 10 | 11 | 12 | 13 | 14 | 15 | 16 | 26 | 27 | 28 | 29 | 32 | 33 | 34 |

Media Query Image Download Test

35 | 36 |

Test Seven: Cascade Override for High Resolution

37 |

38 | In this test, we start with a background image that is low res. Then we use a CSS media query to replace that background image if the it is a high resolution display. 39 |

40 | 41 |

42 | 43 |

HTML Code

44 | <div id="test7"></div> 45 | 46 |

CSS Code

47 |

<style type="text/css">
 48 | 
 49 |     #test7 {background-image:url('images/lowres.png?');width:200px;height:75px;}
 50 | 
 51 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
 52 | only screen and (min--moz-device-pixel-ratio: 1.5),
 53 | only screen and (-o-min-device-pixel-ratio: 3/2), 
 54 | only screen and (min-device-pixel-ratio: 1.5) {
 55 |     #test7 {background-image:url('images/highres.png?');width:200px;height:75px;}
 56 | }
 57 | </style>
 58 |

59 | 60 |

61 |

Results

62 |

63 | 64 | 65 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /test8.php: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | Media Query Test: Background Image with Cascade Override and Media Query Overlap 10 | 11 | 12 | 13 | 14 | 15 | 16 | 25 | 26 | 27 |

Media Query Image Download Test

28 | 29 |

Thanks to Zoe Gillenwater for the suggestion!

30 | 31 |

Test Eight: Background Image with Cascade Override and Media Query Overlap

32 |

33 | In this test, we start with a css background image that is a desktop version of the image. Then we use a css media query (max-width: 599px) to replace that background image with a mobile version of the image. We also have another media query (max-width: 600px) that overlaps. The goal is to discover if one, two or all three images are download when both media queries apply. 34 |

35 | 36 |

37 | 38 |

HTML Code

39 |

<div id="test8"></div>
 40 |

41 | 42 |

CSS Code

43 |

<style type="text/css">
 44 | #test8 {background-image:url('images/desktop.png?');width:200px;height:75px;}
 45 | @media all and (max-width: 599px) {
 46 |     #test8 {background-image:url('images/test8-599.png?');}
 47 | }
 48 | @media all and (max-width: 600px) {
 49 |     #test8 {background-image:url('images/test8-600.png?');}
 50 | }
 51 | </style>
 52 |

53 | 54 | 55 | 56 | 57 |

58 |

Results

59 |

60 | 61 | 62 | 63 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /test9.php: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | Media Query Test: Cascade Override for High Resolution (min-resolution) 10 | 11 | 12 | 13 | 14 | 15 | 16 | 24 | 25 | 26 | 27 | 30 | 31 | 32 |

Media Query Image Download Test

33 | 34 |

Test Nine: Cascade Override for High Resolution (min-resolution)

35 |

36 | In this test, we start with a background image that is low res. Then we use a CSS media query to replace that background image if the it is a high resolution display. Same as test 7, except we're using min-resolution in non-webkit browsers. 37 |

38 | 39 |

40 | 41 |

HTML Code

42 | <div id="test9"></div> 43 | 44 |

CSS Code

45 |

<style type="text/css">
 46 | 
 47 |     #test9 {background-image:url('images/lowres.png?');width:200px;height:75px;}
 48 | 
 49 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
 50 | only screen and (min-resolution: 144dpi) {
 51 |     #test9 {background-image:url('images/highres.png?');width:200px;height:75px;}
 52 | }
 53 | </style>
 54 |

55 | 56 |

57 |

Results

58 |

59 | 60 | 61 | 104 | 105 | 106 | --------------------------------------------------------------------------------