Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-06-24 09:04:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update CSS tests to revision 7a87ef71fc579e52d3438e009107aa442bc4021b

Browse source
This commit is contained in:
Ms2ger 2015-10-06 12:33:05 +02:00
parent ad94ef5a96
commit 145aea3eeb
1196 changed files with 14344 additions and 6221 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
tests/wpt/css-tests/css-text-3_dev/html/reference/support/adobe-fonts/CSSHWOrientationTest.otf
View file

Binary file not shown.

17
tests/wpt/css-tests/css-text-3_dev/html/reference/support/adobe-fonts/README.md
View file

@ -3,7 +3,8 @@ CSS Orientation Test
Overview
----
CSS Orientation Test are special-purpose OpenType fonts. This open source project provides all of the source files that were used to build these OpenType fonts by using the AFDKO *makeotf* tool.
CSS Orientation Test are special-purpose OpenType fonts. This open source project provides all of the source files
that were used to build these OpenType fonts by using the AFDKO *makeotf* tool.
Getting Involved
----
@ -14,20 +15,26 @@ Building
Pre-built font binaries
----
The installable font resources (font binaries) are not part of the source files. They are available on [Open@Adobe](https://sourceforge.net/projects/csso9ntestfonts.adobe/files/).
The installable font resources (font binaries) are not part of the source files.
They are available at https://github.com/adobe-fonts/css-orientation-test/
The latest version of the font binaries is 1.005 (October 2015).
Requirements
----
For building binary font files from source, installation of the [Adobe Font Development Kit for OpenType](http://www.adobe.com/devnet/opentype/afdko.html) (AFDKO) is necessary. The AFDKO tools are widely used for font development today, and are part of most font editor applications.
For building binary font files from source, installation of the
[Adobe Font Development Kit for OpenType](http://www.adobe.com/devnet/opentype/afdko.html) (AFDKO)
is necessary. The AFDKO tools are widely used for font development today, and are part of most font editor applications.
Building the fonts
----
The key to building OpenType fonts is *makeotf*, which is part of AFDKO. Information and usage instructions can be found by executing *makeotf -h*.
The key to building OpenType fonts is *makeotf*, which is part of AFDKO. Information and usage instructions can be found
by executing *makeotf -h*.
In this repository, all necessary files are in place for building the OpenType fonts. For example, build a binary OTF font for the full-width version like this, which also includes a post-process for inserting a "stub" 'DSIG' table:
In this repository, all necessary files are in place for building the OpenType fonts. For example, build a binary OTF font
for the full-width version like this, which also includes a post-process for inserting a "stub" 'DSIG' table:
% makeotf -f cidfont.ps -r -ch UnicodeAll-UTF32-H
% sfntedit -a DSIG=DSIG.bin CSSFWOrientationTest.otf

17
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-end-ref-001.htm Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: end, direction: rtl</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 24px; }
#rb1 { position: absolute; top: 0; left: 0; background-color: orange; width: 120px; height: 24px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes looks the same.</div>
<div class="ref"><div id="rb1"></div></div>
<div class="ref"><div id="rb1"></div></div>
</body></html>

19
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-end-ref-002.htm Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: end, direction: ltr</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 24px; }
#rb1 { position: absolute; top: 0; right: 0; background-color: orange; width: 120px; height: 24px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes looks the same.</div>
<div style="direction: rtl;">
<div class="ref"><div id="rb1"></div></div>
<div class="ref"><div id="rb1"></div></div>
</div>
</body></html>

17
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-end-ref-003.htm Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: end, dir=rtl</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 24px; }
#rb1 { position: absolute; top: 0; left: 0; background-color: orange; width: 120px; height: 24px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes is identical.</div>
<div class="ref"><div id="rb1"></div></div>
<div class="ref"><div id="rb1"></div></div>
</body></html>

19
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-end-ref-004.htm Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: end, dir=ltr</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 24px; }
#rb1 { position: absolute; top: 0; right: 0; background-color: orange; width: 120px; height: 24px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes is identical.</div>
<div dir="rtl">
<div class="ref"><div id="rb1"></div></div>
<div class="ref"><div id="rb1"></div></div>
</div>
</body></html>

