Case3
Page in iframe is parsed in unexpected order
Description
Line 9 in case3_i1.html defines a variable message in its parent frame (case3.html) and line 9 in case3_i2.html reads the variable. If case3_i2.html is parsed before case3_i1.html, a concurrency bug occurs.
Example
http://pswlab.kaist.ac.kr:81/case3.html
Reference
"Accessing DOM elements too soon" in "Avoiding intermittent oranges", https://developer.mozilla.org/en-US/docs/Mozilla/QA/Avoiding_intermittent_oranges
Race Detection for Web Applications (PLDI'12)
Source code
case3.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Case3</title>
</head>
<body>
<script type="text/javascript" >
function image3Loaded() {
document.getElementById("outputImage3").innerHTML = "Image 3 is loaded";
}
function button1Clicked() {
document.getElementById("outputButton1").innerHTML = "Button 1 is clicked";
}
</script>
<button onclick="button1Clicked()">Button 1</button>
<div id="outputIframe2"></div>
<div id="outputButton1"></div>
<h1>iframe1</h1>
<iframe src="case3_i1.html" ></iframe>
<script src="dummy.js"></script>
<h1>iframe2</h1>
<iframe onload="secondIframe()" src="case3_i2.html" ></iframe>
<div id="outputImage3"></div>
<img src="image3.jpg" height="100" witdth="100" onload="image3Loaded()">
</body>
</html>
case3_i1.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Case3 iframe1</title>
</head>
<body>
<script type="text/javascript" >
parent.message = {name:"iframe1", text:"iframe1 is loaded"};
function image1Loaded() {
document.getElementById("outputImage1").innerHTML = "Image1 is loaded";
}
</script>
iframe1
<div id="outputImage1"></div>
<img src="image1.jpg" height="100" witdth="100" onload="image1Loaded()">
</body>
</html>
case3_i2.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Case3 iframe2</title>
</head>
<body>
<script type="text/javascript" >
parent.document.getElementById("outputIframe2").innerHTML = parent.message.text;
function image2Loaded() {
document.getElementById("outputImage2").innerHTML = "Image2 is loaded";
}
</script>
iframe2
<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.
Execution Model
Operations and an Inital Test Case
There are 8 operations in this example.
- p1: parsing operation, parse line 1~20 of case3.html
- p2: parsing operation, parse dummy.js and line 21~37 of case3.html
- p3: parsing operation, parse case3_i1.html
- p4: parsing operation, parse case3_i2.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 image3.jpg
- u1: user event operation, trigger onclick event of button1
The inital test case: p1 - p2 - p3 - p4 - n1 - n2 - n3 - u1
Happens-before Relations
- For two parsing operations: (p1, p2), (p1, p3), (p2, p4)
- For a parsing operation and a user event operation: (p1, u1)
- For a network operation: (p3, n1), (p4, n2), (p2, n3)
Generated Possible Test Cases
315 test cases are generated and 105 test cases of them are buggy because they contains (p4, p3).
