Bug 1569912 [wpt PR 18164] - MathML: Add tests for margin/padding/border in RTL mode., a=testonly

Automatic update from web-platform-tests MathML: Add tests for margin/padding/border in RTL mode. (#18164) Additionally, this also: - remove duplicate "left" property in padding-border-margin-001 - add feature detection for padding/border/margin-001 since they rely on mspace and now the dir attribute. -- wpt-commits: 699ce5fdb8ad9ad381fa03c7b2d219ba3bc5c597 wpt-pr: 18164
2024-10-26 19:55:39 +00:00 · 2019-08-01 15:17:36 +00:00 · 2019-08-01 15:17:36 +00:00 · af47b7c566
commit af47b7c566
parent ae71b97c0c
7 changed files with 204 additions and 1 deletions
--- a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-001.html
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-001.html
@ -7,6 +7,7 @@
 <meta name="assert" content="Verify that border is taken into account.">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
 <script src="helper.js"></script>
 <script>
  var epsilon = 1;
@ -16,6 +17,7 @@

  function runTests() {
      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
          var s = measureSpaceAround("mrow-border")
          assert_approx_equals(s.left, 20, epsilon, "left border");
          assert_approx_equals(s.right, 30, epsilon, "right border");
@ -28,6 +30,21 @@
      }, "Border properties on mrow");

      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_true(MathMLFeatureDetection.has_dir());
+          var s = measureSpaceAround("mrow-border-rtl")
+          assert_approx_equals(s.left, 20, epsilon, "left border");
+          assert_approx_equals(s.right, 30, epsilon, "right border");
+          assert_approx_equals(s.top, 40, epsilon, "top border");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom border");
+          var b = document.getElementById("mrow-border-rtl").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
+          assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
+      }, "Border properties on mrow (rtl)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
          var s = measureSpaceAround("mrow-border-shorthand")
          assert_approx_equals(s.left, 20, epsilon, "left border");
          assert_approx_equals(s.right, 20, epsilon, "right border");
@ -40,6 +57,7 @@
      }, "Border properties on mrow (shorthand)");

      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
          var s = measureSpaceAround("mrow-border-logical")
          assert_approx_equals(s.left, 20, epsilon, "left border");
          assert_approx_equals(s.right, 30, epsilon, "right border");
@ -52,6 +70,21 @@
      }, "Border properties on mrow (logical)");

      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_true(MathMLFeatureDetection.has_dir());
+          var s = measureSpaceAround("mrow-border-logical-rtl")
+          assert_approx_equals(s.left, 30, epsilon, "left border");
+          assert_approx_equals(s.right, 20, epsilon, "right border");
+          assert_approx_equals(s.top, 40, epsilon, "top border");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom border");
+          var b = document.getElementById("mrow-border-logical-rtl").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
+          assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
+      }, "Border properties on mrow (logical, rtl)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
          var s = measureSpaceAround("mrow-border-logical-shorthand")
          assert_approx_equals(s.left, 20, epsilon, "left border");
          assert_approx_equals(s.right, 20, epsilon, "right border");
@ -82,6 +115,19 @@
      </mrow>
    </math>
  </p>
+  <p>
+    <math dir="rtl">
+      <mrow>
+        <mrow id="mrow-border-rtl"
+              style="border-left: 20px solid transparent;
+                     border-right: 30px solid transparent;
+                     border-top: 40px solid transparent;
+                     border-bottom: 50px solid transparent;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
  <p>
    <math>
      <mrow>
@ -105,6 +151,19 @@
      </mrow>
    </math>
  </p>
+  <p>
+    <math dir="rtl">
+      <mrow>
+        <mrow id="mrow-border-logical-rtl"
+              style="border-inline-start: 20px solid transparent;
+                     border-inline-end: 30px solid transparent;
+                     border-block-start: 40px solid transparent;
+                     border-block-end: 50px solid transparent;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
  <p>
    <math>
      <mrow>
--- a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-002.html
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-002.html
@ -22,6 +22,7 @@
            continue;

        var style = "border-left: 30px solid; border-right: 40px solid; border-top: 50px solid; border-bottom: 60px solid;";
+        var styleRTL = `direction: rtl; ${style}`;

        if (FragmentHelper.isEmpty(tag)) {
            test(function() {
@ -39,6 +40,14 @@
            assert_approx_equals(s.top_delta, 50, epsilon, "top border");
            assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom border");
        }, `Border properties on ${tag}`);
+
+        test(function() {
+            var s = compareSpaceWithAndWithoutStyle(tag, styleRTL);
+            assert_approx_equals(s.left_delta, 30, epsilon, "left border");
+            assert_approx_equals(s.right_delta, 40, epsilon, "right border");
+            assert_approx_equals(s.top_delta, 50, epsilon, "top border");
+            assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom border");
+        }, `Border properties on ${tag} (rtl)`);
    }

    done();