19
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-end-ref-005.htm Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: end, direction: rtl</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 290px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 72px; }
.rb1 { position: absolute; top: 0; left: 0; background-color: orange; width: 72px; height: 72px; }
.rb2 { position: absolute; top: 0; left: 96px; background-color: orange; width: 72px; height: 72px; }
.rb3 { position: absolute; top: 0; left: 192px; background-color: orange; width: 72px; height: 48px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes looks the same.</div>
<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
</body></html>

21
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-end-ref-006.htm Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: end, direction: ltr</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 290px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 72px; }
.rb1 { position: absolute; top: 0; right: 0; background-color: orange; width: 72px; height: 72px; }
.rb2 { position: absolute; top: 0; right: 96px; background-color: orange; width: 72px; height: 72px; }
.rb3 { position: absolute; top: 0; right: 192px; background-color: orange; width: 72px; height: 48px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes is identical.</div>
<div style="direction: rtl;">
<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
</div>
</body></html>

19
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-end-ref-007.htm Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: end, dir=rtl</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 290px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 72px; }
.rb1 { position: absolute; top: 0; left: 0; background-color: orange; width: 72px; height: 72px; }
.rb2 { position: absolute; top: 0; left: 96px; background-color: orange; width: 72px; height: 72px; }
.rb3 { position: absolute; top: 0; left: 192px; background-color: orange; width: 72px; height: 48px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes looks the same.</div>
<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
</body></html>

21
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-end-ref-008.htm Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: end, dir=ltr</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 290px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 72px; }
.rb1 { position: absolute; top: 0; right: 0; background-color: orange; width: 72px; height: 72px; }
.rb2 { position: absolute; top: 0; right: 96px; background-color: orange; width: 72px; height: 72px; }
.rb3 { position: absolute; top: 0; right: 192px; background-color: orange; width: 72px; height: 48px; }
</style>
</head>
<body>
<div id="instructions">Test passes if shading in both orange boxes is identical.</div>
<div dir="rtl">
<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
</div>
</body></html>

19
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-end-ref-009.htm Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: end, dir=auto, RTL first strong</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 290px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 72px; }
.rb1 { position: absolute; top: 0; left: 0; background-color: orange; width: 72px; height: 72px; }
.rb2 { position: absolute; top: 0; left: 96px; background-color: orange; width: 72px; height: 72px; }
.rb3 { position: absolute; top: 0; left: 192px; background-color: orange; width: 72px; height: 48px; }
</style>
</head>
<body>
<div id="instructions">Test passes if shading in both orange boxes is identical.</div>
<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
</body></html>

21
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-end-ref-010.htm Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: end, dir=auto, LTR first strong</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 290px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 72px; }
.rb1 { position: absolute; top: 0; right: 0; background-color: orange; width: 72px; height: 72px; }
.rb2 { position: absolute; top: 0; right: 96px; background-color: orange; width: 72px; height: 72px; }
.rb3 { position: absolute; top: 0; right: 192px; background-color: orange; width: 72px; height: 48px; }
</style>
</head>
<body>
<div id="instructions">Test passes if shading in both orange boxes is identical.</div>
<div dir="rtl">
<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
</div>
</body></html>

19
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-end-ref-014.htm Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: end, pre, dir=rtl inherited</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 290px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 48px; }
#rb1 { position: absolute; top: 0; left: 0; background-color: orange; width: 72px; height: 48px; }
</style>
</head>
<body>
<div id="instructions">Test passes if shading in both orange boxes is identical.</div>
<div dir="rtl">
<div class="ref"><div id="rb1"></div></div>
<div class="ref"><div id="rb1"></div></div>
</div>
</body></html>

17
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-end-ref-015.htm Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: end, pre, dir=ltr inherited</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 290px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 48px; }
#rb1 { position: absolute; top: 0; right: 0; background-color: orange; width: 72px; height: 48px; }
</style>
</head>
<body>
<div id="instructions">Test passes if shading in both orange boxes is identical.</div>
<div class="ref"><div id="rb1"></div></div>
<div class="ref"><div id="rb1"></div></div>
</body></html>

18
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-end-ref-016.htm Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: end, pre, dir=auto</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 290px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 48px; }
.rb1 { position: absolute; top: 0; right: 0; background-color: orange; width: 72px; height: 24px; }
.rb2 { position: absolute; bottom: 0; left: 0; background-color: orange; width: 72px; height: 24px; }
</style>
</head>
<body>
<div id="instructions">Test passes if shading in both orange boxes is identical.</div>
<div class="ref"><div class="rb1"></div><div class="rb2"></div></div>
<div class="ref"><div class="rb1"></div><div class="rb2"></div></div>
</body></html>

