Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added 15 widows & orphans tests and 14 references: content distribution in columns #26667

Merged
merged 4 commits into from Dec 7, 2020
Merged

Added 15 widows & orphans tests and 14 references: content distribution in columns #26667

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f9c1e5d
Added 15 widows & orphans tests and 14 references
TalbotG Nov 29, 2020
85ac9fa
Corrected initial widows-orphans-[022-039] tests and references
TalbotG Dec 6, 2020
e39324b
Filename-renamed 2 files to avoid conflicts
TalbotG Dec 6, 2020
a78101f
Filename-renamed 2 additional files to avoid conflicts
TalbotG Dec 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
37 changes: 37 additions & 0 deletions css/css-break/reference/widows-orphans-008-ref.html
View file
Open in desktop
@@ -0,0 +1,37 @@
<!DOCTYPE html>

<meta charset="UTF-8">

<title>CSS Reftest Reference</title>

<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">

<style>
div
{
border: orange solid 4px;
font-size: 20px;
height: 104px;
line-height: 1.3; /* computes to 26px */
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;

orphans: 1;
widows: 1;
}
</style>

<p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>.

<div>1<br>2<br>3<br>4<br>5<br>6<br><br><br>7<br>8<br>9</div>

<div>1<br>2<br>3<br>4<br>5<br>6<br><br><br>7<br>8<br>9</div>
37 changes: 37 additions & 0 deletions css/css-break/reference/widows-orphans-009-ref.html
View file
Open in desktop
@@ -0,0 +1,37 @@
<!DOCTYPE html>

<meta charset="UTF-8">

<title>CSS Reftest Reference</title>

<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">

<style>
div
{
border: orange solid 4px;
font-size: 20px;
height: 104px;
line-height: 1.3; /* computes to 26px */
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;

orphans: 1;
widows: 1;
}
</style>

<p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>.

<div>1<br>2<br>3<br>4<br>5<br>6<br>7<br><br>8<br>9</div>

<div>1<br>2<br>3<br>4<br>5<br>6<br>7<br><br>8<br>9</div>
37 changes: 37 additions & 0 deletions css/css-break/reference/widows-orphans-010-ref.html
View file
Open in desktop
@@ -0,0 +1,37 @@
<!DOCTYPE html>

<meta charset="UTF-8">

<title>CSS Reftest Reference</title>

<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">

<style>
div
{
border: orange solid 4px;
font-size: 20px;
height: 104px;
line-height: 1.3; /* computes to 26px */
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;

orphans: 1;
widows: 1;
}
</style>

<p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>.

<div>1<br>2<br>3<br>4<br>5<br>6<br><br><br>7<br>8<br>9</div>

<div>1<br>2<br>3<br>4<br>5<br>6<br><br><br>7<br>8<br>9</div>
37 changes: 37 additions & 0 deletions css/css-break/reference/widows-orphans-011-ref.html
View file
Open in desktop
@@ -0,0 +1,37 @@
<!DOCTYPE html>

<meta charset="UTF-8">

<title>CSS Reftest Reference</title>

<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">

<style>
div
{
border: orange solid 4px;
font-size: 20px;
height: 156px;
line-height: 1.3; /* computes to 26px */
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;

orphans: 1;
widows: 1;
}
</style>

<p>Test passes if the numbers inside both orange-bordered rectangles are <strong>distributed identically</strong>.

<div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br><br><br><br><br>9<br>10<br>11<br>12<br>13<br>14</div>

<div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br><br><br><br><br>9<br>10<br>11<br>12<br>13<br>14</div>
37 changes: 37 additions & 0 deletions css/css-break/reference/widows-orphans-012-ref.html
View file
Open in desktop
@@ -0,0 +1,37 @@
<!DOCTYPE html>

<meta charset="UTF-8">

<title>CSS Reftest Reference</title>

<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">

<style>
div
{
border: orange solid 4px;
font-size: 20px;
height: 208px;
line-height: 1.3; /* computes to 26px */
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;

orphans: 1;
widows: 1;
}
</style>

