mirror of
https://github.com/servo/servo.git
synced 2025-08-11 08:25:32 +01:00
Update web-platform-tests to revision 431d16dc58b4e276add7d569cce302d8d246b299
This commit is contained in:
WPT Sync Bot
parent
ed89361811
commit
fa3a407699
144 changed files with 2039 additions and 755 deletions
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 ^ -->
|
||||
|
|
@ -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-009-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 '7' and the '8' so that there is a minimum of 2 line boxes at the top of the 3rd column box. In doing so, the 'orphans: 2' declaration is still honored.">
|
||||
|
||||
<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: 2;
|
||||
widows: 2;
|
||||
}
|
||||
|
||||
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 ^ -->
|
||||
|
|
@ -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-010-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: 2;
|
||||
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 ^ -->
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!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-011-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 2 line boxes, then a class B break point should occur between '8' and the '9' so that there is a minimum of 6 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: 156px; /* Therefore, exactly 6 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: 2;
|
||||
widows: 6;
|
||||
}
|
||||
|
||||
div#reference
|
||||
{
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the numbers 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<br>10<br>11<br>12<br>13<br>14</div>
|
||||
|
||||
<div id="reference">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>
|
||||
<!-- Same as div#test except 4 extra br here ^ -->
|
||||
|
|
@ -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-012-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 3 line boxes, then a class B break point should occur between the '12' and the '13' so that there is a minimum of 7 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: 208px; /* Therefore, exactly 8 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: 3;
|
||||
widows: 7;
|
||||
}
|
||||
|
||||
div#reference
|
||||
{
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the numbers 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<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19</div>
|
||||
|
||||
<div id="reference">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>
|
||||
|
||||
<!-- Same as div#test except 4 extra br here ^ -->
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!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-013-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 '15' and the '16' so that there is a minimum of 4 line boxes at the top of the 3rd column box. In doing so, the 'orphans: 6' declaration is still honored.">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
border: orange solid 4px;
|
||||
font-size: 20px;
|
||||
line-height: 1.3; /* computes to 26px */
|
||||
height: 234px; /* Therefore, exactly 9 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: 6;
|
||||
widows: 4;
|
||||
}
|
||||
|
||||
div#reference
|
||||
{
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the numbers 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<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19</div>
|
||||
|
||||
<div id="reference">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>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!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-014-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 '7' and the '8' so that there is a minimum of 3 line boxes at the top of the 3rd column box. In doing so, the 'orphans: 7' declaration is still honored.">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
border: orange solid 4px;
|
||||
font-size: 20px;
|
||||
line-height: 1.3; /* computes to 26px */
|
||||
height: 234px; /* Therefore, exactly 9 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: 7;
|
||||
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<br>0</div>
|
||||
|
||||
<div id="reference">1<br>2<br>3<br>4<br>5<br>6<br>7<br><br><br>8<br>9<br>0</div>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!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="flags" content="">
|
||||
<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 ^ -->
|
||||
|
|
@ -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-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="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 '7' and the '8' so that there is a minimum of 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: 2;
|
||||
}
|
||||
|
||||
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 ^ -->
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Fragmentation level 3 Test: 'orphans', 'widows' and auto-height multicolumn container with 'column-fill: auto'</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-017-ref.html">
|
||||
|
||||
<!--
|
||||
Date created: November 26th 2020
|
||||
Last modified: December 6th 2020
|
||||
-->
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="If a multi-column container fills column boxes sequentially and its 'height' is 'auto', then soft breaks are inoperative since content can not overflow the fragmentainer. Therefore, in this test, the 'orphans' and 'widows' requirements can not be honored.">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
border: orange solid 4px;
|
||||
font-size: 20px;
|
||||
line-height: 1.3; /* computes to 26px */
|
||||
margin-bottom: 1em;
|
||||
padding: 0.5em; /* computes to 10px */
|
||||
width: 460px;
|
||||
}
|
||||
|
||||
div#test
|
||||
{
|
||||
height: auto;
|
||||
|
||||
columns: 4 auto;
|
||||
column-fill: auto;
|
||||
column-gap: 1em; /* computes to 20px */
|
||||
column-rule: blue solid 4px;
|
||||
|
||||
orphans: 1;
|
||||
widows: 2;
|
||||
}
|
||||
|
||||
div#reference
|
||||
{
|
||||
height: 182px;
|
||||
}
|
||||
</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</div>
|
||||
|
||||
<div id="reference">1<br>2<br>3<br>4<br>5<br>6<br>7</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue