Case2
Dynamic script loading is completed later than expected
Description
In Case2, line 9~14 load a JavaScript file case2_s2.js dynamically. case2_s2.js defines a function button2Clicked which is used in onclick event handler of button2. If button2 is clicked before case2_s2.js is loaded, a concurrency bug occurs.
Example
http://pswlab.kaist.ac.kr:81/case2.html
Reference
Coupling asynchronous scripts, http://www.stevesouders.com/blog/2008/12/27/coupling-async-scripts/
Source code
case2.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Case2</title>
</head>
<body>
<script>
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'case2_s2.js';
head.appendChild(script);
head = document.getElementsByTagName('head')[0];
function image1Loaded() {
document.getElementById("outputImage1").innerHTML = "Image1 is loaded";
}
</script>
<iframe id="iframe1" src="case2_i.html"></iframe><br />
<script src='case2_s1.js'></script>
<button id="button1" onclick="button1Clicked()" >Button1</button>
<div id="outputButton1"></div>
<script src='dummy.js'></script>
<button id="button2" onclick="button2Clicked()" >Button2</button>
<div id="outputButton2"></div>
<img src="image1.jpg" onload="image1Loaded()" height="80" witdth="80" />
<div id="outputImage1"></div>
</body>
</html>
case2_i.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Case2 iframe</title>
</head>
<body>
<h1>Picture</h1>
<script>
function image2Loaded() {
document.getElementById("outputImage2").innerHTML = "Image2 is loaded";
}
</script>
<div id="outputImage2"></div>
<img src="image2.jpg" height="100" witdth="100" onload="image2Loaded()" />
</body>
</html>
case2_s1.js
function button1Clicked() {
document.getElementById("outputButton1").innerHTML = "Button 1 is clicked";
}
case2_s2.js
function button2Clicked() {
document.getElementById("outputButton2").innerHTML = "Button 2 is clicked";
}
dummy.js
// dummy. works noting.
// dummy. works noting.
// dummy. works noting.
Execution Model
Operations and an Inital Test Case
There are 9 operations in this example.
- p1: parsing operation, parse line 1~20 of case2.html
- p2: parsing operation, parse case2_s1.js and line 21~23 of case2.html
- p3: parsing operation, parse dummy.js and line 24~30 of case2.html
- p4: parsing operation, parse case2_i.html
- p5: parsing operation, parse case2_s2.js
- n1: network operation, trigger onload event of image1.jpg
- n2: network operation, trigger onload event of image2.jpg
- u1: user event operation, trigger onclick event of button1
- u2: user event operation, trigger onclick event of button2
The inital test case: p1 - p2 - p3 - p4 - n1 - n2 - u1 - u2
Happens-before Relations
- For two parsing operations: (p1, p2), (p1, p4), (p2, p3), (p1, p5)
- For two user event operations: (u1, u2)
- For a parsing operation and a user event operation: (p2, u1), (p3, u2)
- For a network operation: (p3, n1), (p4, n2)
Generated Possible Test Cases
840 test cases are generated and 196 test cases of them are buggy because they contains (u2, p5).
