layout/mathml/tests/mixing.xml
author dbaron@dbaron.org
Thu, 15 Nov 2007 10:10:31 -0800
changeset 8046 e322bd55cd3d49a39124093d8a3be11277b2a77d
parent 1 9b2a99adc05e53cd4010de512f50118594756650
child 32521 ddcadd5761432adf3d5f495792ab096bd4babc5d
permissions -rw-r--r--
Rename new width keywords to match CSS WG decision. b=402706 r+sr=bzbarsky a=blocking1.9+

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
  "http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd"
[
  <!ENTITY mathml "http://www.w3.org/1998/Math/MathML">
]>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:html="http://www.w3.org/1999/xhtml"
      xmlns:math="http://www.w3.org/1998/Math/MathML"
      xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 
>
<!-- ***** BEGIN LICENSE BLOCK *****
   - Version: MPL 1.1/GPL 2.0/LGPL 2.1
   -
   - The contents of this file are subject to the Mozilla Public License Version
   - 1.1 (the "License"); you may not use this file except in compliance with
   - the License. You may obtain a copy of the License at
   - http://www.mozilla.org/MPL/
   -
   - Software distributed under the License is distributed on an "AS IS" basis,
   - WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
   - for the specific language governing rights and limitations under the
   - License.
   -
   - The Original Code is Mozilla MathML Project.
   -
   - The Initial Developer of the Original Code is
   - The University of Queensland.
   - Portions created by the Initial Developer are Copyright (C) 1999
   - the Initial Developer. All Rights Reserved.
   -
   - Contributor(s):
   -   Roger B. Sidje <rbs@maths.uq.edu.au>
   -
   - Alternatively, the contents of this file may be used under the terms of
   - either the GNU General Public License Version 2 or later (the "GPL"), or
   - the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
   - in which case the provisions of the GPL or the LGPL are applicable instead
   - of those above. If you wish to allow use of your version of this file only
   - under the terms of either the GPL or the LGPL, and not to allow others to
   - use your version of this file under the terms of the MPL, indicate your
   - decision by deleting the provisions above and replace them with the notice
   - and other provisions required by the LGPL or the GPL. If you do not delete
   - the provisions above, a recipient may use your version of this file under
   - the terms of any one of the MPL, the GPL or the LGPL.
   -
   - ***** END LICENSE BLOCK ***** -->

<head>
  <title>Mixing MathML with other markup</title>
</head>

<body style="font-size: 18pt; 
      background-color: gold;
      background-image: url(resource:/res/samples/raptor.jpg);
      background-repeat: no-repeat;
      background-attachment: fixed;">

<h2 style="text-align: center; color: blue">
Mixing MathML markups and other markups to get special effects</h2>

<br />

A fraction with the animated throbber as denominator...
View the source...

<math mode="display" xmlns="http://www.w3.org/1998/Math/MathML">
  <mfrac linethickness="3">
    <mi>a</mi>
    <html:img src="chrome://communicator/skin/brand/throbber-anim.gif" />
  </mfrac>
</math>

Fill the gaps in this matrix with input fields
<math mode="display" xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
  <mo>[</mo>
  <mtable>
    <mtr>
      <mtd><mi>a</mi></mtd>
      <mtd><html:input value="?" size="1"/></mtd>
    </mtr>
    <mtr>
      <mtd><html:input value="?" size="1"/></mtd>      
      <mtd><mi>d</mi></mtd>
    </mtr>
  </mtable>
  <mo>]</mo>
</mrow>
</math>
<br />


See the difference of rendering between <br />

<math xmlns="http://www.w3.org/1998/Math/MathML">
<msup>
  <mi fontstyle="italic">jif</mi>
  <mi fontstyle="italic">jif</mi>
</msup>
</math> -- italic MathML &lt;msup&gt; and

<br />

<span><i>jif</i><sup><i>jif</i></sup></span> -- italic HTML &lt;sup&gt;

<br />
<br />

And there could be more...

<div style="text-align: center">
  <button style="background-color:rgb(192,192,192)">
     <span style="color: brown;">
       For example, click this MathML continued fraction inside a HTML button<br />
     </span> 
     <math xmlns="&mathml;">
       <mrow>
         <mfrac>
           <mi>&pi;</mi>
           <mn>4</mn>
         </mfrac>
         <mo>=</mo>
         <mfrac numalign="left">
            <mstyle scriptlevel="0">
              <mn>1</mn>
            </mstyle>
            <mstyle scriptlevel="0">
               <mrow>
                 <mn>2</mn>
                 <mo>+</mo>
                 <mfrac numalign="left">
                   <mstyle scriptlevel="0">
                     <msup><mn>1</mn><mn>2</mn></msup>
                   </mstyle>
                   <mstyle scriptlevel="0">
                      <mrow>
                        <mn>2</mn>
                        <mo>+</mo>
                        <mfrac numalign="left">
                          <mstyle scriptlevel="0">
                            <msup><mn>3</mn><mn>2</mn></msup>
                          </mstyle>               
                          <mstyle scriptlevel="0">
                            <mrow>
                               <mn>2</mn>
                               <mo>+</mo>
                               <mfrac numalign="left">
                                 <mstyle scriptlevel="0">
                                   <msup><mn>5</mn><mn>2</mn></msup>
                                 </mstyle>
                                 <mstyle scriptlevel="0">
                                   <mrow>
                                      <mn>2</mn>
                                      <mo>+</mo>
                                      <mfrac numalign="left">
                                        <mstyle scriptlevel="0">
                                          <msup><mn>7</mn><mn>2</mn></msup>
                                        </mstyle>
                                        <mstyle scriptlevel="0">
                                          <mn>2</mn><mo>+</mo><mo fontweight="bold">...</mo>
                                        </mstyle>
                                      </mfrac>
                                    </mrow>
                                 </mstyle>
                               </mfrac>
                             </mrow>
                          </mstyle>
                        </mfrac>
                      </mrow>
                   </mstyle>
                 </mfrac>      
               </mrow> 
            </mstyle> 
         </mfrac>  
      </mrow>
    </math>
  </button>
</div>

</body>
</html>