OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script src="../../resources/js-test.js"></script> | 4 <script src="../../resources/js-test.js"></script> |
5 <script src="resources/target-div-run-test.js"></script> | |
6 <link rel="stylesheet" type="text/css" href="resources/link-highlight-style.css"
> | 5 <link rel="stylesheet" type="text/css" href="resources/link-highlight-style.css"
> |
7 </head> | 6 </head> |
8 <body onload="runTest();"> | 7 <body onload="runTest();"> |
9 <div id="highlight" class="fauxHighlight" style="z-index: 1; position: absolute;
"></div> | 8 <div id="highlight" class="fauxHighlight" style="z-index: 1; position: absolute;
"></div> |
10 <div style="position: absolute; top: 10px; left: 10px; -webkit-transform: transl
ateZ(0);"> | 9 <div class="opaqueHighlight" id="targetDiv" style="position: fixed; top: 100px;
left: 10px; width: 350px; height: 110px; border-style: solid; cursor: pointer; f
ont-size: x-small"> |
11 <div style="position: relative; top: 10px; left: 25px;"> | 10 pointer |
12 <div id="targetDiv" style="position: fixed; left: 50px; top: 50px; width: 50px;
height: 50px; box-shadow: 0px 4px 23px 5px rgba(0, 0, 0, 0.2); border-style: sol
id; border-width: 2px;"> | 11 <div style="position: fixed; top: 110px; left: 60px; width: 250px; height: 90px;
border-style: solid;"> |
13 <br><center>Target</center><br> | 12 none |
| 13 <div style="position: fixed; top: 120px; left: 110px; width: 150px; height: 70px
; border-style: solid; cursor: pointer;"> |
| 14 pointer |
| 15 <div style="position: fixed; top: 130px; left: 160px; width: 50px; height: 50px;
border-style: solid;"> |
| 16 none |
| 17 </div> |
14 </div> | 18 </div> |
15 </div> | 19 </div> |
16 </div> | 20 </div> |
17 <div style="position: absolute; left: 10px; top: 250px; -webkit-transform: trans
lateZ(0);"> | 21 <div style="position: absolute; left: 10px; top: 250px; -webkit-transform: trans
lateZ(0);"> |
18 This test is successful if the box labelled "Target" has a green rectangle cente
red on it. | 22 This test is successful if the outermost box above is covered with a green recta
ngle. |
19 </div> | 23 </div> |
20 <script> | 24 <script> |
21 function runTest() { | 25 function runTest() { |
22 var clientRect = document.getElementById('targetDiv').getBoundingClientRect(
); | 26 var clientRect = document.getElementById('targetDiv').getBoundingClientRect(
); |
23 var highlight = document.getElementById('highlight'); | 27 var highlight = document.getElementById('highlight'); |
24 | 28 |
25 highlight.style.left = clientRect.left + "px"; | 29 highlight.style.left = clientRect.left + "px"; |
26 highlight.style.top = clientRect.top + "px"; | 30 highlight.style.top = clientRect.top + "px"; |
27 highlight.style.width = clientRect.width + "px"; | 31 highlight.style.width = clientRect.width + "px"; |
28 highlight.style.height = clientRect.height + "px"; | 32 highlight.style.height = clientRect.height + "px"; |
29 | 33 |
30 if (window.testRunner) | 34 if (window.testRunner) |
31 testRunner.dumpAsTextWithPixelResults(); | 35 testRunner.dumpAsTextWithPixelResults(); |
32 } | 36 } |
33 </script> | 37 </script> |
34 </script> | |
35 </body> | 38 </body> |
36 </html> | 39 </html> |
OLD | NEW |