tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

text-align-match-parent-04.html (2716B)


      1 <!DOCTYPE html>
      2 <html class="reftest-wait">
      3  <head>
      4    <meta charset="utf-8">
      5    <title>CSS Text: text-align: match-parent</title>
      6    <link rel="author" title="Simon Montagu" href="mailto:smontagu@mozilla.com">
      7    <link rel="help" href="http://www.w3.org/TR/css-text-3/#text-align-property">
      8    <meta name="flags" content="dom">
      9    <meta name="assert" content="Text checks that an element with
     10      text-align: match-parent still aligns correctly if the parent's
     11      width is changed">
     12     <link rel="match" href="text-align-match-parent-ref.html">
     13    <style type="text/css">
     14 div.start  { text-align: start; }
     15 div.end    { text-align: end; }
     16 div.left   { text-align: left; }
     17 div.right  { text-align: right; }
     18 div > div  { text-align: match-parent; }
     19    </style>
     20    <script type="text/javascript">
     21 function changeParentWidth()
     22 {
     23  for (parent = 0; parent < 16; ++parent) {
     24     var parentDiv = document.getElementById("d" + parent);
     25     parentDiv.style.width = "";
     26   }
     27 
     28  document.documentElement.removeAttribute("class");
     29 }
     30   </script>
     31  </head>
     32  <body onload="changeParentWidth()">
     33   <div>Test passes if each line that says "Left" is aligned left and
     34   each line that says "Right" is aligned right</div>
     35   <div id="d0" style="width: 50%;" class="start" dir="ltr"><div dir="ltr">Left</div></div>
     36   <div id="d1" style="width: 50%;" class="start" dir="ltr"><div dir="rtl">Left</div></div>
     37   <div id="d2" style="width: 50%;" class="start" dir="rtl"><div dir="ltr">Right</div></div>
     38   <div id="d3" style="width: 50%;" class="start" dir="rtl"><div dir="rtl">Right</div></div>
     39   <div id="d4" style="width: 50%;" class="end" dir="ltr"><div dir="ltr">Right</div></div>
     40   <div id="d5" style="width: 50%;" class="end" dir="ltr"><div dir="rtl">Right</div></div>
     41   <div id="d6" style="width: 50%;" class="end" dir="rtl"><div dir="ltr">Left</div></div>
     42   <div id="d7" style="width: 50%;" class="end" dir="rtl"><div dir="rtl">Left</div></div>
     43   <div id="d8" style="width: 50%;" class="left" dir="ltr"><div dir="ltr">Left</div></div>
     44   <div id="d9" style="width: 50%;" class="left" dir="ltr"><div dir="rtl">Left</div></div>
     45   <div id="d10" style="width: 50%;" class="left" dir="rtl"><div dir="ltr">Left</div></div>
     46   <div id="d11" style="width: 50%;" class="left" dir="rtl"><div dir="rtl">Left</div></div>
     47   <div id="d12" style="width: 50%;" class="right" dir="ltr"><div dir="ltr">Right</div></div>
     48   <div id="d13" style="width: 50%;" class="right" dir="ltr"><div dir="rtl">Right</div></div>
     49   <div id="d14" style="width: 50%;" class="right" dir="rtl"><div dir="ltr">Right</div></div>
     50   <div id="d15" style="width: 50%;" class="right" dir="rtl"><div dir="rtl">Right</div></div>
     51 </body>
     52 </html>