summaryrefslogtreecommitdiffstats
path: root/layout/mathml/tests/test_bug975681.html
blob: 854693eada59fa8fc2e981e21dc3ae9cf4cad79e (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=975681
-->
  <head>
    <meta charset="utf-8">
    <title> Test for Bug 975681 </title>
    <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"> </script>
    <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"> </script>
    <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  </head>
  <body>
  <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=975681"> Mozilla Bug 975681 </a>
  <p id="display"></p>
    
  <p>
    <math>
      <mfrac id="test_mfrac">
        <mspace width="100px" height="20px" mathbackground="red"></mspace>
        <mspace width="100px" height="20px" mathbackground="red"></mspace>
      </mfrac>
    </math>
  </p>
  
  <p>
    <math>
      <mfrac linethickness="30px" id="mfrac_linethickness">
        <mspace width="100px" height="20px" mathbackground="red"></mspace>
        <mspace width="100px" height="20px" mathbackground="red"></mspace>
      </mfrac>
    </math>
  </p>
  
  <p>
    <math>
      <mfrac numalign="left" id="mfrac_numalign">
        <mspace width="50px" height="20px" mathbackground="red"></mspace>
        <mspace width="100px" height="20px" mathbackground="red"></mspace>
      </mfrac>
    </math>
  </p>
  
  <p>
    <math>
      <mfrac denomalign="right" id="mfrac_denomalign">
        <mspace width="100px" height="20px" mathbackground="red"></mspace>
        <mspace width="50px" height="20px" mathbackground="red"></mspace>
      </mfrac>
    </math>
  </p>
  
  <p>
    <math>
      <mfrac bevelled="true" id="mfrac_bevelled">
        <mspace width="100px" height="20px" mathbackground="red"></mspace>
        <mspace width="100px" height="20px" mathbackground="red"></mspace>
      </mfrac>
    </math>
  </p>
  
  <pre id="test">
  <script type="application/javascript">
      
    /** Test for Bug 975681 **/
    SimpleTest.waitForExplicitFinish();
     
    var epsilon = 1; // allow a small relative error
    var delta = .25;  // used to indicate a small shift
    
    function almostEqualAbs(x, y) {
      var e = Math.abs(x - y);
      return (e <= epsilon);
    }
    
    function almostLessThanAbs(x, y) {
      var e = x - y;
      return (e <= epsilon);
    }
    
    // test: mfrac
    var mfracNum = document.getElementById("test_mfrac").firstElementChild.getBoundingClientRect();
    var mfracDenom = document.getElementById("test_mfrac").lastElementChild.getBoundingClientRect();
    
    ok(almostEqualAbs(mfracNum.left, mfracDenom.left) && 
      almostEqualAbs(mfracNum.right, mfracDenom.right), "Numerator and denominator should be vertical aligned");
    
    ok(almostLessThanAbs(mfracNum.bottom, mfracDenom.top), "Numerator should be above denominator");
    
    // test: mfrac attributes
    var mfrac = document.getElementById("mfrac_linethickness").getBoundingClientRect();
    var num = document.getElementById("mfrac_linethickness").firstElementChild.getBoundingClientRect();
    var denom = document.getElementById("mfrac_linethickness").lastElementChild.getBoundingClientRect();
    
    ok(almostLessThanAbs(num.height + 30 + denom.height, mfrac.height) && 
      almostLessThanAbs(num.bottom + 30, denom.top), "numerator and denominator should be separated by linethickness");
    
    num = document.getElementById("mfrac_numalign").firstElementChild.getBoundingClientRect();
    mfrac = document.getElementById("mfrac_numalign").getBoundingClientRect();
    
    ok(almostEqualAbs(num.left, mfrac.left), "numerator should be aligned left");
      
    mfrac = document.getElementById("mfrac_denomalign").getBoundingClientRect();
    denom = document.getElementById("mfrac_denomalign").lastElementChild.getBoundingClientRect();
    
    ok(almostEqualAbs(mfrac.right, denom.right), "denominator should be aligned right");
      
    num = document.getElementById("mfrac_bevelled").firstElementChild.getBoundingClientRect();
    denom = document.getElementById("mfrac_bevelled").lastElementChild.getBoundingClientRect();
    
    ok(almostLessThanAbs(num.right, denom.left) && 
      almostLessThanAbs(num.top*(1-delta)+num.bottom*delta, denom.top), "incorrect position of mfrac children");
    
    SimpleTest.finish();
    
  </script>
  </body>
</html>