[LayoutReloaded] Introduce FormattingState (Block/Inline/etc)
[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 ];
66
67 let debugThis = [];
68
69 function addJS(fileName) {
70     let script = document.currentScript.src;
71     let imported = document.createElement('script');
72     imported.src = fileName;
73     document.head.appendChild(imported);
74 }
75
76 addJS("./TestHarness.js");
77 addJS("../Utils.js");
78 addJS("../Layout.js");
79 addJS("../TreeBuilder.js");
80 addJS("../LayoutContext.js");
81 addJS("../LayoutTree/Box.js");
82 addJS("../LayoutTree/Container.js");
83 addJS("../LayoutTree/BlockContainer.js");
84 addJS("../LayoutTree/InitialBlockContainer.js");
85 addJS("../LayoutTree/InlineBox.js");
86 addJS("../LayoutTree/Text.js");
87 addJS("../DisplayTree/Box.js");
88 addJS("../FormattingState/FormattingState.js");
89 addJS("../FormattingState/BlockFormattingState.js");
90 addJS("../FormattingState/InlineFormattingState.js");
91 addJS("../FormattingContext/FormattingContext.js");
92 addJS("../FormattingContext/FloatingContext.js");
93 addJS("../FormattingContext/BlockFormatting/BlockFormattingContext.js");
94 addJS("../FormattingContext/BlockFormatting/BlockMarginCollapse.js");
95 addJS("../FormattingContext/InlineFormatting/InlineFormattingContext.js");
96 addJS("../FormattingContext/InlineFormatting/Line.js");
97
98 let failedTests = [];
99
100 function printResult(files, currentTestIndex) {
101     let resultContent = currentTestIndex != null ? ("Testing..." + currentTestIndex + " out of " + files.length) : ("Number of tests: " + files.length) ;
102     resultContent += "<br><br>Passed: " + ((currentTestIndex != null ? currentTestIndex : files.length) - failedTests.length) + "<br>Failed: " + failedTests.length;
103     if (failedTests.length > 0) {
104         resultContent += "<br><br>Failed cases:"
105         failedTests.forEach(function(item) {
106             resultContent += "<br><a href=\"" + files[item] + "\">" + files[item] + "</a>";
107         });
108     }
109     result.innerHTML = resultContent;
110 }
111
112 function runTest(files, currentTestIndex) {
113     printResult(files, currentTestIndex);
114     let iframe = document.createElement("iframe");
115     iframe.src = files[currentTestIndex];
116     iframe.id = "testFrame";
117     iframe.width = window.innerWidth;
118     iframe.height = window.innerHeight;
119     iframe.onload = function() {
120         let testFrame = document.getElementById("testFrame");
121         let passed = runLayout(testFrame.contentWindow);
122         testFrame.remove();
123         if (!passed)
124             failedTests.push(currentTestIndex);
125         setTimeout(function() {
126             if (currentTestIndex < files.length - 1)
127                 runTest(files, ++currentTestIndex);
128             else
129                 printResult(files);
130         }, 0);
131     };
132     document.body.appendChild(iframe);
133 }
134
135 function runTests() {
136     runTest(debugThis.length ? debugThis : testFiles, 0);
137 }
138 </script>
139 </head>
140 <body onload="runTests()">
141 <pre id=result></pre>
142 </body>
143 </html>