layout/base/tests/test_bug435293-scale.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=435293
   5 -->
   6 <head>
   7   <title>Test for Bug 435293</title>
   8   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   9   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
  10
  11   <style>
  12     .test {
  13       background: green;
  14       height: 100px;
  15       width: 100px;
  16     }
  17     #test1 {
  18       transform: scalex(0.5);
  19     }
  20     #test2 {
  21       transform: scaley(0.5);
  22     }
  23     #test3 {
  24       transform: scale(0.5, 0.5);
  25     }
  26     #test4 {
  27       transform: scale(0.5, 0.5, 0.5);
  28     }
  29     #test5 {
  30       transform: scale(80%, none);
  31     }
  32     #test6 {
  33       transform: scale(640000, 0.0000000000000000001);
  34     }
  35     #test7 {
  36       transform: scale(2em, 4px);
  37     }
  38   </style>
  39 </head>
  40 <body>
  41 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=435293">Mozilla Bug 435293</a>
  42 <p id="display"></p>
  43 <div id="content">
  44   <div id="test1" class="test">
  45     test
  46   </div>
  47   <p id="test2" class="test">
  48     test
  49   </p>
  50   <div id="test3" class="test">
  51     test
  52   </div>
  53   <div id="test4" class="test">
  54     test
  55   </div>
  56   <div id="test5" class="test">
  57     test
  58   </div>
  59   <div id="test6" class="test">
  60     test
  61   </div>
  62   <div id="test7" class="test">
  63     test
  64   </div>
  65 </div>
  66
  67 <pre id="test">
  68 <script type="application/javascript">
  69 runtests();
  70
  71 function runtests() {
  72   var style = window.getComputedStyle(document.getElementById("test1"));
  73   is(style.getPropertyValue("transform"), "matrix(0.5, 0, 0, 1, 0, 0)",
  74      "Scalex proper matrix is applied");
  75
  76   style = window.getComputedStyle(document.getElementById("test2"));
  77   is(style.getPropertyValue("transform"), "matrix(1, 0, 0, 0.5, 0, 0)",
  78      "Scaley proper matrix is applied");
  79
  80   style = window.getComputedStyle(document.getElementById("test3"));
  81   is(style.getPropertyValue("transform"), "matrix(0.5, 0, 0, 0.5, 0, 0)",
  82      "Scale proper matrix is applied");
  83
  84   style = window.getComputedStyle(document.getElementById("test4"));
  85   is(style.getPropertyValue("transform"), "none",
  86      "Three dimensional scale should be ignored");
  87
  88   style = window.getComputedStyle(document.getElementById("test5"));
  89   is(style.getPropertyValue("transform"), "none",
  90      "Percent values in scale should be ignored");
  91
  92   style = window.getComputedStyle(document.getElementById("test6"));
  93   is(style.getPropertyValue("transform"), "matrix(640000, 0, 0, 1e-19, 0, 0)",
  94      "Ensure wacky values are accepted");
  95
  96   style = window.getComputedStyle(document.getElementById("test7"));
  97   is(style.getPropertyValue("transform"), "none",
  98      "No unit values allowed in scale");
  99 }
 100 </script>
 101 </pre>
 102 </body>
 103 </html>