Personal tools
You are here: Home Data Concurrency bug patterns Case7

Case7

alert() makes parsing stop at unsafe point

Description

alert() pauses JavaScript execution except network event such as onload event. In this example, the value of a variable text is an object in line 25 of case7.html but line 30 in window.onload event handler set a variable text as 0. When button3 is clicked and alert() is called, window.onload event changes the variable text and a concurrency bug occurs.

Example

http://pswlab.kaist.ac.kr:81/case7.html

Reference

"Timing and Synchronization in JavaScript", http://dev.opera.com/articles/view/timing-and-synchronization-in-javascript/

Source code

case7.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Case7</title>
</head>
<body>
<img src="image1.jpg" onload="image1Loaded()" height="80" witdth="80" /><br>
<script type="text/javascript">
function image1Loaded() {
document.getElementById("outputImage1").innerHTML = "Image1 is loaded";
document.getElementById("button2").disabled = false;
}
</script>
<div id="outputImage1"></div>
<script type="text/javascript">
function button1Clicked() {
document.getElementById("outputButton1").innerHTML = "Button1 is clicked";
}
function button2Clicked() {
document.getElementById("outputButton2").innerHTML = "Button2 is clicked";
document.getElementById("button3").disabled = false;
}
function button3Clicked() {
text = {imageName:"image1"};
alert("Alert Message");
document.getElementById("outputButton3").innerHTML = text.imageName;
}
window.onload = function () {
text = 0;
}
</script>
<button id="button1" onclick="button1Clicked();" >Button1</button>
<button id="button2" onclick="button2Clicked();" disabled="true" >Button2</button>
<button id="button3" onclick="button3Clicked();" disabled="true" >Start Alert</button>
<div id="outputButton1"></div>
<div id="outputButton2"></div>
<div id="outputButton3"></div>
<script src='dummy.js'></script>
</body>
</html>

Execution Model

Operations and an Inital Test Case

There are 7 operations in this example.

  • p1: parsing operation, parse line 1~38 of case7.html
  • p2: parsing operation, parse dummy.js and line 39~41 of case7.html
  • n1: network operation, trigger onload event of image1.jpg
  • n2: network operation, trigger window.onload event
  • u1: user event operation, trigger onclick event of button1
  • u2: user event operation, trigger onclick event of button2
  • u3: user event operation, trigger onclick event of button3

The inital test case: p1 - p2 - n1 - n2 - u1 - u2 - u3

Happens-before Relations

  • For two parsing operations: (p1, p2)
  • For two user event operations: (u1, u2), (u2, u3)
  • For a parsing operation and a user event operation: (p1, u1), (p1, u2), (p1, u3)
  • For a network operation: (p1, n1), (p1, n2), (p2, n2), (n1, n2)

Generated Possible Test Cases

26 test cases are generated and 10 test cases of them are buggy because they contains (u3, n2).

Document Actions