0787d374000e6608ea02d9ef0a6e3086ebe1c179
[WebKit-https.git] / Tools / LayoutReloaded / test / index.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 iframe {
6     border: 0px;
7 }
8 </style>
9 <script>
10 let testFiles = [
11     "relative-simple.html",
12     "relative-bottom.html",
13     "relative-right.html",
14     "relative-auto.html",
15     "relative-auto-with-parent-offset.html",
16     "relative-position-when-containing-block-is-not-in-the-formatting-context.html",
17     "relative-siblings.html",
18     "padding-simple.html",
19     "padding-nested.html",
20     "border-simple.html",
21     "margin-simple.html",
22     "margin-sibling-collapse-propagated.html",
23     "margin-propagation-simple-content-height.html",
24     "margin-left-right-sizing.html",
25     "margin-left-right-sizing-out-of-flow.html",
26     "margin-collapse-with-block-formatting-context2.html",
27     "margin-collapse-with-block-formatting-context.html",
28     "margin-collapse-when-child-has-padding-border.html",
29     "margin-collapse-top-nested.html",
30     "margin-collapse-simple.html",
31     "margin-collapse-first-last-are-floating.html",
32     "margin-collapse-bottom-nested.html",
33     "margin-collapse-bottom-bottom.html",
34     "absolute-auto-with-sibling-margin-bottom.html",
35     "absolute-bottom.html",
36     "absolute-height-stretch.html",
37     "absolute-left-auto.html",
38     "absolute-left-right-top-bottom-auto.html",
39     "absolute-nested.html",
40     "absolute-nested2.html",
41     "absolute-simple.html",
42     "absolute-width-shrink-to-fit.html",
43     "absolute-width-stretch.html",
44     "absolute-with-static-block-position-nested.html",
45     "absolute-position-when-containing-block-is-not-in-the-formatting-context.html",
46     "absolute-position-when-containing-block-is-not-in-the-formatting-context2.html",
47     "fixed-nested.html",
48     "floating-box-left-and-right-multiple.html",
49     "floating-box-right-simple.html",
50     "floating-left-right-simple.html",
51     "floating-left-right-with-all-margins.html",
52     "floating-multiple-lefts-in-body.html",
53     "floating-multiple-lefts-multiple-lines.html",
54     "floating-multiple-lefts.html",
55     "floating-box-with-relative-positioned-sibling.html",
56     "floating-lefts-and-rights-simple.html",
57     "floating-with-new-block-formatting-context.html",
58     "floating-box-clear-right-simple.html",
59     "floating-box-with-clear-simple.html",
60     "floating-box-with-clear-siblings.html",
61     "floating-box-clear-both-simple.html",
62     "almost-intruding-left-float-simple.html",
63     "negative-margin-simple.html",
64     "intruding-left-float-simple.html",
65     "simple-inline-text.html",
66     "simple-multiline-text.html"
67 ];
68
69 let debugThis = [];
70
71 function addJS(fileName) {
72     let script = document.currentScript.src;
73     let imported = document.createElement('script');
74     imported.src = fileName;
75     document.head.appendChild(imported);
76 }
77
78 addJS("./TestHarness.js");
79 addJS("../Utils.js");
80 addJS("../Layout.js");
81 addJS("../TreeBuilder.js");
82 addJS("../LayoutState.js");
83 addJS("../LayoutTree/Box.js");
84 addJS("../LayoutTree/Container.js");
85 addJS("../LayoutTree/BlockContainer.js");
86 addJS("../LayoutTree/InitialBlockContainer.js");
87 addJS("../LayoutTree/InlineBox.js");
88 addJS("../LayoutTree/Text.js");
89 addJS("../DisplayTree/Box.js");
90 addJS("../FormattingState/FormattingState.js");
91 addJS("../FormattingState/BlockFormattingState.js");
92 addJS("../FormattingState/InlineFormattingState.js");
93 addJS("../FormattingContext/FormattingContext.js");
94 addJS("../FormattingContext/FloatingContext.js");
95 addJS("../FormattingContext/BlockFormatting/BlockFormattingContext.js");
96 addJS("../FormattingContext/BlockFormatting/BlockMarginCollapse.js");
97 addJS("../FormattingContext/InlineFormatting/InlineFormattingContext.js");
98 addJS("../FormattingContext/InlineFormatting/Line.js");
99
100 let failedTests = [];
101
102 function printResult(files, currentTestIndex) {
103     let resultContent = currentTestIndex != null ? ("Testing..." + currentTestIndex + " out of " + files.length) : ("Number of tests: " + files.length) ;
104     resultContent += "<br><br>Passed: " + ((currentTestIndex != null ? currentTestIndex : files.length) - failedTests.length) + "<br>Failed: " + failedTests.length;
105     if (failedTests.length > 0) {
106         resultContent += "<br><br>Failed cases:"
107         failedTests.forEach(function(item) {
108             resultContent += "<br><a href=\"" + files[item] + "\">" + files[item] + "</a>";
109         });
110     }
111     result.innerHTML = resultContent;
112 }
113
114 function runTest(files, currentTestIndex) {
115     printResult(files, currentTestIndex);
116     let iframe = document.createElement("iframe");
117     iframe.src = files[currentTestIndex];
118     iframe.id = "testFrame";
119     iframe.width = window.innerWidth;
120     iframe.height = window.innerHeight;
121     iframe.onload = function() {
122         let testFrame = document.getElementById("testFrame");
123         let passed = runLayout(testFrame.contentWindow);
124         testFrame.remove();
125         if (!passed)
126             failedTests.push(currentTestIndex);
127         setTimeout(function() {
128             if (currentTestIndex < files.length - 1)
129                 runTest(files, ++currentTestIndex);
130             else
131                 printResult(files);
132         }, 0);
133     };
134     document.body.appendChild(iframe);
135 }
136
137 function runTests() {
138     runTest(debugThis.length ? debugThis : testFiles, 0);
139 }
140 </script>
141 </head>
142 <body onload="runTests()">
143 <pre id=result></pre>
144 </body>
145 </html>