--- a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-001.html
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-001.html
@ -7,6 +7,7 @@
 <meta name="assert" content="Verify that margin is taken into account.">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
 <script src="helper.js"></script>
 <script>
  var epsilon = 1;
@ -16,6 +17,7 @@

  function runTests() {
      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
          var s = measureSpaceAround("mrow-margin")
          assert_approx_equals(s.left, 20, epsilon, "left margin");
          assert_approx_equals(s.right, 30, epsilon, "right margin");
@ -28,6 +30,21 @@
      }, "Margin properties on mrow");

      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_true(MathMLFeatureDetection.has_dir());
+          var s = measureSpaceAround("mrow-margin-rtl")
+          assert_approx_equals(s.left, 20, epsilon, "left margin");
+          assert_approx_equals(s.right, 30, epsilon, "right margin");
+          assert_approx_equals(s.top, 40, epsilon, "top margin");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom margin");
+          var b = document.getElementById("mrow-margin-rtl").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 50, epsilon, "element width");
+          assert_approx_equals(b.height, 50, epsilon, "element height");
+      }, "Margin properties on mrow (rtl)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
          var s = measureSpaceAround("mrow-margin-shorthand")
          assert_approx_equals(s.left, 20, epsilon, "left margin");
          assert_approx_equals(s.right, 20, epsilon, "right margin");
@ -40,6 +57,7 @@
      }, "Margin properties on mrow (shorthand)");

      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
          var s = measureSpaceAround("mrow-margin-logical")
          assert_approx_equals(s.left, 20, epsilon, "left margin");
          assert_approx_equals(s.right, 30, epsilon, "right margin");
@ -52,6 +70,21 @@
      }, "Margin properties on mrow (logical)");

      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_true(MathMLFeatureDetection.has_dir());
+          var s = measureSpaceAround("mrow-margin-logical-rtl")
+          assert_approx_equals(s.left, 20, epsilon, "left margin");
+          assert_approx_equals(s.right, 30, epsilon, "right margin");
+          assert_approx_equals(s.top, 40, epsilon, "top margin");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom margin");
+          var b = document.getElementById("mrow-margin-logical-rtl").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 50, epsilon, "element width");
+          assert_approx_equals(b.height, 50, epsilon, "element height");
+      }, "Margin properties on mrow (logical, rtl)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
          var s = measureSpaceAround("mrow-margin-logical-shorthand")
          assert_approx_equals(s.left, 20, epsilon, "left margin");
          assert_approx_equals(s.right, 20, epsilon, "right margin");
@ -82,6 +115,19 @@
      </mrow>
    </math>
  </p>
+  <p>
+    <math dir="rtl">
+      <mrow>
+        <mrow id="mrow-margin-rtl"
+              style="margin-left: 20px;
+                     margin-right: 30px;
+                     margin-top: 40px;
+                     margin-bottom: 50px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
  <p>
    <math>
      <mrow>
@ -105,6 +151,19 @@
      </mrow>
    </math>
  </p>
+  <p>
+    <math dir="rtl">
+      <mrow>
+        <mrow id="mrow-margin-logical-rtl"
+              style="margin-inline-start: 20px;
+                     margin-inline-end: 30px;
+                     margin-block-start: 40px;
+                     margin-block-end: 50px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
  <p>
    <math>
      <mrow>
--- a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-002.html
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-002.html
@ -22,6 +22,7 @@
            continue;

        var style = "margin-left: 30px; margin-right: 40px;  margin-top: 50px; margin-bottom: 60px;";
+        var styleRTL = `direction: rtl; ${style}`;

        if (FragmentHelper.isEmpty(tag)) {
            test(function() {
@ -39,6 +40,14 @@
            assert_approx_equals(s.top_delta, 50, epsilon, "top margin");
            assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom margin");
        }, `Margin properties on ${tag}`);
+
+        test(function() {
+            var s = compareSpaceWithAndWithoutStyle(tag, styleRTL);
+            assert_approx_equals(s.left_delta, 30, epsilon, "left margin");
+            assert_approx_equals(s.right_delta, 40, epsilon, "right margin");
+            assert_approx_equals(s.top_delta, 50, epsilon, "top margin");
+            assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom margin");
+        }, `Margin properties on ${tag} (rtl)`);
    }

    done();
