From e3c81e70a9d0b2578692f420e96ba30c6eae1848 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= <fwang@igalia.com>
Date: Wed, 27 May 2020 17:07:39 +0200
Subject: [PATCH] mpadded: verify allow pseudo-units relying on orthogonal
 metrics are forbidden

See https://github.com/mathml-refresh/mathml/issues/81
---
 .../legacy-orthogonal-pseudo-units.html       | 101 ++++++++++++++++++
 1 file changed, 101 insertions(+)
 create mode 100644 mathml/presentation-markup/mpadded/legacy-orthogonal-pseudo-units.html
diff --git a/mathml/presentation-markup/mpadded/legacy-orthogonal-pseudo-units.html b/mathml/presentation-markup/mpadded/legacy-orthogonal-pseudo-units.html
new file mode 100644
index 00000000000000..3a944ead471dc8
--- /dev/null
+++ b/mathml/presentation-markup/mpadded/legacy-orthogonal-pseudo-units.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Legacy mpadded pseudo-units relying on orthogonal metrics</title>
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#adjust-space-around-content-mpadded">
+<link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.mpadded">
+<meta name="assert" content="Legacy pseudo-units depending on orthogonal metrics">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/layout-comparison.js"></script>
+<style>
+  .testedElement {
+      background: red;
+  }
+</style>
+</head>
+<body>
+  <div id="log"></div>
+
+  <p>
+    <math>
+      <mpadded id="reference">
+        <mspace width="10px" height="20px" depth="30px"
+                style="background: blue"/>
+      </mpadded>
+    </math>
+  </p>
+
+  <p>
+    <!-- width cannot use vertical pseudo-units -->
+    <math>
+      <mpadded class="testedElement" width="200%height">
+        <mspace width="10px" height="20px" depth="30px"
+                style="background: blue"/>
+      </mpadded>
+    </math>
+    <math>
+      <mpadded class="testedElement" width="200%depth">
+        <mspace width="10px" height="20px" depth="30px"
+                style="background: blue"/>
+      </mpadded>
+    </math>
+  </p>
+
+  <p>
+    <!-- lspace cannot use vertical pseudo-units -->
+    <math>
+      <mpadded class="testedElement" lspace="200%height">
+        <mspace width="10px" height="20px" depth="30px"
+                style="background: blue"/>
+      </mpadded>
+    </math>
+    <math>
+      <mpadded class="testedElement" lspace="200%depth">
+        <mspace width="10px" height="20px" depth="30px"
+                style="background: blue"/>
+      </mpadded>
+    </math>
+  </p>
+  <p>
+    <!-- height cannot use horizontal pseudo-units -->
+    <math>
+      <mpadded class="testedElement" height="200%width">
+        <mspace width="10px" height="20px" depth="30px"
+                style="background: blue"/>
+      </mpadded>
+    </math>
+  </p>
+  <p>
+    <!-- depth cannot use horizontal pseudo-units -->
+    <math>
+      <mpadded class="testedElement" depth="200%width">
+        <mspace width="10px" height="20px" depth="30px"
+                style="background: blue"/>
+      </mpadded>
+    </math>
+  </p>
+  <p>
+    <!-- voffset cannot use horizontal pseudo-units -->
+    <math>
+      <mpadded class="testedElement" voffset="200%width">
+        <mspace width="10px" height="20px" depth="30px"
+                style="background: blue"/>
+      </mpadded>
+    </math>
+  </p>
+<script type="text/javascript">
+  Array.from(document.getElementsByClassName("testedElement")).forEach(mpadded => {
+      var reference = document.getElementById("reference");
+      const name = ["width", "depth", "height", "lspace", "voffset"].find(attr => mpadded.hasAttribute(attr));
+      const epsilon = 1;
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          compareLayout(mpadded, reference, epsilon);
+      }, `${mpadded.getAttribute(name)} is not allowed on ${name}`);
+  });
+</script>
+</body>
+</html>
