Some tests not explained on page

[ctag]

Hi,

Sorry for the github issue. I did try to email the address on the acid page, but it bounced back.

On the acid test page there are eight blue Javascript Test dots and eight test descriptions below, but the title text of some of the dots does not correspond to any description.

e.g. The last blue dot has a title of "test2j" but there isn't a test 2j description.

Thank you!

[machawk1]

@ctag, thanks for the ping and interest. My e-mail provider disavowed catch-alls, so I forgot to explicitly recreate the contact address. I have done so now, so the address listed there should work for others in the future.

I believe there is a mismatch in the "index" in the block titles but if I remember correctly, the test descriptions listed below the tests are accurate as to what is being performed. I will do a sanity check and update it.

Did you encounter this at the deployed instance (acid.matkelly.com) or by running the code in the repo?

[machawk1]

(below for my own notes but feel free to respond)

The blocks in section 2 are titled: a,b,c,d,e,g,i,j.

The listed tests are 2 are: a,b,c,d,e,f,g,h

This is chalked up to the tests being a few more in number but trimmed prior to publication. While the site ought to be "frozen in time" for reproducibility, the <img> titles are not evident in the publication, so can likely be fixed w/o issue.

I believe the blocks with titles "test2g", "test2i", and "test2j" are representative of the listed tests below of 2f, 2g, and 2h, respectively -- the HTML titles are just incorrect.

The titles are somewhat arbitrary and incremental, so it is useful to verify the functionality. The tests are added in series by adding event listeners for the DOMContentLoaded event. The sixth event in the "2" block has the code:

var test2GImageRed = new Image();
test2GImageRed.src = "red.png";
test2GImageRed.id = "test2g";
test2GImageRed.title = "test2g";
var scriptParent = document.getElementById('scriptParent');
scriptParent.appendChild(test2GImageRed);

//change image after 2 seconds
setTimeout(function(){
    document.getElementById('test2g').src = "pixel.png";
},2000);

...which "Manipulates the DOM after a certain delay" per the use of the setTimeout function. This corresponds to the description of 2f, so the block with title test2g, as set in the above function, out to have the title (and potentially the id) of test2f.

The seventh test with title test2i has code of:

var test2IImageRed = new Image();
test2IImageRed.src = "red.png";
test2IImageRed.id = "test2i";
test2IImageRed.title = "test2i";
var scriptParent = document.getElementById('scriptParent');
scriptParent.appendChild(test2IImageRed);
window.onscroll = function(oEvent){
    if(test2iExecuted){return;}
    test2iExecuted = true;
    document.getElementById('test2i').src = "pixel_2i.png";
};

with a DOM change triggered on page interaction, i.e., the user scrolls. The description of test 2g is "Code that loads content only after user interaction (tests for interaction-reliant loading of a resource)", which is representative of this functionality, so the test2IImageRed.title and the corresponding id ought to refer to test 2g and not test 2i.

The final test of the "2" set has code:

var test2JImageRed = document.createElement('img');
test2JImageRed.src = "transparent_2j.png";
test2JImageRed.id = "test2j";
test2JImageRed.title = "test2j";

var scriptParent = document.getElementById('scriptParent');
scriptParent.appendChild(test2JImageRed);

var linkTag = document.createElement("link");
linkTag.href = "2j.css";
linkTag.rel = "stylesheet";
linkTag.type = "text/css";

document.head.appendChild(linkTag);
//scriptParent.appendChild(test13ImageBlue);    
//scriptParent.appendChild(test13IframeBlue);   

setTimeout(function(){
    //document.write('<scr'+'ipt type="text/javascript" src="dynamicallyIncludedScript.js"></sc'+'ript>');
},2100);

Note the commented out superfluous functionality. The core of this function is the link tag being appended to the DOM. Recall that this is only executed once the DOM is ready (encapsulating this code snippet). The description of test 2h says "2h - Code that dynamically adds stylesheets", which is representative of the above block. As with the others, the titles, ids, and potentially even the variable semantics ought to be tweaked to correspond with the descriptions below.