Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'

This commit is contained in:
WPT Sync Bot 2022-11-10 01:22:36 +00:00
parent ace9b32b1c
commit df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions

View file

@ -1,25 +1,25 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: justify, direction: rtl</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.ref { border: 1px solid orange; margin: 20px; width: 450px; color: orange; font: 25px/1 Ahem; }
</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>
<div class="ref">
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="text-align: right;">REF REF REF</div>
</div>
<div class="ref">
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="text-align: right;">REF REF REF</div>
</div>
</body>
</html>
</html>

View file

@ -1,27 +1,27 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: justify, direction: ltr</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.ref { border: 1px solid orange; margin: 20px; width: 450px; color: orange; font: 25px/1 Ahem; }
</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 class="ref">
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="text-align: left;">REF REF REF</div>
</div>
<div class="ref">
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="text-align: left;">REF REF REF</div>
</div>
</div>
</body>
</html>
</html>

View file

@ -1,25 +1,25 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: justify, dir=rtl</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.ref { border: 1px solid orange; margin: 20px; width: 450px; color: orange; font: 25px/1 Ahem; }
</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>
<div class="ref">
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="text-align: right;">REF REF REF</div>
</div>
<div class="ref">
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="text-align: right;">REF REF REF</div>
</div>
</body>
</html>
</html>

View file

@ -1,27 +1,27 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: justify, dir=ltr</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.ref { border: 1px solid orange; margin: 20px; width: 450px; color: orange; font: 25px/1 Ahem; }
</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 class="ref">
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="text-align: left;">REF REF REF</div>
</div>
<div class="ref">
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="text-align: left;">REF REF REF</div>
</div>
</div>
</body>
</html>
</html>

View file

@ -1,25 +1,25 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: justify, dir=auto, RTL first strong</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.ref { border: 1px solid orange; margin: 20px; width: 450px; color: orange; font: 25px/1 Ahem; }
</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>
<div class="ref">
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="text-align: right;">REF REF REF</div>
</div>
<div class="ref">
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="text-align: right;">REF REF REF</div>
</div>
</body>
</html>
</html>

View file

@ -1,27 +1,27 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: justify, dir=auto, LTR first strong</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.ref { border: 1px solid orange; margin: 20px; width: 450px; color: orange; font: 25px/1 Ahem; }
</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 class="ref">
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="text-align: left;">REF REF REF</div>
</div>
<div class="ref">
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="text-align: left;">REF REF REF</div>
</div>
</div>
</body>
</html>
</html>

View file

@ -1,24 +1,18 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: justify-all, direction: rtl</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style type='text/css'>
.test, .ref { border: 1px solid orange; margin: 20px; width: 402px; 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: 72px; }
.rb2 { top: 0; left: 110px; height: 48px; }
.rb3 { top: 0; left: 220px; height: 48px; }
.rb4 { top: 0; left: 330px; height: 72px; }
.rb5 { top: 48px; left: 165px; height: 24px; }
.ref { border: 1px solid orange; margin: 20px; width: 510px; color: orange; font: 30px/1 Ahem; word-spacing: 20px; }
div.last-line { word-spacing: 90px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is identical.</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>
<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>
<div class="ref"><div>REF REF REF REF</div><div>REF REF REF REF</div><div class="last-line">REF REF REF </div></div>
<div class="ref"><div>REF REF REF REF</div><div>REF REF REF REF</div><div class="last-line">REF REF REF </div></div>
</body>
</html>

View file

@ -1,26 +1,20 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: justify-all, direction: ltr</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style type='text/css'>
.test, .ref { border: 1px solid orange; margin: 20px; width: 402px; 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: 72px; }
.rb2 { top: 0; right: 110px; height: 48px; }
.rb3 { top: 0; right: 220px; height: 48px; }
.rb4 { top: 0; right: 330px; height: 72px; }
.rb5 { top: 48px; left: 165px; height: 24px; }
.ref { border: 1px solid orange; margin: 20px; width: 510px; color: orange; font: 30px/1 Ahem; word-spacing: 20px; }
div.last-line { word-spacing: 90px; }
</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>
<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>
<div class="ref"><div>REF REF REF REF</div><div>REF REF REF REF</div><div class="last-line">REF REF REF </div></div>
<div class="ref"><div>REF REF REF REF</div><div>REF REF REF REF</div><div class="last-line">REF REF REF </div></div>
</div>
</body>
</html>

View file

@ -1,21 +1,17 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, direction: rtl</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: right; }
</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>
<div class="ref">REFER</div>
<div class="ref">REFER</div>
</body>
</html>
</html>

View file

@ -1,23 +1,19 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, direction: ltr</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: left; }
</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 class="ref">REFER</div>
<div class="ref">REFER</div>
</div>
</body>
</html>
</html>

View file

@ -1,21 +1,17 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, dir=rtl</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: right; }
</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>
<div class="ref">REFER</div>
<div class="ref">REFER</div>
</body>
</html>
</html>

View file

@ -1,23 +1,19 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, dir=ltr</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: left; }
</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 class="ref">REFER</div>
<div class="ref">REFER</div>
</div>
</body>
</html>
</html>

View file

