align-attribute-rtl.html | Explore in Territory

<head>
<style>
div, center, table {
  border: 1px solid blue;
  font-size: 8px;
}

div, center {
  padding: 1px;
}

.fixedMargin {
  margin-left: 2px;
  margin-right: 2px;
}

.autoWidth {
  border: 1px solid green;
  break-inside: avoid;
  margin-top: 2px;
}

.fixedWidth {
  border: 1px solid purple;
  break-inside: avoid;
  margin-top: 2px;
}

.fixedWidth > * {
  width: 200px;
}

.full {
  width: 100%;
}

section {
  columns: 2;
  font-size: 8px;
  direction: rtl;
}
</style>
</head>

This is a test of all the various HTML alignments using RTL direction.

<section class="rtl">

<div class="autoWidth">
  <div>Normal div inside normal div</div>
  <div align=left>Left div inside normal div</div>
  <div align=center>Center div inside normal div</div>
  <div align=right>Right div inside normal div</div>
  <center>Center tag inside normal div</center>
  <table><tr><td>Normal table.</tr></td></table>
  <table align="center"><tr><td>Center aligned table.</tr></td></table>
  <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
</div>

<div class="fixedWidth">
  <div>Normal fixed width div inside normal div</div>
  <div align=left>Left fixed width div inside normal div</div>
  <div align=center>Center fixed width div inside normal div</div>
  <div align=right>Right fixed width div inside normal div</div>
  <center>Center tag (fixed width) inside normal div</center>
  <table><tr><td>Normal table.</tr></td></table>
  <table align="center"><tr><td>Center aligned table.</tr></td></table>
  <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
</div>

<div align=left class="autoWidth">
  <div>Normal div inside align=left div</div>
  <div align=left>Left div inside align=left div</div>
  <div align=center>Center div inside align=left div</div>
  <div align=right>Right div inside align=left div</div>
  <center>Center tag inside align=left div</center>
  <table><tr><td>Normal table.</tr></td></table>
  <table align="center"><tr><td>Center aligned table.</tr></td></table>
  <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
</div>

<div align=left class="fixedWidth">
  <div>Normal fixed width div inside align=left div</div>
  <div align=left>Left fixed width div inside align=left div</div>
  <div align=center>Center fixed width div inside align=left div</div>
  <div align=right>Right fixed width div inside align=left div</div>
  <center>Center tag (fixed width) inside align=left div</center>
  <table><tr><td>Normal table.</tr></td></table>
  <table align="center"><tr><td>Center aligned table.</tr></td></table>
  <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
</div>

<div align=center class="autoWidth">
  <div>Normal div inside align= center div</div>
  <div align=left>Left div inside align=center div</div>
  <div align=center>Center div inside align=center div</div>
  <div align=right>Right div inside align=center div</div>
  <center>Center tag inside align=center div</center>
  <table><tr><td>Normal table.</tr></td></table>
  <table align="center"><tr><td>Center aligned table.</tr></td></table>
  <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
</div>

<div align=center class="fixedWidth">
  <div>Normal fixed width div inside align=center div</div>
  <div align=left>Left fixed width div inside align=center div</div>
  <div align=center>Center fixed width div inside align=center div</div>
  <div align=right>Right fixed width div inside align=center div</div>
  <center>Center tag (fixed width) inside align=center div</center>
  <table><tr><td>Normal table.</tr></td></table>
  <table align="center"><tr><td>Center aligned table.</tr></td></table>
  <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
</div>

<div align=right class="autoWidth">
  <div>Normal div inside align=right div</div>
  <div align=left>Left div inside align=right div</div>
  <div align=center>Center div inside align=right div</div>
  <div align=right>Right div inside align=right div</div>
  <center>Center tag inside align=right div</center>
  <table><tr><td>Normal table.</tr></td></table>
  <table align="center"><tr><td>Center aligned table.</tr></td></table>
  <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
</div>

<div align=right class="fixedWidth">
  <div>Normal fixed width div inside align=right div</div>
  <div align=left>Left fixed width div inside align=right div</div>
  <div align=center>Center fixed width div inside align=right div</div>
  <div align=right>Right fixed width div inside align=right div</div>
  <center>Center tag (fixed width) inside align=right div</center>
  <table><tr><td>Normal table.</tr></td></table>
  <table align="center"><tr><td>Center aligned table.</tr></td></table>
  <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
</div>

</section>
chromium/third_party/blink/web_tests/fast/block/basic/align-attribute-rtl.html
