summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-break/widows-orphans-015.html
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-break/widows-orphans-015.html')
-rw-r--r--testing/web-platform/tests/css/css-break/widows-orphans-015.html64
1 files changed, 64 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-break/widows-orphans-015.html b/testing/web-platform/tests/css/css-break/widows-orphans-015.html
new file mode 100644
index 0000000000..054490a785
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/widows-orphans-015.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Fragmentation level 3 Test: initial 'widows' value and content distribution in columns</title>
+
+ <link rel="author" title="GĂ©rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+ <link rel="help" href="https://www.w3.org/TR/css-break-3/#widows-orphans">
+ <link rel="match" href="reference/widows-orphans-016-ref.html">
+
+ <!--
+ Date created: November 26th 2020
+ Last modified: December 6th 2020
+ -->
+
+ <!--
+
+ Bug 137367: Implement orphans and widows
+ https://bugzilla.mozilla.org/show_bug.cgi?id=137367
+
+ -->
+
+ <meta name="assert" content="This test checks that 'widows' applies to multi-column containers and that the initial value of 'widows' is '2'. When an UA succeeds at applying 'widows', then there is 2 line boxes at the top of the 3rd column box.">
+
+ <style>
+ div
+ {
+ border: orange solid 4px;
+ font-size: 20px;
+ line-height: 1.3; /* computes to 26px */
+ height: 104px; /* Therefore, exactly 4 line boxes */
+ margin-bottom: 1em;
+ padding: 0.5em; /* computes to 10px */
+ width: 460px;
+
+ columns: 4 auto;
+
+ column-fill: auto;
+
+ column-gap: 1em; /* computes to 20px */
+
+ column-rule: blue solid 4px;
+ }
+
+ div#test
+ {
+ orphans: 1;
+ widows: initial;
+ }
+
+ div#reference
+ {
+ orphans: 1;
+ widows: 1;
+ }
+ </style>
+
+ <p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>.
+
+ <div id="test">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div>
+
+ <div id="reference">1<br>2<br>3<br>4<br>5<br>6<br>7<br><br>8<br>9</div>
+
+ <!-- Same as div#test except 1 extra br here ^ -->