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

Case4

Timer events are executed in unexpected order

Description

After 10 seconds from onload event handler of image1.jpg is called, timer event handler is called. The timer event handler calls timeFunction which is define by window.onload event handler or script in case4_i.html. If timer event handler is called before window.onload and parsing of case4_i.html, a concurrency bug occrus due to undefined function timeFunction.

Example

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

Reference

websites playing timing roulette, http://my.opera.com/hallvors/blog/2009/03/07/websites-playing-timing-roulette

Source code

case4.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Case4</title>
</head>
<body>
<div id="outputTimerFunction"></div>
<script>
function image1Loaded() {
setTimeout(function() { timerFunction(); }, 10000);
}
var timerFunction = 0;
</script>
<iframe src="case4_i.html"></iframe><br />
<script src='dummy.js'></script>
<script>
window.onload = function() {
timerFunction = function() {
document.getElementById("outputTimerFunction").innerHTML = "timerFunction is called";
}
}
function button1Clicked() {
document.getElementById("outputButton1").innerHTML = "Button 1 is clicked";
}
function button2Clicked() {
document.getElementById("outputButton2").innerHTML = "Button 2 is clicked";
}
function button3Clicked() {
document.getElementById("outputButton3").innerHTML = "Button 3 is clicked";
}
</script>
<script src='dummy2.js'></script>
<button onclick="button1Clicked()" >Button 1</button>
<button onclick="button2Clicked()" >Button 2</button>
<button onclick="button3Clicked()" >Button 3</button>
<div id="outputButton1"></div>
<div id="outputButton2"></div>
<div id="outputButton3"></div>
<img src="image1.jpg" onload="image1Loaded()" height="80" width="80">
</body>
</html>

case4_i.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Case4 iframe</title>
</head>
<body>
<h1>iframe</h1>
<script>
function image2Loaded() {
document.getElementById("outputImage2").innerHTML = "image2 is loaded";
}
parent.timerFunction = function() {
parent.document.getElementById("outputTimerFunction").innerHTML = "timerFunction is called";
}
</script>
<div id="outputImage2"></div>
<img src="image2.jpg" height="100" witdth="100" onload="image2Loaded()">
</body>
</html>

dummy.js

// dummy. works noting.
// dummy. works noting.
// dummy. works noting.

dummy2.js

// dummy. works noting.
// dummy. works noting.
// dummy. works noting.

Execution Model

Operations and an Inital Test Case

There are 11 operations in this example.

  • p1: parsing operation, parse line 1~15 of case4.html
  • p2: parsing operation, parse dummy.js and line 16~32 of case4.html
  • p3: parsing operation, parse dummy2.js and line 33~42 of case4.html
  • p4: parsing operation, parse case4_i.html
  • n1: network operation, trigger onload event of image1.jpg
  • n2: network operation, trigger onload event of image2.jpg
  • n3: network operation, trigger onload event of window
  • 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
  • t1: timed operation, trigger timer event hander

The inital test case: p1 - p2 - p3 - p4 - n1 - n2 - n3 - u1 - u2 - u3 - t1

Happens-before Relations

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

Generated Possible Test Cases

974 test cases are generated and 56 test cases of them are buggy because they contains (t1, n3) and (t1, p4).

Document Actions