[LayoutReloaded] Introduce FloatingState.
[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("../FormattingState/FloatingState.js");
94 addJS("../FormattingContext/FormattingContext.js");
95 addJS("../FormattingContext/FloatingContext.js");
96 addJS("../FormattingContext/BlockFormatting/BlockFormattingContext.js");
97 addJS("../FormattingContext/BlockFormatting/BlockMarginCollapse.js");
98 addJS("../FormattingContext/InlineFormatting/InlineFormattingContext.js");
99 addJS("../FormattingContext/InlineFormatting/Line.js");
100
101 let failedTests = [];
102
103 function printResult(files, currentTestIndex) {
104     let resultContent = currentTestIndex != null ? ("Testing..." + currentTestIndex + " out of " + files.length) : ("Number of tests: " + files.length) ;
105     resultContent += "<br><br>Passed: " + ((currentTestIndex != null ? currentTestIndex : files.length) - failedTests.length) + "<br>Failed: " + failedTests.length;
106     if (failedTests.length > 0) {
107         resultContent += "<br><br>Failed cases:"
108         failedTests.forEach(function(item) {
109             resultContent += "<br><a href=\"" + files[item] + "\">" + files[item] + "</a>";
110         });
111     }
112     result.innerHTML = resultContent;
113 }
114
115 function runTest(files, currentTestIndex) {
116     printResult(files, currentTestIndex);
117     let iframe = document.createElement("iframe");
118     iframe.src = files[currentTestIndex];
119     iframe.id = "testFrame";
120     iframe.width = window.innerWidth;
121     iframe.height = window.innerHeight;
122     iframe.onload = function() {
123         let testFrame = document.getElementById("testFrame");
124         let passed = runLayout(testFrame.contentWindow);
125         testFrame.remove();
126         if (!passed)
127             failedTests.push(currentTestIndex);
128         setTimeout(function() {
129             if (currentTestIndex < files.length - 1)
130                 runTest(files, ++currentTestIndex);
131             else
132                 printResult(files);
133         }, 0);
134     };
135     document.body.appendChild(iframe);
136 }
137
138 function runTests() {
139     runTest(debugThis.length ? debugThis : testFiles, 0);
140 }
141 </script>
142 </head>
143 <body onload="runTests()">
144 <pre id=result></pre>
145 </body>
146 </html>