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	https://jmrodriguesgoncalves.blogspot.ca/2017/12/lab-11-gh-pages.html
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	Marvin Sanchez	https://github.com/msanchez5/imgTest	https://msanchez5.github.io/imgTest/	https://marvinrsanchez.wordpress.com/the-unexpected-results
9	Mat Babol	https://github.com/mmBabol/ImgLoad-TestCase	https://mmbabol.github.io/ImgLoad-TestCase/index.html	http://mmbabol.blogspot.ca/2017/12/async-image-load-test-with-gh-pages.html
10	Sean Prashad	https://github.com/SeanPrashad/ImgLoad/tree/gh-pages	http://seanprashad.com/ImgLoad/	http://seanprashad.com/blog/code-literacy.html
11	Avedis Zeitounilian	https://github.com/Avedis777/ImageLoader	https://avedis777.github.io/ImageLoader/	http://avedis777.blogspot.com/2017/12/playing-with-gh-pages.html
12	Haoyu Yang	https://github.com/feihaozi77/Image-loading-test	https://feihaozi77.github.io/Image-loading-test/index.html	http://haoyu1337.blogspot.ca/2017/12/working-with-gh-pages.html
13	Fateh Sandhu	https://github.com/Fatehsandhu/DPS909-Lab11	https://fatehsandhu.github.io/DPS909-Lab11/	https://firefoxmacblog.wordpress.com/2018/01/01/179/
14	Dan Epstein	https://github.com/Securter/Image_onLoadEventTest	https://securter.github.io/Image_onLoadEventTest/LoadFire.html	http://www.danepstein.ca/testing-image-onload-event-handler/
15	Steven De Filippis	https://github.com/St3v3n-D/html_img_onload_debug	https://st3v3n-d.github.io/html_img_onload_debug/	https://dps909.defilippis.ca/index.php/2017/12/31/debugging-imgs-onload-unexpected-behavior/
16	Azusa Shimazaki	https://github.com/azusaaz/test0001_onload	https://azusaaz.github.io/test0001_onload/	http://assmith2017.blogspot.ca/2017/12/code-reading-for-open-source.html
17	Anthony LoMagno	https://github.com/ajlomagno/osd600-Lab11/tree/gh-pages	https://ajlomagno.github.io/osd600-Lab11/	https://anthonylomagno.wordpress.com/2018/01/03/lab-11-github-pages/
18	Gaurav Verma	https://github.com/GauravV-02/OSD-Lab11/tree/gh-pages	https://gauravv-02.github.io/OSD-Lab11/index.html	WIP
19	Parthkumar Patel	https://github.com/ppatel221/OSD-11	https://ppatel221.github.io/OSD-11/	https://ppatel221.wordpress.com/2018/01/05/working-wit-github-pages/
20	Mithilan Sivanesan	https://github.com/Mithilan16/ODS_Lab11/tree/gh-pages	https://mithilan16.github.io/ODS_Lab11/	https://mithilanblog.wordpress.com/2018/01/06/gh-pages/
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40