tor-browser

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

legend-margin-inline.html (1376B)

      1 <!doctype html>
      2 <title>legend and margin (inline direction)</title>
      3 <script src=/resources/testharness.js></script>
      4 <script src=/resources/testharnessreport.js></script>
      5 <style>
      6 fieldset { margin: 0 0 10px 0; padding: 20px; border: 10px solid; width: 500px; }
      7 legend { height: 10px; width: 200px; padding: 0; }
      8 
      9 #legend-center { margin-left: auto; margin-right: auto; }
     10 #legend-right { margin-left: auto; }
     11 #legend-10 { margin-left: 10px; }
     12 </style>
     13 <fieldset>
     14  <legend id=legend-left>left</legend>
     15 </fieldset>
     16 <fieldset>
     17  <legend id=legend-center>center</legend>
     18 </fieldset>
     19 <fieldset>
     20  <legend id=legend-right>right</legend>
     21 </fieldset>
     22 <fieldset>
     23  <legend id=legend-10>10px</legend>
     24 </fieldset>
     25 
     26 <script>
     27 const legends = document.getElementsByTagName('legend');
     28 const [legendLeft, legendCenter, legendRight, legend10] = legends;
     29 
     30 const expectedLeft = 8 + 10 + 20;
     31 const expectedCenter = expectedLeft + (500 / 2) - (200 / 2);
     32 const expectedRight = expectedLeft + 500 - 200;
     33 const expected10 = expectedLeft + 10;
     34 
     35 test(() => {
     36   assert_equals(legendLeft.offsetLeft, expectedLeft);
     37 }, 'left');
     38 
     39 test(() => {
     40   assert_equals(legendCenter.offsetLeft, expectedCenter);
     41 }, 'center');
     42 
     43 test(() => {
     44   assert_equals(legendRight.offsetLeft, expectedRight);
     45 }, 'right');
     46 
     47 test(() => {
     48   assert_equals(legend10.offsetLeft, expected10);
     49 }, '10px');
     50 </script>