17
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-end-ref-017.htm Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: end, pre, dir=auto on surrounding block</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 290px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 48px; }
#rb1 { position: absolute; top: 0; right: 0; background-color: orange; width: 72px; height: 48px; }
</style>
</head>
<body>
<div id="instructions">Test passes if shading in both orange boxes is identical.</div>
<div class="ref"><div id="rb1"></div></div>
<div class="ref"><div id="rb1"></div></div>
</body></html>

23
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-justify-ref-001.htm Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: justify, direction: rtl</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
.rb1 { top: 0; left: 0; height: 48px; }
.rb2 { top: 0; left: 109px; height: 48px; }
.rb3 { top: 0; left: 218px; height: 48px; }
.rb4 { top: 0; left: 327px; height: 72px; }
.rb5 { top: 48px; right: 96px; height: 24px; }
.rb6 { top: 48px; right: 192px; height: 24px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes is the same.</div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
</body></html>

25
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-justify-ref-002.htm Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: justify, direction: ltr</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
.rb1 { top: 0; right: 0; height: 48px; }
.rb2 { top: 0; right: 109px; height: 48px; }
.rb3 { top: 0; right: 218px; height: 48px; }
.rb4 { top: 0; right: 327px; height: 72px; }
.rb5 { top: 48px; left: 96px; height: 24px; }
.rb6 { top: 48px; left: 192px; height: 24px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes is identical.</div>
<div style="direction: rtl;">
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
</div>
</body></html>

23
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-justify-ref-003.htm Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: justify, dir=rtl</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
.rb1 { top: 0; left: 0; height: 48px; }
.rb2 { top: 0; left: 109px; height: 48px; }
.rb3 { top: 0; left: 218px; height: 48px; }
.rb4 { top: 0; left: 327px; height: 72px; }
.rb5 { top: 48px; right: 96px; height: 24px; }
.rb6 { top: 48px; right: 192px; height: 24px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes is the same.</div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
</body></html>

25
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-justify-ref-004.htm Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: justify, dir=ltr</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
.rb1 { top: 0; right: 0; height: 48px; }
.rb2 { top: 0; right: 109px; height: 48px; }
.rb3 { top: 0; right: 218px; height: 48px; }
.rb4 { top: 0; right: 327px; height: 72px; }
.rb5 { top: 48px; left: 96px; height: 24px; }
.rb6 { top: 48px; left: 192px; height: 24px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes is identical.</div>
<div dir="rtl">
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
</div>
</body></html>

23
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-justify-ref-005.htm Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: justify, dir=auto, RTL first strong</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
.rb1 { top: 0; left: 0; height: 48px; }
.rb2 { top: 0; left: 109px; height: 48px; }
.rb3 { top: 0; left: 218px; height: 48px; }
.rb4 { top: 0; left: 327px; height: 72px; }
.rb5 { top: 48px; right: 96px; height: 24px; }
.rb6 { top: 48px; right: 192px; height: 24px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes is the same.</div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
</body></html>

25
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-justify-ref-006.htm Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: justify, dir=auto, LTR first strong</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
.rb1 { top: 0; right: 0; height: 48px; }
.rb2 { top: 0; right: 109px; height: 48px; }
.rb3 { top: 0; right: 218px; height: 48px; }
.rb4 { top: 0; right: 327px; height: 72px; }
.rb5 { top: 48px; left: 96px; height: 24px; }
.rb6 { top: 48px; left: 192px; height: 24px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes is the same.</div>
<div dir="rtl">
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
</div>
</body></html>

23
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-justifyall-ref-001.htm Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: justify-all, direction: rtl</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
.rb1 { top: 0; left: 0; height: 48px; }
.rb2 { top: 0; left: 109px; height: 48px; }
.rb3 { top: 0; left: 218px; height: 48px; }
.rb4 { top: 0; left: 327px; height: 72px; }
.rb5 { top: 48px; right: 96px; height: 24px; }
.rb6 { top: 48px; right: 192px; height: 24px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes is the same.</div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
</body></html>

25
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-justifyall-ref-002.htm Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: justify-all, direction: ltr</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
.rb1 { top: 0; right: 0; height: 48px; }
.rb2 { top: 0; right: 109px; height: 48px; }
.rb3 { top: 0; right: 218px; height: 48px; }
.rb4 { top: 0; right: 327px; height: 72px; }
.rb5 { top: 48px; left: 96px; height: 24px; }
.rb6 { top: 48px; left: 192px; height: 24px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes is identical.</div>
<div style="direction: rtl;">
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
</div>
</body></html>

23
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-justifyall-ref-003.htm Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: justify-all, dir=rtl</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
.rb1 { top: 0; left: 0; height: 48px; }
.rb2 { top: 0; left: 109px; height: 48px; }
.rb3 { top: 0; left: 218px; height: 48px; }
.rb4 { top: 0; left: 327px; height: 72px; }
.rb5 { top: 48px; right: 96px; height: 24px; }
.rb6 { top: 48px; right: 192px; height: 24px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes is the same.</div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
</body></html>

25
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-justifyall-ref-004.htm Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: justify-all, dir=ltr</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
.rb1 { top: 0; right: 0; height: 48px; }
.rb2 { top: 0; right: 109px; height: 48px; }
.rb3 { top: 0; right: 218px; height: 48px; }
.rb4 { top: 0; right: 327px; height: 72px; }
.rb5 { top: 48px; left: 96px; height: 24px; }
.rb6 { top: 48px; left: 192px; height: 24px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes is identical.</div>
<div dir="rtl">
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
</div>
</body></html>

23
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-justifyall-ref-005.htm Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: justify-all, dir=auto, RTL first strong</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
.rb1 { top: 0; left: 0; height: 48px; }
.rb2 { top: 0; left: 109px; height: 48px; }
.rb3 { top: 0; left: 218px; height: 48px; }
.rb4 { top: 0; left: 327px; height: 72px; }
.rb5 { top: 48px; right: 96px; height: 24px; }
.rb6 { top: 48px; right: 192px; height: 24px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes is the same.</div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
</body></html>

25
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-justifyall-ref-006.htm Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: justify-all, dir=auto, LTR first strong</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
.rb1 { top: 0; right: 0; height: 48px; }
.rb2 { top: 0; right: 109px; height: 48px; }
.rb3 { top: 0; right: 218px; height: 48px; }
.rb4 { top: 0; right: 327px; height: 72px; }
.rb5 { top: 48px; left: 96px; height: 24px; }
.rb6 { top: 48px; left: 192px; height: 24px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes is the same.</div>
<div dir="rtl">
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
</div>
</body></html>

19
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-start-ref-001.htm Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: start, direction: rtl</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test { text-align: start; direction: rtl; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 24px; }
#rb1 { position: absolute; top: 0; right: 0; background-color: orange; width: 120px; height: 24px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes looks the same.</div>
<div class="ref"><div id="rb1"></div></div>
<div class="ref"><div id="rb1"></div></div>
</body></html>

21
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-start-ref-002.htm Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: start, direction: ltr</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test { text-align: start; direction: ltr; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 24px; }
#rb1 { position: absolute; top: 0; left: 0; background-color: orange; width: 120px; height: 24px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes looks the same.</div>
<div style="direction: rtl;">
<div class="ref"><div id="rb1"></div></div>
<div class="ref"><div id="rb1"></div></div>
</div>
</body></html>

19
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-start-ref-003.htm Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: start, dir=rtl</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test { text-align: start; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 24px; }
#rb1 { position: absolute; top: 0; right: 0; background-color: orange; width: 120px; height: 24px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes is identical.</div>
<div class="ref"><div id="rb1"></div></div>
<div class="ref"><div id="rb1"></div></div>
</body></html>

21
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-start-ref-004.htm Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: start, dir=ltr</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test { text-align: start; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 24px; }
#rb1 { position: absolute; top: 0; left: 0; background-color: orange; width: 120px; height: 24px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes is identical.</div>
<div dir="rtl">
<div class="ref"><div id="rb1"></div></div>
<div class="ref"><div id="rb1"></div></div>
</div>
</body></html>

21
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-start-ref-005.htm Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: start, direction: rtl</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test { text-align: start; direction: rtl; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 290px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 72px; }
.rb1 { position: absolute; top: 0; right: 0; background-color: orange; width: 72px; height: 72px; }
.rb2 { position: absolute; top: 0; right: 96px; background-color: orange; width: 72px; height: 72px; }
.rb3 { position: absolute; top: 0; right: 192px; background-color: orange; width: 72px; height: 48px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes looks the same.</div>
<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
</body></html>

23
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-start-ref-006.htm Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: start, direction: ltr</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test { text-align: start; direction: ltr; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 290px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 72px; }
.rb1 { position: absolute; top: 0; left: 0; background-color: orange; width: 72px; height: 72px; }
.rb2 { position: absolute; top: 0; left: 96px; background-color: orange; width: 72px; height: 72px; }
.rb3 { position: absolute; top: 0; left: 192px; background-color: orange; width: 72px; height: 48px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes is identical.</div>
<div style="direction: rtl;">
<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
</div>
</body></html>

21
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-start-ref-007.htm Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: start, dir=rtl</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test { text-align: start; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 290px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 72px; }
.rb1 { position: absolute; top: 0; right: 0; background-color: orange; width: 72px; height: 72px; }
.rb2 { position: absolute; top: 0; right: 96px; background-color: orange; width: 72px; height: 72px; }
.rb3 { position: absolute; top: 0; right: 192px; background-color: orange; width: 72px; height: 48px; }
</style>
</head>
<body>
<div id="instructions">Test passes if the shading in both orange boxes looks the same.</div>
<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
</body></html>

23
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-start-ref-008.htm Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: start, dir=ltr</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test { text-align: start; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 290px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 72px; }
.rb1 { position: absolute; top: 0; left: 0; background-color: orange; width: 72px; height: 72px; }
.rb2 { position: absolute; top: 0; left: 96px; background-color: orange; width: 72px; height: 72px; }
.rb3 { position: absolute; top: 0; left: 192px; background-color: orange; width: 72px; height: 48px; }
</style>
</head>
<body>
<div id="instructions">Test passes if shading in both orange boxes is identical.</div>
<div dir="rtl">
<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
</div>
</body></html>

21
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-start-ref-009.htm Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: start, dir=auto, RTL first strong</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test { text-align: start; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 290px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 72px; }
.rb1 { position: absolute; top: 0; right: 0; background-color: orange; width: 72px; height: 72px; }
.rb2 { position: absolute; top: 0; right: 96px; background-color: orange; width: 72px; height: 72px; }
.rb3 { position: absolute; top: 0; right: 192px; background-color: orange; width: 72px; height: 48px; }
</style>
</head>
<body>
<div id="instructions">Test passes if shading in both orange boxes is identical.</div>
<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
</body></html>

23
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-start-ref-010.htm Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: start, dir=auto, LTR first strong</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test { text-align: start; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 290px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 72px; }
.rb1 { position: absolute; top: 0; left: 0; background-color: orange; width: 72px; height: 72px; }
.rb2 { position: absolute; top: 0; left: 96px; background-color: orange; width: 72px; height: 72px; }
.rb3 { position: absolute; top: 0; left: 192px; background-color: orange; width: 72px; height: 48px; }
</style>
</head>
<body>
<div id="instructions">Test passes if shading in both orange boxes is identical.</div>
<div dir="rtl">
<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
</div>
</body></html>

21
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-start-ref-014.htm Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: start, pre, dir=rtl inherited</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test { text-align: start; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 290px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 48px; }
#rb1 { position: absolute; top: 0; right: 0; background-color: orange; width: 72px; height: 48px; }
</style>
</head>
<body>
<div id="instructions">Test passes if shading in both orange boxes is identical.</div>
<div dir="rtl">
<div class="ref"><div id="rb1"></div></div>
<div class="ref"><div id="rb1"></div></div>
</div>
</body></html>

21
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-start-ref-015.htm Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: start, pre, dir=ltr inherited</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test { text-align: start; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 290px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 48px; }
#rb1 { position: absolute; top: 0; left: 0; background-color: orange; width: 72px; height: 48px; }
</style>
</head>
<body>
<div id="instructions">Test passes if shading in both orange boxes is identical.</div>
<div dir="ltr">
<div class="ref"><div id="rb1"></div></div>
<div class="ref"><div id="rb1"></div></div>
</div>
</body></html>

20
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-start-ref-016.htm Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: start, pre, dir=auto</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test { text-align: start; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 290px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 48px; }
.rb1 { position: absolute; top: 0; left: 0; background-color: orange; width: 72px; height: 24px; }
.rb2 { position: absolute; bottom: 0; right: 0; background-color: orange; width: 72px; height: 24px; }
</style>
</head>
<body>
<div id="instructions">Test passes if shading in both orange boxes is identical.</div>
<div class="ref"><div class="rb1"></div><div class="rb2"></div></div>
<div class="ref"><div class="rb1"></div><div class="rb2"></div></div>
</body></html>

19
tests/wpt/css-tests/css-text-3_dev/html/reference/text-align-start-ref-017.htm Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>text-align: start, pre, dir=auto on surrounding block</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
<style type="text/css">
.test { text-align: start; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 290px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 48px; }
#rb1 { position: absolute; top: 0; left: 0; background-color: orange; width: 72px; height: 48px; }
</style>
</head>
<body>
<div id="instructions">Test passes if shading in both orange boxes is identical.</div>
<div class="ref"><div id="rb1"></div></div>
<div class="ref"><div id="rb1"></div></div>
</body></html>