summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/selectors/first-line-bidi-002-ref.html
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/selectors/first-line-bidi-002-ref.html')
-rw-r--r--testing/web-platform/tests/css/selectors/first-line-bidi-002-ref.html99
1 files changed, 99 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/selectors/first-line-bidi-002-ref.html b/testing/web-platform/tests/css/selectors/first-line-bidi-002-ref.html
new file mode 100644
index 0000000000..737ef1ec21
--- /dev/null
+++ b/testing/web-platform/tests/css/selectors/first-line-bidi-002-ref.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Reference for ::first-line selector with bidi content</title>
+<style>
+body { font: 12px arial, sans-serif; }
+table { font-size: 10px; }
+tr td { margin: 1em 1em; border: 1px solid gray; width: 16em; }
+td:nth-child(1) { text-align: left; }
+td:nth-child(2) { text-align: center; }
+td:nth-child(3) { text-align: right; }
+span.first { color: green; background: pink; }
+th { padding: 1em; }
+td { padding: 2px; }
+td p { margin: 0; }
+xl { float: left; font-size: 2.5em; }
+xr { float: right; font-size: 2.5em; }
+</style>
+<p>In each box, the first-line text should be <span style="color:green; background:pink">green on pink</span>
+and should never project outside the box:</p>
+<table>
+<tr><th><code>text-align:left</code></th><th><code>text-align:center</code></th><th><code>text-align:right</code></th></tr>
+<tr>
+ <!-- no padding/indent -->
+ <td>
+ <p dir=rtl><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p>
+ </td>
+ <td>
+ <p dir=rtl><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p>
+ </td>
+ <td>
+ <p dir=rtl><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p>
+ </td>
+</tr>
+
+<tr>
+ <!-- padding-left:1em -->
+ <td>
+ <p dir=rtl style="padding-left:1em"><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p>
+ </td>
+ <td>
+ <p dir=rtl style="padding-left:1em"><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p>
+ </td>
+ <td>
+ <p dir=rtl style="padding-left:1em"><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p>
+ </td>
+</tr>
+
+<tr>
+ <!-- padding-right:1em -->
+ <td>
+ <p dir=rtl style="padding-right:1em"><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p>
+ </td>
+ <td>
+ <p dir=rtl style="padding-right:1em"><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p>
+ </td>
+ <td>
+ <p dir=rtl style="padding-right:1em"><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p>
+ </td>
+</tr>
+
+<tr>
+ <!-- text-indent:2em -->
+ <td>
+ <p dir=rtl style="text-indent:2em"><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p>
+ </td>
+ <td>
+ <p dir=rtl style="text-indent:2em"><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p>
+ </td>
+ <td>
+ <p dir=rtl style="text-indent:2em"><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p>
+ </td>
+</tr>
+
+<tr>
+ <!-- initial with float:left -->
+ <td>
+ <p dir=rtl><xl>A</xl><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p>
+ </td>
+ <td>
+ <p dir=rtl><xl>A</xl><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p>
+ </td>
+ <td>
+ <p dir=rtl><xl>A</xl><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p>
+ </td>
+</tr>
+
+<tr>
+ <!-- initial with float:right -->
+ <td>
+ <p dir=rtl><xr>Z</xr><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p>
+ </td>
+ <td>
+ <p dir=rtl><xr>Z</xr><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p>
+ </td>
+ <td>
+ <p dir=rtl><xr>Z</xr><span class=first><span dir=rtl>الخت العربي</span> one ايك two</span><br> دو three تين four</p>
+ </td>
+</tr>
+</table>