This repository has been archived by the owner on Dec 18, 2018. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[css-writing-modes-3] 4 new caption-side tests
- Loading branch information
Gérard Talbot
committed
Sep 11, 2015
1 parent
1ed1e86
commit 8213166
Showing
4 changed files
with
249 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | ||
|
|
||
| <html xmlns="http://www.w3.org/1999/xhtml"> | ||
|
|
||
| <head> | ||
|
|
||
| <title>CSS Writing Modes Test: 'caption-side: top' and vertical-lr</title> | ||
|
|
||
| <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> | ||
| <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-direction-layout" title="7.4. Flow-Relative Mappings" /> | ||
| <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" /> | ||
|
|
||
| <meta content="ahem image" name="flags" /> | ||
| <meta content="This test checks that when 'caption-side' is set to 'top' in a vertical-lr table, then the caption is placed at the block-start side of the table, which is on the lefthand side of such table." name="assert" /> | ||
|
|
||
| <style type="text/css"><![CDATA[ | ||
| table#test-overlapping-green | ||
| { | ||
| border-spacing: 0px; | ||
| caption-side: top; | ||
| font: 50px/1 Ahem; /* computes to 50px/50px */ | ||
| writing-mode: vertical-lr; | ||
| } | ||
|
|
||
| caption | ||
| { | ||
| color: green; | ||
| } | ||
|
|
||
| td | ||
| { | ||
| color: transparent; | ||
| padding: 0px; | ||
| } | ||
|
|
||
| div#reference-overlapped-red | ||
| { | ||
| background: url("support/pattern-rg-rg-100x100.png") no-repeat; | ||
| bottom: 100px; | ||
| height: 100px; | ||
| position: relative; | ||
| width: 100px; | ||
| z-index: -1; | ||
| } | ||
| ]]></style> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
|
|
||
| <table id="test-overlapping-green"> | ||
| <caption>CA</caption> | ||
| <tr> | ||
| <td>T</td><td>D</td> | ||
| </tr> | ||
| </table> | ||
|
|
||
| <div id="reference-overlapped-red"></div> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | ||
|
|
||
| <html xmlns="http://www.w3.org/1999/xhtml"> | ||
|
|
||
| <head> | ||
|
|
||
| <title>CSS Writing Modes Test: 'caption-side: bottom' and vertical-lr</title> | ||
|
|
||
| <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> | ||
| <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-direction-layout" title="7.4. Flow-Relative Mappings" /> | ||
| <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" /> | ||
|
|
||
| <meta content="ahem image" name="flags" /> | ||
| <meta content="This test checks that when 'caption-side' is set to 'bottom' in a vertical-lr table, then the caption is placed at the block-end side of the table, which is on the righthand side of such table." name="assert" /> | ||
|
|
||
| <style type="text/css"><![CDATA[ | ||
| div#reference-overlapped-red | ||
| { | ||
| background: url("support/pattern-gr-gr-100x100.png") no-repeat; | ||
| height: 100px; | ||
| position: absolute; | ||
| width: 100px; | ||
| z-index: -1; | ||
| } | ||
|
|
||
| table#test-overlapping-green | ||
| { | ||
| border-spacing: 0px; | ||
| caption-side: bottom; | ||
| font: 50px/1 Ahem; /* computes to 50px/50px */ | ||
| writing-mode: vertical-lr; | ||
| } | ||
|
|
||
| caption | ||
| { | ||
| color: green; | ||
| } | ||
|
|
||
| td | ||
| { | ||
| color: transparent; | ||
| padding: 0px; | ||
| } | ||
| ]]></style> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
|
|
||
| <div id="reference-overlapped-red"></div> | ||
|
|
||
| <table id="test-overlapping-green"> | ||
| <caption>CA</caption> | ||
| <tr> | ||
| <td>T</td><td>D</td> | ||
| </tr> | ||
| </table> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | ||
|
|
||
| <html xmlns="http://www.w3.org/1999/xhtml"> | ||
|
|
||
| <head> | ||
|
|
||
| <title>CSS Writing Modes Test: 'caption-side: top' and vertical-rl</title> | ||
|
|
||
| <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> | ||
| <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-direction-layout" title="7.4. Flow-Relative Mappings" /> | ||
| <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" /> | ||
|
|
||
| <meta content="ahem image" name="flags" /> | ||
| <meta content="This test checks that when 'caption-side' is set to 'top' in a vertical-rl table, then the caption is placed at the block-start side of the table, which is on the righthand side of such table." name="assert" /> | ||
|
|
||
| <style type="text/css"><![CDATA[ | ||
| div#reference-overlapped-red | ||
| { | ||
| background: url("support/pattern-gr-gr-100x100.png") no-repeat; | ||
| height: 100px; | ||
| position: absolute; | ||
| width: 100px; | ||
| z-index: -1; | ||
| } | ||
|
|
||
| table#test-overlapping-green | ||
| { | ||
| border-spacing: 0px; | ||
| caption-side: top; | ||
| font: 50px/1 Ahem; /* computes to 50px/50px */ | ||
| writing-mode: vertical-rl; | ||
| } | ||
|
|
||
| caption | ||
| { | ||
| color: green; | ||
| } | ||
|
|
||
| td | ||
| { | ||
| color: transparent; | ||
| padding: 0px; | ||
| } | ||
| ]]></style> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
|
|
||
| <div id="reference-overlapped-red"></div> | ||
|
|
||
| <table id="test-overlapping-green"> | ||
| <caption>CA</caption> | ||
| <tr> | ||
| <td>T</td><td>D</td> | ||
| </tr> | ||
| </table> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | ||
|
|
||
| <html xmlns="http://www.w3.org/1999/xhtml"> | ||
|
|
||
| <head> | ||
|
|
||
| <title>CSS Writing Modes Test: 'caption-side: bottom' and vertical-rl</title> | ||
|
|
||
| <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> | ||
| <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-direction-layout" title="7.4. Flow-Relative Mappings" /> | ||
| <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" /> | ||
|
|
||
| <meta content="ahem image" name="flags" /> | ||
| <meta content="This test checks that when 'caption-side' is set to 'bottom' in a vertical-rl table, then the caption is placed at the block-end side of the table, which is on the lefthand side of such table." name="assert" /> | ||
|
|
||
| <style type="text/css"><![CDATA[ | ||
| div#reference-overlapped-red | ||
| { | ||
| background: url("support/pattern-rg-rg-100x100.png") no-repeat; | ||
| height: 100px; | ||
| position: absolute; | ||
| width: 100px; | ||
| z-index: -1; | ||
| } | ||
|
|
||
| table#test-overlapping-green | ||
| { | ||
| border-spacing: 0px; | ||
| caption-side: bottom; | ||
| font: 50px/1 Ahem; /* computes to 50px/50px */ | ||
| writing-mode: vertical-rl; | ||
| } | ||
|
|
||
| caption | ||
| { | ||
| color: green; | ||
| } | ||
|
|
||
| td | ||
| { | ||
| color: transparent; | ||
| padding: 0px; | ||
| } | ||
| ]]></style> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
|
|
||
| <div id="reference-overlapped-red"></div> | ||
|
|
||
| <table id="test-overlapping-green"> | ||
| <caption>CA</caption> | ||
| <tr> | ||
| <td>T</td><td>D</td> | ||
| </tr> | ||
| </table> | ||
|
|
||
| </body> | ||
| </html> |