@ -1,23 +1,17 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, direction: rtl</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: right; }
</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>
<div class="ref">REF REF REF REF REF REF REF REF</div>
<div class="ref">REF REF REF REF REF REF REF REF</div>
</body>
</html>
</html>

View file

@ -1,25 +1,19 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, direction: ltr</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: left; }
</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 class="ref">REF REF REF REF REF REF REF REF</div>
<div class="ref">REF REF REF REF REF REF REF REF</div>
</div>
</body>
</html>
</html>

View file

@ -1,23 +1,17 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, dir=rtl</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: right;}
</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>
<div class="ref">REF REF REF REF REF REF REF REF</div>
<div class="ref">REF REF REF REF REF REF REF REF</div>
</body>
</html>
</html>

View file

@ -1,25 +1,19 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, dir=ltr</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: left; }
</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 class="ref">REF REF REF REF REF REF REF REF</div>
<div class="ref">REF REF REF REF REF REF REF REF</div>
</div>
</body>
</html>
</html>

View file

@ -1,23 +1,17 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, dir=auto, RTL first strong</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: right; }
</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>
<div class="ref">REF REF REF REF REF REF REF REF</div>
<div class="ref">REF REF REF REF REF REF REF REF</div>
</body>
</html>
</html>

View file

@ -1,25 +1,19 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, dir=auto, LTR first strong</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: left; }
</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 class="ref">REF REF REF REF REF REF REF REF</div>
<div class="ref">REF REF REF REF REF REF REF REF</div>
</div>
</body>
</html>
</html>

View file

@ -1,23 +1,19 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, pre, dir=rtl inherited</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: right; }
</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 class="ref">REF<br>ERE</div>
<div class="ref">REF<br>ERE</div>
</div>
</body>
</html>
</html>

View file

@ -1,23 +1,19 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, pre, dir=ltr inherited</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: left; }
</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 class="ref">REF<br>ERE</div>
<div class="ref">REF<br>ERE</div>
</div>
</body>
</html>
</html>

View file

@ -1,22 +1,21 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, pre, dir=auto</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.ref1, .ref2 { border-left: 1px solid orange; border-right: 1px solid orange; margin-left: 20px; margin-right: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
.ref1 { border-top: 1px solid orange; margin-top: 20px; text-align: left; }
.ref2 { border-bottom: 1px solid orange; margin-bottom: 20px; text-align: right; }
</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>
<div class="ref1">REF</div>
<div class="ref2">ERE</div>
<div class="ref1">REF</div>
<div class="ref2">ERE</div>
</body>
</html>
</html>

View file

@ -1,21 +1,17 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, pre, dir=auto on surrounding block</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: left; }
</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>
<div class="ref">REF<br>ERE</div>
<div class="ref">REF<br>ERE</div>
</body>
</html>
</html>

View file

