DPS909/OSD600 Fall 2017 Lab 11

Introduction

In this lab you will practice reading code on a large, open source project. You will also create a simple HTML/JS test case, and learn about GitHub's special gh-pages branch and static web publishing.

Step 1. Write a Test Case

One of your friends is building a web site for a local company. She has noticed that in some browsers, one of her pages isn't working correctly. She's been able to reduce the problem down to how images are loading. Here is her latest email to you:

With some browsers, I notice that <img> elements in my page don't seem to always fire their onload event.  Specifically, when I set the .src of an image to the same URL as it's already using, no load event fires.  My code looks something like this:

  var img = document.querySelector('#image-1234');
  img.onload = function loaded() {
     ...
  };

  img.src = "http://some.url.com/image";

  ...
  // Some where late in the code I set the URL to the same thing again
  img.src = "http://some.url.com/image";

  // I'd expect the onload event to fire a second time, but it doesn't always in this case!

Later on, I sometimes need to reset the image, and in some cases, it needs to use the same URL again.  I expect to get an onload event firing every time I change the img.src, no matter what the URL is.

You are asked to write a simple Test Case to test whether a browser has this bug or not. Your test should be a very basic HTML page with some JavaScript that tries to do what your friend is describing:

1. load an img with a given src (use any image URL you want)
2. make sure the onload event fires
3. after the first onload is completed, update the img.src to the same URL you used in step 1.
4. make sure a second onload event fires. If the second event fires, your test passes. If not, it fails.

You can use CSS to indicate if your test passed or failed (e.g., set the background-color of the document.body to red after the first onload and then to green after the second, or do any other visual thing you want to indicate pass/fail).

NOTE: your test case should be simple. Don't use extra JavaScript or CSS libraries. You don't need to use any special testing infrastructure. Just a basic HTML page with some JavaScript.

Step 2. Host your Test Case on GH-PAGES

To make it easy for anyone to try our test case, we'll host it on the web. One easy way to do this is to use GitHub's special gh-pages branch: GitHub will host any static web content you put on a gh-pages branch on a special URL.

1. Create a new repo on GitHub for your test case.
2. Enable gh-pages publishing
3. Clone your repo locally
4. Switch to your gh-pages branch: git checkout gh-pages
5. Add your test case HTML file, commit, and push your gh-pages branch to GitHub

You should now be able to browse to your test case by altering the format of your URL like so:

• repo: https://github.com/{username}/{repo-name}/{test-case-file.html}
• web: https://{username}.github.io/{repo-name}/{test-case-file.html}

Confirm that you can see your test case via github.io.

Step 3. Test in Various Browsers

See which browsers have this bug by running your test case in various browsers (depending on OS):

• MS Edge
• Firefox
• Chrome
• Safari
• Opera

If you don't have access to a browser due to operating system issues, ask a friend to test for you. You can also try downloading Nightly versions of these browsers instead of building them yourself:

• https://www.google.com/chrome/browser/canary.html
• https://www.mozilla.org/en-US/firefox/channel/desktop/
• https://webkit.org/downloads/
• http://blogs.opera.com/desktop/streams/

Which browsers pass your test? Which fail?

Step 4. Read the code

Pick one of Safari, Chrome, or Firefox, and try to find the code where image's are loaded, and the load event is fired:

• • WebKit: WebKit Trac
  • Chromium: Search or Browse
  • Mozilla: Mozilla DXR

Figure out where in code where your test case is passing or failing.

Submission

Please add your info to the table below. You need to include a blog post which covers how your test case works, how you searched the code, your thoughts about gh-pages, code reading on something is bug, etc.

#	Name	Test Case Repo (URL)	Gh-Pages Test Case (URL)	Blog Post (URL)
1	Phil Henning	https://github.com/PhillypHenning/osd-lab11	https://phillyphenning.github.io/osd-lab11/testingspace.html	WIP
2	Michael Pierre	https://github.com/MPierre9/testHTML	https://mpierre9.github.io/testHTML/index.html	https://michaelpierreblog.wordpress.com/2017/12/16/async-image-load-test-and-code-reading/
3	Leonel Jara	https://github.com/lejara/ImageTestCase/tree/gh-pages	https://lejara.github.io/ImageTestCase/index.html	WIP
4	Jay Yin	https://github.com/jayyyin/webimgcheck/blob/master/webtest.html	https://jayyyin.github.io/webimgcheck/webtest.html	http://jyopensource.blogspot.ca/2017/12/testing-if-image-is-reloaded-even-if.html
5	Svitlana Galianova	https://github.com/svitlana-galianova/onLoadHtmlTest/	https://svitlana-galianova.github.io/onLoadHtmlTest/test.html	WIP
6	Joao Rodrigues	https://github.com/jmrodriguesgoncalves/lab11	https://jmrodriguesgoncalves.github.io/lab11/index.html	WIP
7	Nicholas Krause	https://github.com/xerofoify/image-webtests	https://xerofoify.github.io/image-webtests/img_test.html	https://wordpress.com/post/nicholas95com.wordpress.com/238
8
9
10	Sean Prashad	https://github.com/SeanPrashad/ImgLoad/tree/gh-pages	http://seanprashad.com/ImgLoad/	http://seanprashad.com/blog/code-literacy.html
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40