<p>Test passes if the numbers inside both orange-bordered rectangles are <strong>distributed identically</strong>.

<div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br><br><br><br><br>13<br>14<br>15<br>16<br>17<br>18<br>19</div>

<div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br><br><br><br><br>13<br>14<br>15<br>16<br>17<br>18<br>19</div>
37 changes: 37 additions & 0 deletions css/css-break/reference/widows-orphans-013-ref.html
View file
Open in desktop
@@ -0,0 +1,37 @@
<!DOCTYPE html>

<meta charset="UTF-8">

<title>CSS Reftest Reference</title>

<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">

<style>
div
{
border: orange solid 4px;
font-size: 20px;
height: 234px;
line-height: 1.3; /* computes to 26px */
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;

orphans: 1;
widows: 1;
}
</style>

<p>Test passes if the numbers inside both orange-bordered rectangles are <strong>distributed identically</strong>.

<div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br><br><br><br>16<br>17<br>18<br>19</div>

<div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br><br><br><br>16<br>17<br>18<br>19</div>
37 changes: 37 additions & 0 deletions css/css-break/reference/widows-orphans-014-ref.html
View file
Open in desktop
@@ -0,0 +1,37 @@
<!DOCTYPE html>

<meta charset="UTF-8">

<title>CSS Reftest Reference</title>

<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">

<style>
div
{
border: orange solid 4px;
font-size: 20px;
height: 234px;
line-height: 1.3; /* computes to 26px */
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;

orphans: 1;
widows: 1;
}
</style>

<p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>.

<div>1<br>2<br>3<br>4<br>5<br>6<br>7<br><br><br>8<br>9<br>0</div>

<div>1<br>2<br>3<br>4<br>5<br>6<br>7<br><br><br>8<br>9<br>0</div>
37 changes: 37 additions & 0 deletions css/css-break/reference/widows-orphans-016-ref.html
View file
Open in desktop
@@ -0,0 +1,37 @@
<!DOCTYPE html>

<meta charset="UTF-8">

<title>CSS Reftest Reference</title>

<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">

<style>
div
{
border: orange solid 4px;
font-size: 20px;
height: 104px;
line-height: 1.3; /* computes to 26px */
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;

orphans: 1;
widows: 1;
}
</style>

<p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>.

<div>1<br>2<br>3<br>4<br>5<br>6<br>7<br><br>8<br>9</div>

<div>1<br>2<br>3<br>4<br>5<br>6<br>7<br><br>8<br>9</div>
26 changes: 26 additions & 0 deletions css/css-break/reference/widows-orphans-017-ref.html
View file
Open in desktop
@@ -0,0 +1,26 @@
<!DOCTYPE html>

<meta charset="UTF-8">

<title>CSS Reftest Reference</title>

<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">

<style>
div
{
border: orange solid 4px;
font-size: 20px;
height: 182px;
line-height: 1.3; /* computes to 26px */
margin-bottom: 1em;
padding: 0.5em; /* computes to 10px */
width: 460px;
}
</style>

<p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>.

<div>1<br>2<br>3<br>4<br>5<br>6<br>7</div>

<div>1<br>2<br>3<br>4<br>5<br>6<br>7</div>
65 changes: 65 additions & 0 deletions css/css-break/widows-orphans-008.html
View file
Open in desktop
@@ -0,0 +1,65 @@
<!DOCTYPE html>

<meta charset="UTF-8">

<title>CSS Fragmentation level 3 Test: 'orphans', 'widows' 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-008-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="flags" content="">
<meta name="assert" content="When column boxes are filled sequentially, their content should be distributed and fragmented in accordance with the 'orphans' and the 'widows' declarations. In the test, since the 3rd column box was going to get only 1 line box, then a class B break point should occur between the '6' and the '7' so that there is a minimum of 3 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: 3;
}

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><br><br>7<br>8<br>9</div>

<!-- Same as div#test except 2 extra br here ^ -->