@ -5,7 +5,6 @@
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
<link rel="help" title="7.1. Text Alignment: the 'text-align' property" href="http://www.w3.org/TR/css-text-3/#text-align">
<link rel="match" href="text-align-006-ref.html">
<meta name="flags" content="">
<meta name="assert" content="The 'text-align' property set to 'start' on a block element aligns the text to the start edge.">
<style>
div {

View file

@ -5,7 +5,6 @@
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
<link rel="help" title="7.1. Text Alignment: the 'text-align' property" href="http://www.w3.org/TR/css-text-3/#text-align">
<link rel="match" href="text-align-007-ref.html">
<meta name="flags" content="">
<meta name="assert" content="The 'text-align' property set to 'end' on a block element aligns the text to the end edge.">
<style>
div {

View file

@ -5,7 +5,6 @@
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
<link rel="help" title="7.1. Text Alignment: the 'text-align' property" href="http://www.w3.org/TR/css-text-3/#text-align">
<link rel="match" href="text-align-007-ref.html">
<meta name="flags" content="">
<meta name="assert" content="The 'text-align' property set to 'match-parent' on a block element behaves the same as 'inherit'.">
<style>
body {

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="mismatch" href="text-align-center-last-start.html">
<link rel="mismatch" href="text-align-center-last-end.html">
<link rel="mismatch" href="text-align-center-last-justify.html">
<style>
p {
text-align: center;
text-align-last: center;
margin-right: 310px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
<p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="match" href="text-align-center-last-center.html">
<style>
p {
text-align: center;
margin-right: 310px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
<p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="mismatch" href="text-align-center-last-start.html">
<link rel="mismatch" href="text-align-center-last-center.html">
<link rel="mismatch" href="text-align-center-last-justify.html">
<style>
p {
text-align: center;
text-align-last: end;
margin-right: 310px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
<p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="mismatch" href="text-align-center-last-start.html">
<link rel="mismatch" href="text-align-center-last-end.html">
<link rel="mismatch" href="text-align-center-last-center.html">
<style>
p {
text-align: center;
text-align-last: justify;
margin-right: 310px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
<p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="mismatch" href="text-align-center-last-center.html">
<link rel="mismatch" href="text-align-center-last-end.html">
<link rel="mismatch" href="text-align-center-last-justify.html">
<style>
p {
text-align: center;
text-align-last: start;
margin-right: 310px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
<p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="match" href="text-align-start-last-start.html">
<style>
p {
text-align: start;
margin-right: 310px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
<p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="mismatch" href="text-align-end-last-start.html">
<link rel="mismatch" href="text-align-end-last-end.html">
<link rel="mismatch" href="text-align-end-last-justify.html">
<style>
p {
text-align: end;
text-align-last: center;
margin-right: 310px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
<p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="match" href="text-align-end-last-end.html">
<style>
p {
text-align: end;
margin-right: 310px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
<p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="mismatch" href="text-align-end-last-start.html">
<link rel="mismatch" href="text-align-end-last-center.html">
<link rel="mismatch" href="text-align-end-last-justify.html">
<style>
p {
text-align: end;
text-align-last: end;
margin-right: 310px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
<p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="mismatch" href="text-align-end-last-start.html">
<link rel="mismatch" href="text-align-end-last-end.html">
<link rel="mismatch" href="text-align-end-last-center.html">
<style>
p {
text-align: end;
text-align-last: justify;
margin-right: 310px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
<p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="mismatch" href="text-align-end-last-center.html">
<link rel="mismatch" href="text-align-end-last-end.html">
<link rel="mismatch" href="text-align-end-last-justify.html">
<style>
p {
text-align: end;
text-align-last: start;
margin-right: 310px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
<p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
</body>
</html>

View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<title>CSS Text: Don't crash with text-align-[last,all]:inline-end</title>
<link rel="help" href="https://drafts.csswg.org/css-text/#text-align-property">
<link rel="help" href="https://crbug.com/1313002">
<style>
div {
text-align: inline-end;
text-align-all: inline-end;
text-align-last: inline-end;
}
</style>
<div></div>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: justify, direction: rtl</title>
@ -7,24 +7,20 @@
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<meta name="assert" content="text-align:justify aligns text in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned in this case, to the right.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style type='text/css'>
.test { text-align: justify; direction: rtl; }
/* the CSS below is not part of the test */
.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; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 450px; color: orange; font: 25px/1 Ahem; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is the same.</div>
<div class="test">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX </div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div><div class="rb" id="rb6"></div></div>
<div class="test">TES TES TES TES TES TES TES TES TES TES TES </div>
<div class="ref">
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="text-align: right;">REF REF REF</div>
</div>
</body>
</html>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: justify, direction: ltr</title>
@ -7,26 +7,22 @@
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<meta name="assert" content="text-align:justify aligns text in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned in this case, to the left.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style type='text/css'>
.test { text-align: justify; direction: ltr; }
/* the CSS below is not part of the test */
.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; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 450px; color: orange; font: 25px/1 Ahem; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
<div style="direction: rtl;">
<div class="test">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX </div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div><div class="rb" id="rb6"></div></div>
<div class="test">TES TES TES TES TES TES TES TES TES TES TES </div>
<div class="ref">
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="text-align: left;">REF REF REF</div>
</div>
</div>
</body>
</html>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: justify, dir=rtl</title>
@ -7,24 +7,20 @@
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-justify-ref-003.html'>
<meta name="assert" content="text-align:justify aligns text in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned in this case, to the right.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style type='text/css'>
.test { text-align: justify; }
/* the CSS below is not part of the test */
.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; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 450px; color: orange; font: 25px/1 Ahem; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is the same.</div>
<div class="test" dir="rtl">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX </div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div><div class="rb" id="rb6"></div></div>
<div class="test" dir="rtl">TES TES TES TES TES TES TES TES TES TES TES </div>
<div class="ref">
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="text-align: right;">REF REF REF</div>
</div>
</body>
</html>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: justify, dir=ltr</title>
@ -7,26 +7,22 @@
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-justify-ref-004.html'>
<meta name="assert" content="text-align:justify aligns text in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned in this case, to the left.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style type='text/css'>
.test { text-align: justify; }
/* the CSS below is not part of the test */
.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; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 450px; color: orange; font: 25px/1 Ahem; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
<div dir="rtl">
<div class="test" dir="ltr">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX </div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div><div class="rb" id="rb6"></div></div>
<div class="test" dir="ltr">TES TES TES TES TES TES TES TES TES TES TES </div>
<div class="ref">
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="text-align: left;">REF REF REF</div>
</div>
</div>
</body>
</html>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: justify, dir=auto, RTL first strong</title>
@ -7,24 +7,20 @@
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-justify-ref-005.html'>
<meta name="assert" content="text-align:justify aligns text in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned in this case, to the right.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style type='text/css'>
.test { text-align: justify; }
/* the CSS below is not part of the test */
.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; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 450px; color: orange; font: 25px/1 Ahem; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is the same.</div>
<div dir="auto" class="test">&rlm;XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div><div class="rb" id="rb6"></div></div>
<div dir="auto" class="test">&rlm;TES TES TES TES TES TES TES TES TES TES TES</div>
<div class="ref">
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="text-align: right;">REF REF REF</div>
</div>
</body>
</html>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: justify, dir=auto, LTR first strong</title>
@ -7,26 +7,22 @@
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-justify-ref-006.html'>
<meta name="assert" content="text-align:justify aligns text in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned in this case, to the left.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style type='text/css'>
.test { text-align: justify; }
/* the CSS below is not part of the test */
.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; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 450px; color: orange; font: 25px/1 Ahem; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is the same.</div>
<div dir="rtl">
<div dir="auto" class="test">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div><div class="rb" id="rb6"></div></div>
<div dir="auto" class="test">TES TES TES TES TES TES TES TES TES TES TES</div>
<div class="ref">
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="word-spacing: 1em;">REF REF REF REF</div>
<div style="text-align: left;">REF REF REF</div>
</div>
</div>
</body>
</html>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="mismatch" href="text-align-justify-last-start.html">
<link rel="mismatch" href="text-align-justify-last-end.html">
<link rel="mismatch" href="text-align-justify-last-justify.html">
<style>
p {
text-align: justify;
text-align-last: center;
margin-right: 310px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
<p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="match" href="text-align-justify-last-start.html">
<style>
p {
text-align: justify;
margin-right: 310px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
<p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="mismatch" href="text-align-justify-last-start.html">
<link rel="mismatch" href="text-align-justify-last-center.html">
<link rel="mismatch" href="text-align-justify-last-justify.html">
<style>
p {
text-align: justify;
text-align-last: end;
margin-right: 310px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
<p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="mismatch" href="text-align-justify-last-start.html">
<link rel="mismatch" href="text-align-justify-last-center.html">
<link rel="mismatch" href="text-align-justify-last-end.html">
<style>
p {
text-align: justify;
text-align-last: justify;
margin-right: 310px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
<p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="mismatch" href="text-align-justify-last-end.html">
<link rel="mismatch" href="text-align-justify-last-center.html">
<link rel="mismatch" href="text-align-justify-last-justify.html">
<style>
p {
text-align: justify;
text-align-last: start;
margin-right: 310px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
<p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
</body>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: justify-all, direction: rtl</title>
@ -7,23 +7,18 @@
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-justifyall-ref-001.html'>
<meta name="assert" content="text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style type='text/css'>
.test { text-align: justify-all; direction: rtl; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 402px; 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: 72px; }
#rb2 { top: 0; left: 110px; height: 48px; }
#rb3 { top: 0; left: 220px; height: 48px; }
#rb4 { top: 0; left: 330px; height: 72px; }
#rb5 { top: 48px; left: 165px; height: 24px; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 510px; color: orange; font: 30px/1 Ahem; }
.ref { word-spacing: 20px; }
.last-line { word-spacing: 90px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
<div class="test">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX </div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div></div>
<div class="test">TES TES TES TES TES TES TES TES TES TES TES </div>
<div class="ref"><div>REF REF REF REF</div><div>REF REF REF REF</div><div class="last-line">REF REF REF </div></div>
</body>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: justify-all, direction: ltr</title>
@ -7,25 +7,20 @@
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-justifyall-ref-002.html'>
<meta name="assert" content="text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style type='text/css'>
.test { text-align: justify-all; direction: ltr; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 402px; 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: 72px; }
#rb2 { top: 0; right: 110px; height: 48px; }
#rb3 { top: 0; right: 220px; height: 48px; }
#rb4 { top: 0; right: 330px; height: 72px; }
#rb5 { top: 48px; left: 165px; height: 24px; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 510px; color: orange; font: 30px/1 Ahem; }
.ref { word-spacing: 20px; }
.last-line { word-spacing: 90px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
<div style="direction: rtl;">
<div class="test">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX </div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div></div>
<div class="test">TES TES TES TES TES TES TES TES TES TES TES </div>
<div class="ref"><div>REF REF REF REF</div><div>REF REF REF REF</div><div class="last-line">REF REF REF </div></div>
</div>
</body>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: justify-all, dir=rtl</title>
@ -7,23 +7,18 @@
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-justifyall-ref-001.html'>
<meta name="assert" content="text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style type='text/css'>
.test { text-align: justify-all; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 402px; 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: 72px; }
#rb2 { top: 0; left: 110px; height: 48px; }
#rb3 { top: 0; left: 220px; height: 48px; }
#rb4 { top: 0; left: 330px; height: 72px; }
#rb5 { top: 48px; right: 165px; height: 24px; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 510px; color: orange; font: 30px/1 Ahem; }
.ref { word-spacing: 20px; }
.last-line { word-spacing: 90px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
<div class="test" dir="rtl">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX </div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div></div>
<div class="test" dir="rtl">TES TES TES TES TES TES TES TES TES TES TES </div>
<div class="ref"><div>REF REF REF REF</div><div>REF REF REF REF</div><div class="last-line">REF REF REF </div></div>
</body>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: justify-all, dir=ltr</title>
@ -7,25 +7,20 @@
<link rel='match' href='reference/text-align-justifyall-ref-002.html'>
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<meta name="assert" content="text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style type='text/css'>
.test { text-align: justify-all; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 402px; 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: 72px; }
#rb2 { top: 0; right: 110px; height: 48px; }
#rb3 { top: 0; right: 220px; height: 48px; }
#rb4 { top: 0; right: 330px; height: 72px; }
#rb5 { top: 48px; left: 165px; height: 24px; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 510px; color: orange; font: 30px/1 Ahem; }
.ref { word-spacing: 20px; }
.last-line { word-spacing: 90px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
<div dir="rtl">
<div class="test" dir="ltr">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX </div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div></div>
<div class="test">TES TES TES TES TES TES TES TES TES TES TES </div>
<div class="ref"><div>REF REF REF REF</div><div>REF REF REF REF</div><div class="last-line">REF REF REF </div></div>
</div>
</body>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: justify-all, dir=auto, RTL first strong</title>
@ -7,23 +7,18 @@
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-justifyall-ref-001.html'>
<meta name="assert" content="text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style type='text/css'>
.test { text-align: justify-all; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 402px; 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: 72px; }
#rb2 { top: 0; left: 110px; height: 48px; }
#rb3 { top: 0; left: 220px; height: 48px; }
#rb4 { top: 0; left: 330px; height: 72px; }
#rb5 { top: 48px; right: 165px; height: 24px; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 510px; color: orange; font: 30px/1 Ahem; }
.ref { word-spacing: 20px; }
.last-line { word-spacing: 90px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
<div dir="auto" class="test">&rlm;XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div></div>
<div dir="auto" class="test">&rlm;TES TES TES TES TES TES TES TES TES TES TES</div>
<div class="ref"><div>REF REF REF REF</div><div>REF REF REF REF</div><div class="last-line">REF REF REF </div></div>
</body>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: justify-all, dir=auto, LTR first strong</title>
@ -7,25 +7,20 @@
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-justifyall-ref-002.html'>
<meta name="assert" content="text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style type='text/css'>
.test { text-align: justify-all; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 402px; 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: 72px; }
#rb2 { top: 0; right: 110px; height: 48px; }
#rb3 { top: 0; right: 220px; height: 48px; }
#rb4 { top: 0; right: 330px; height: 72px; }
#rb5 { top: 48px; left: 165px; height: 24px; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 510px; color: orange; font: 30px/1 Ahem; }
.ref { word-spacing: 20px; }
.last-line { word-spacing: 90px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
<div dir="rtl">
<div dir="auto" class="test">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div></div>
<div dir="auto" class="test">TES TES TES TES TES TES TES TES TES TES TES</div>
<div class="ref"><div>REF REF REF REF</div><div>REF REF REF REF</div><div class="last-line">REF REF REF </div></div>
</div>
</body>
</html>

View file

@ -4,7 +4,6 @@
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
<meta name="flags" content="">
<meta name="assert" content="The 'text-align-last' property set to 'start' on a block element aligns the last line text to the start edge.">
<style>
div {

View file

@ -4,7 +4,6 @@
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
<meta name="flags" content="">
<meta name="assert" content="The 'text-align-last' property set to 'right' on a block element aligns the last line text to the end edge.">
<style>
div {

View file

@ -4,7 +4,6 @@
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
<meta name="flags" content="">
<meta name="assert" content="The 'text-align-last' property set to 'left' on a block element aligns the last line text to the left.">
<style>
div {

View file

@ -4,7 +4,6 @@
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
<meta name="flags" content="">
<meta name="assert" content="The 'text-align-last' property set to 'right' on a block element aligns the last line text to the right.">
<style>
div {

View file

@ -4,7 +4,6 @@
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
<meta name="flags" content="">
<meta name="assert" content="The 'text-align-last' property set to 'center' on a block element aligns the last line text to the center.">
<style>
div {

View file

@ -4,7 +4,6 @@
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
<meta name="flags" content="">
<meta name="assert" content="The 'text-align-last' property set to 'justify' on a block element aligns the last line text to
both left and right edges">
<style>

View file

@ -4,7 +4,6 @@
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
<meta name="flags" content="">
<meta name="assert" content="The 'text-align-last' property set to 'auto' on a block element aligns the last line text to the right
when text-align set 'right'.">
<style>

View file

@ -4,7 +4,6 @@
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
<meta name="flags" content="">
<meta name="assert" content="The 'text-align-last' property set to 'auto' on a block element aligns the last line text to the right
when text-align set 'end'.">
<style>

View file

@ -4,7 +4,6 @@
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
<meta name="flags" content="">
<meta name="assert" content="The 'text-align-last' property set to 'auto' on a block element aligns the last line text to the center
when text-align set 'center'.">
<style>

View file

@ -5,7 +5,6 @@
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
<link rel="match" href="text-align-last-010-ref.html">
<meta name="flags" content="">
<meta name="assert" content="The 'text-align-last' property set to 'right' on a block element aligns the only one line text to the right.">
<style>
div {

View file

@ -5,7 +5,6 @@
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
<link rel="match" href="text-align-last-010-ref.html">
<meta name="flags" content="">
<meta name="assert" content="The 'text-align-last' property set to 'end' on a block element aligns the only one line text to the right.">
<style>
div {

View file

@ -4,7 +4,6 @@
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
<meta name="flags" content="">
<meta name="assert" content="The 'text-align-last' property set to 'center' on a block element aligns the only one line text to the center.">
<style>
div {

View file

@ -4,7 +4,6 @@
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
<meta name="flags" content="">
<meta name="assert" content="Test checks that the 'text-align-last' property is invalid if the container element is not block element.">
<style>
div {

View file

@ -4,7 +4,6 @@
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
<meta name="flags" content="">
<meta name="assert" content="Test checks that the 'text-align-last' property is valid if the span element set 'display: block'.">
<style>
span {

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last: center</title>
<meta charset="utf-8">
<style>
p {
text-align: center;
}
</style>
</head>
<body>
<p>Lorem ipsum</p>
<p dir="rtl">אמר המחבר</p>
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last: center</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="match" href="text-align-last-center-ref.html">
<style>
p {
text-align-last: center;
}
</style>
</head>
<body>
<p>Lorem ipsum</p>
<p dir="rtl">אמר המחבר</p>
</body>
</html>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last: end</title>
<meta charset="utf-8">
<style>
p {
text-align: end;
}
</style>
</head>
<body>
<p>Lorem ipsum</p>
<p dir="rtl">אמר המחבר</p>
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last: end</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="match" href="text-align-last-end-ref.html">
<style>
p {
text-align-last: end;
}
</style>
</head>
<body>
<p>Lorem ipsum</p>
<p dir="rtl">אמר המחבר</p>
</body>
</html>

View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-align-last interpolation</title>
<link rel="author" title="Kiet Ho" href="mailto:tho22@apple.com">
<link rel="help" href="https://drafts.csswg.org/css-text/#text-align-last-property">
<meta name="assert" content="text-align-last supports discrete animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
</head>
<body>
<script>
test_no_interpolation({
property: 'text-align-last',
from: 'auto',
to: 'start'
});
test_no_interpolation({
property: 'text-align-last',
from: 'justify',
to: 'center'
});
test_no_interpolation({
property: 'text-align-last',
from: 'left',
to: 'right'
});
test_no_interpolation({
property: 'text-align-last',
from: 'end',
to: 'match-parent'
});
</script>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last: justify</title>
<meta charset="utf-8">
<style>
span.left {
position: relative;
float: left;
}
span.right {
position: relative;
float: right;
}
</style>
</head>
<body>
<p><span class="left">Lorem</span><span class="right">ipsum</span></p>
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last: justify in RTL</title>
<meta charset="utf-8">
<style>
span.left {
float: left;
}
span.right {
float: right;
}
</style>
</head>
<body>
<p><span class="right">אמר</span><span class="left">המחבר</span></p>
</body>
</html>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last: justify in RTL</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="match" href="text-align-last-justify-rtl-ref.html">
<style>
p {
text-align-last: justify;
}
</style>
</head>
<body>
<p dir="rtl">אמר המחבר</p>
</body>
</html>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last: justify</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="match" href="text-align-last-justify-ref.html">
<style>
p {
text-align-last: justify;
}
</style>
</head>
<body>
<p>Lorem ipsum</p>
</body>
</html>

View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.test {
width: 208px;
border: 1px solid #000000;
font-family: Ahem, monospace;
font-size: 1em;
}
</style>
</head>
<body>
<div>
This test checks that text-align-last property works properly.<br/>
</div>
<div class="test" style="text-align: end">start end</div>
<div class="test" style="text-align: start">end start</div>
<div class="test" style="text-align: right">left right</div>
<div class="test" style="text-align: left">right left</div>
<div class="test" style="text-align: left">center left</div>
<div class="test" style="text-align: start">start auto</div>
<div class="test" style="text-align: end">end auto</div>
<div class="test" style="text-align: left">left auto</div>
<div class="test" style="text-align: right">right auto</div>
<div class="test" style="text-align: center">center auto</div>
<div class="test" style="text-align: start">justify auto</div>
<div class="test" style="text-align: start">auto&nbsp; justify</div>
</body>
</html>

View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last</title>
<link rel="help" href="https://drafts.csswg.org/css-text/#text-align-last-property">
<link rel="match" href="text-align-last-simple-ref.html">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.test {
width: 208px;
border: 1px solid #000000;
font-family: Ahem, monospace;
font-size: 1em;
}
</style>
</head>
<body>
<div>
This test checks that text-align-last property works properly.<br/>
</div>
<div class="test" style="text-align: start; text-align-last: end">start end</div>
<div class="test" style="text-align: end; text-align-last: start">end start</div>
<div class="test" style="text-align: left; text-align-last: right">left right</div>
<div class="test" style="text-align: right; text-align-last: left">right left</div>
<div class="test" style="text-align: center; text-align-last: left">center left</div>
<div class="test" style="text-align: start; text-align-last: auto">start auto</div>
<div class="test" style="text-align: end; text-align-last: auto">end auto</div>
<div class="test" style="text-align: left; text-align-last: auto">left auto</div>
<div class="test" style="text-align: right; text-align-last: auto">right auto</div>
<div class="test" style="text-align: center; text-align-last: auto">center auto</div>
<div class="test" style="text-align: justify; text-align-last: auto">justify auto</div>
<div class="test" style="text-align: auto; text-align-last: justify">auto justify</div>
</body>
</html>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last: start</title>
<meta charset="utf-8">
<style>
p {
text-align: start;
}
</style>
</head>
<body>
<p>Lorem ipsum</p>
<p dir="rtl">אמר המחבר</p>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last: start</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="match" href="text-align-last-start-ref.html">
<style>
p {
text-align: end;
text-align-last: start;
}
</style>
</head>
<body>
<p>Lorem ipsum</p>
<p dir="rtl">אמר המחבר</p>
</body>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, direction: rtl</title>
@ -7,18 +7,17 @@
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-start-ref-001.html'>
<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box ie. right when direction is horizontal, rtl.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
.ref { text-align: right; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes looks the same.</div>
<div class="test">XXXXX</div>
<div class="ref"><div id="rb1"></div></div>
<div class="test">TESTI</div>
<div class="ref">REFER</div>
</body>
</html>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, direction: ltr</title>
@ -7,20 +7,19 @@
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-start-ref-002.html'>
<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box ie. left when direction is horizontal, ltr.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
.ref { text-align: left; }
</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="test">XXXXX</div>
<div class="ref"><div id="rb1"></div></div>
<div class="test">TESTI</div>
<div class="ref">REFER</div>
</div>
</body>
</html>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, dir=rtl</title>
@ -7,18 +7,17 @@
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-start-ref-003.html'>
<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box ie. right when direction is horizontal, rtl.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
.ref { text-align: right; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
<div class="test" dir="rtl">XXXXX</div>
<div class="ref"><div id="rb1"></div></div>
<div class="test" dir="rtl">TESTI</div>
<div class="ref">REFER</div>
</body>
</html>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, dir=ltr</title>
@ -7,20 +7,19 @@
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-start-ref-004.html'>
<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box ie. left when direction is horizontal, ltr.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
.ref { text-align: left; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
<div dir="rtl">
<div class="test" dir="ltr">XXXXX</div>
<div class="ref"><div id="rb1"></div></div>
<div class="test" dir="ltr">TESTI</div>
<div class="ref">REFER</div>
</div>
</body>
</html>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, direction: rtl</title>
@ -7,20 +7,17 @@
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-start-ref-005.html'>
<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box ie. right when direction is horizontal, rtl.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
.ref { text-align: right; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes looks the same.</div>
<div class="test">XXX XXX XXX XXX XXX XXX XXX XXX</div>
<div class="ref"><div id="rb1"></div><div id="rb2"></div><div id="rb3"></div></div>
<div class="test">TES TES TES TES TES TES TES TES</div>
<div class="ref">REF REF REF REF REF REF REF REF</div>
</body>
</html>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, direction: ltr</title>
@ -7,22 +7,19 @@
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-start-ref-006.html'>
<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box ie. left when direction is horizontal, ltr.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
.ref { text-align: left; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
<div style="direction: rtl;">
<div class="test">XXX XXX XXX XXX XXX XXX XXX XXX</div>
<div class="ref"><div id="rb1"></div><div id="rb2"></div><div id="rb3"></div></div>
<div class="test">TES TES TES TES TES TES TES TES</div>
<div class="ref">REF REF REF REF REF REF REF REF</div>
</div>
</body>
</html>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, dir=rtl</title>
@ -7,20 +7,17 @@
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-start-ref-007.html'>
<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box ie. right when direction is horizontal, rtl.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
.ref { text-align: right; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes looks the same.</div>
<div class="test" dir="rtl">XXX XXX XXX XXX XXX XXX XXX XXX</div>
<div class="ref"><div id="rb1"></div><div id="rb2"></div><div id="rb3"></div></div>
<div class="test" dir="rtl">TES TES TES TES TES TES TES TES</div>
<div class="ref">REF REF REF REF REF REF REF REF</div>
</body>
</html>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, dir=ltr</title>
@ -7,22 +7,19 @@
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-start-ref-008.html'>
<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box ie. left when direction is horizontal, ltr.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
.ref { text-align: left; }
</style>
</head>
<body>
<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
<div dir="rtl">
<div class="test" dir="ltr">XXX XXX XXX XXX XXX XXX XXX XXX</div>
<div class="ref"><div id="rb1"></div><div id="rb2"></div><div id="rb3"></div></div>
<div class="test" dir="ltr">TES TES TES TES TES TES TES TES</div>
<div class="ref">REF REF REF REF REF REF REF REF</div>
</div>
</body>
</html>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, dir=auto, RTL first strong</title>
@ -7,23 +7,20 @@
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-start-ref-009.html'>
<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box ie. right when direction is auto and first strong character is rtl.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
.ref { text-align: right; }
</style>
</head>
<body>
<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
<div class="test" dir="auto">&rlm;XXX XXX XXX XXX XXX XXX XXX XXX</div>
<div class="ref"><div id="rb1"></div><div id="rb2"></div><div id="rb3"></div></div>
<div class="test" dir="auto">&rlm;TES TES TES TES TES TES TES TES</div>
<div class="ref">REF REF REF REF REF REF REF REF</div>
<!-- Notes:
The &rlm isn't in the Ahem font, so it may cause a spurious effect, such as a thin white line in the middle of a block in IE. This should be ignored. The test needs a RTL character in the Ahem font, so that the &RLM can be removed.
-->
</body>
</html>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, dir=auto, LTR first strong</title>
@ -7,22 +7,19 @@
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-start-ref-010.html'>
<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box ie. left when direction is auto and first strong character is ltr.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
.ref { text-align: left; }
</style>
</head>
<body>
<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
<div dir="rtl">
<div class="test" dir="auto">XXX XXX XXX XXX XXX XXX XXX XXX</div>
<div class="ref"><div id="rb1"></div><div id="rb2"></div><div id="rb3"></div></div>
<div class="test" dir="auto">TES TES TES TES TES TES TES TES</div>
<div class="ref">REF REF REF REF REF REF REF REF</div>
</div>
</body>
</html>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, pre, dir=rtl inherited</title>
@ -7,24 +7,23 @@
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-start-ref-014.html'>
<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box ie. right when base direction is rtl.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
.ref { text-align: right; }
</style>
</head>
<body>
<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
<div dir="rtl">
<pre class="test">XXX
&rlm;XXX</pre>
<div class="ref"><div id="rb1"></div></div>
<pre class="test">TES
&rlm;TIN</pre>
<div class="ref">REF<br>ERE</div>
</div>
<!-- Notes:
The &rlm isn't in the Ahem font, so it may cause a spurious effect, such as a thin white line in the middle of a block in IE. This should be ignored. The test needs a RTL character in the Ahem font, so that the &RLM can be removed.
-->
</body>
</html>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, pre, dir=ltr inherited</title>
@ -7,24 +7,23 @@
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-start-ref-015.html'>
<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box ie. left when base direction is ltr.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
.ref { text-align: left; }
</style>
</head>
<body>
<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
<div dir="ltr">
<pre class="test">XXX
&rlm;XXX</pre>
<div class="ref"><div id="rb1"></div></div>
<pre class="test">TES
&rlm;TIN</pre>
<div class="ref">REF<br>ERE</div>
</div>
<!-- Notes:
The &rlm isn't in the Ahem font, so it may cause a spurious effect, such as a thin white line in the middle of a block in IE. This should be ignored. The test needs a RTL character in the Ahem font, so that the &RLM can be removed.
-->
</body>
</html>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, pre, dir=auto</title>
@ -7,23 +7,25 @@
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-start-ref-016.html'>
<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box ie. left when direction is auto and first strong character is ltr, and right when first strong is rtl.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.test, .ref1, .ref2 { width: 300px; color: orange; font: 25px/1 Ahem; }
.test { border: 1px solid orange; margin: 20px; }
.ref1, .ref2 { border-left: 1px solid orange; border-right: 1px solid orange; margin: 0 20px; }
.ref1 { border-top: 1px solid orange; text-align: left; }
.ref2 { border-bottom: 1px solid orange; text-align: right; }
</style>
</head>
<body>
<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
<pre class="test" dir="auto">XXX
&rlm;XXX</pre>
<div class="ref"><div id="rb1"></div><div id="rb2"></div></div>
<pre class="test" dir="auto">TES
&rlm;TIN</pre>
<div class="ref1">REF</div>
<div class="ref2">ERE</div>
<!-- Notes:
The &rlm isn't in the Ahem font, so it may cause a spurious effect, such as a thin white line in the middle of a block in IE. This should be ignored. The test needs a RTL character in the Ahem font, so that the &RLM can be removed.
-->
</body>
</html>
</html>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: start, pre, dir=auto on surrounding block</title>
@ -7,21 +7,20 @@
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-start-ref-017.html'>
<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box ie. since dir=auto is not inherited by pre, to left in ltr context.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<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; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
.ref { text-align: left; }
</style>
</head>
<body>
<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
<div dir="auto">
<pre class="test">XXX
&rlm;XXX</pre>
<div class="ref"><div id="rb1"></div></div>
<pre class="test">TES
&rlm;TIN</pre>
<div class="ref">REF<br>ERE</div>
</div>
<!-- Notes:
The &rlm isn't in the Ahem font, so it may cause a spurious effect, such as a thin white line in the middle of a block in IE. This should be ignored. The test needs a RTL character in the Ahem font, so that the &RLM can be removed.

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="mismatch" href="text-align-start-last-start.html">
<link rel="mismatch" href="text-align-start-last-end.html">
<link rel="mismatch" href="text-align-start-last-justify.html">
<style>
p {
text-align: start;
text-align-last: center;
margin-right: 310px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
<p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="match" href="text-align-start-last-start.html">
<style>
p {
text-align: start;
margin-right: 310px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
<p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="mismatch" href="text-align-start-last-start.html">
<link rel="mismatch" href="text-align-start-last-center.html">
<link rel="mismatch" href="text-align-start-last-justify.html">
<style>
p {
text-align: start;
text-align-last: end;
margin-right: 310px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
<p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="mismatch" href="text-align-start-last-start.html">
<link rel="mismatch" href="text-align-start-last-center.html">
<link rel="mismatch" href="text-align-start-last-end.html">
<style>
p {
text-align: start;
text-align-last: justify;
margin-right: 310px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
<p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>text-align-last</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
<link rel="mismatch" href="text-align-start-last-end.html">
<link rel="mismatch" href="text-align-start-last-center.html">
<link rel="mismatch" href="text-align-start-last-justify.html">
<style>
p {
text-align: start;
text-align-last: start;
margin-right: 310px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
<p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
</body>
</html>