--- a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-001.html
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-001.html
@ -16,6 +16,7 @@

  function runTests() {
      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
          var s = measureSpaceAround("mrow-padding")
          assert_approx_equals(s.left, 20, epsilon, "left padding");
          assert_approx_equals(s.right, 30, epsilon, "right padding");
@ -28,6 +29,21 @@
      }, "Padding properties on mrow");

      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_true(MathMLFeatureDetection.has_dir());
+          var s = measureSpaceAround("mrow-padding-rtl")
+          assert_approx_equals(s.left, 20, epsilon, "left padding");
+          assert_approx_equals(s.right, 30, epsilon, "right padding");
+          assert_approx_equals(s.top, 40, epsilon, "top padding");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom padding");
+          var b = document.getElementById("mrow-padding-rtl").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
+          assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
+      }, "Padding properties on mrow (rtl)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
          var s = measureSpaceAround("mrow-padding-shorthand")
          assert_approx_equals(s.left, 20, epsilon, "left padding");
          assert_approx_equals(s.right, 20, epsilon, "right padding");
@ -40,6 +56,7 @@
      }, "Padding properties on mrow (shorthand)");

      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
          var s = measureSpaceAround("mrow-padding-logical")
          assert_approx_equals(s.left, 20, epsilon, "left padding");
          assert_approx_equals(s.right, 30, epsilon, "right padding");
@ -52,6 +69,21 @@
      }, "Padding properties on mrow (logical)");

      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_true(MathMLFeatureDetection.has_dir());
+          var s = measureSpaceAround("mrow-padding-logical-rtl")
+          assert_approx_equals(s.left, 30, epsilon, "left padding");
+          assert_approx_equals(s.right, 20, epsilon, "right padding");
+          assert_approx_equals(s.top, 40, epsilon, "top padding");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom padding");
+          var b = document.getElementById("mrow-padding-logical-rtl").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
+          assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
+      }, "Padding properties on mrow (logical, rtl)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
          var s = measureSpaceAround("mrow-padding-logical-shorthand")
          assert_approx_equals(s.left, 20, epsilon, "left padding");
          assert_approx_equals(s.right, 20, epsilon, "right padding");
@ -82,6 +114,19 @@
      </mrow>
    </math>
  </p>
+  <p>
+    <math dir="rtl">
+      <mrow>
+        <mrow id="mrow-padding-rtl"
+              style="padding-left: 20px;
+                     padding-right: 30px;
+                     padding-top: 40px;
+                     padding-bottom: 50px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
  <p>
    <math>
      <mrow>
@ -105,6 +150,19 @@
      </mrow>
    </math>
  </p>
+  <p>
+    <math dir="rtl">
+      <mrow>
+        <mrow id="mrow-padding-logical-rtl"
+              style="padding-inline-start: 20px;
+                     padding-inline-end: 30px;
+                     padding-block-start: 40px;
+                     padding-block-end: 50px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
  <p>
    <math>
      <mrow>
--- a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-002.html
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-002.html
@ -22,6 +22,7 @@
            continue;

        var style = "padding-left: 30px; padding-right: 40px;  padding-top: 50px; padding-bottom: 60px;";
+        var styleRTL = `direction: rtl; ${style}`;

        if (FragmentHelper.isEmpty(tag)) {
            test(function() {
@ -39,6 +40,14 @@
            assert_approx_equals(s.top_delta, 50, epsilon, "top padding");
            assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom padding");
        }, `Padding properties on ${tag}`);
+
+        test(function() {
+            var s = compareSpaceWithAndWithoutStyle(tag, styleRTL);
+            assert_approx_equals(s.left_delta, 30, epsilon, "left padding");
+            assert_approx_equals(s.right_delta, 40, epsilon, "right padding");
+            assert_approx_equals(s.top_delta, 50, epsilon, "top padding");
+            assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom padding");
+        }, `Padding properties on ${tag} (rtl)`);
    }

    done();
--- a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-001.html
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-001.html
@ -11,7 +11,7 @@
  <p>This test passes if you see a purple square of side 100px, surrounded by a
    10px blue padding, surrounded by a 10px blue/yellow dashed border, itself
    surrounded by a 10px pink margin.</p>
-  <div style="background: pink; position: absolute; left: 200px; left: 10px; top: 3em;">
+  <div style="background: pink; position: absolute; left: 10px; top: 3em;">
    <math>
      <mrow style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px;">
        <mspace width="100px" height="100px" style="background: purple;"></mspace>