tor-browser

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

ignored-properties-001.html (3265B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <meta charset="utf-8">
      5 <title>Ignored CSS properties</title>
      6 <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
      7 <meta name="assert" content="Verify style with ignored properties does not affect MathML layout.">
      8 <meta name="timeout" content="long">
      9 <script src="/resources/testharness.js"></script>
     10 <script src="/resources/testharnessreport.js"></script>
     11 <script src="/mathml/support/feature-detection.js"></script>
     12 <script src="/mathml/support/layout-comparison.js"></script>
     13 <script src="/mathml/support/mathml-fragments.js"></script>
     14 <script>
     15  var epsilon = 1;
     16 
     17  setup({ explicit_done: true });
     18  window.addEventListener("load", runTests);
     19 
     20  function runTests() {
     21 
     22      for (tag in MathMLFragments) {
     23          if (!FragmentHelper.isValidChildOfMrow(tag))
     24              continue;
     25 
     26          var ignoredProperties = [
     27              "writing-mode: vertical-rl;",
     28              "white-space: normal;",
     29              "float: right;",
     30              "align-content: end; justify-content: end;",
     31              "align-self: end; justify-self: end;",
     32          ];
     33 
     34          ignoredProperties.forEach(ignoredStyle => {
     35              document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\
     36 <div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\
     37 <div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\
     38 </div>`);
     39              var div = document.body.lastElementChild;
     40 
     41              // Create MathML structure with ignored style properties.
     42              var elementContainer = div.firstElementChild;
     43              var elementContainerWidth = elementContainer.getBoundingClientRect().width;
     44              var element = FragmentHelper.element(elementContainer);
     45              if (!FragmentHelper.isEmpty(tag))
     46                  FragmentHelper.forceNonEmptyDescendants(element);
     47              element.setAttribute("style", ignoredStyle);
     48              Array.from(element.getElementsByTagNameNS("*", FragmentHelper.mathml_namespace)).forEach(descendant => {
     49                  descendant.setAttribute("style", ignoredStyle);
     50              });
     51 
     52              var referenceContainer = div.lastElementChild;
     53              var referenceContainerWidth = referenceContainer.getBoundingClientRect().width;
     54              var reference = FragmentHelper.element(referenceContainer);
     55              if (!FragmentHelper.isEmpty(tag))
     56                  FragmentHelper.forceNonEmptyDescendants(reference);
     57 
     58              test(function() {
     59                  assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
     60                  assert_approx_equals(elementContainerWidth, referenceContainerWidth, epsilon);
     61              }, `${tag} preferred width calculation is not affected by ${ignoredStyle}`);
     62 
     63              test(function() {
     64                  assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
     65                  compareLayout(element, reference, epsilon);
     66              }, `${tag} layout is not affected by ${ignoredStyle}`);
     67 
     68              div.style = "display: none;"; // Hide the div after measurement.
     69          });
     70      }
     71 
     72      done();
     73  }
     74 </script>
     75 </head>
     76 <body>
     77  <div id="log"></div>
     78 </body>
     79 </html>