LayoutTests/transitions/shorthand-transitions.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   7   <title>Test shorthand transitions</title>
   8   <style type="text/css" media="screen">
   9     #box {
  10       height: 100px;
  11       width: 100px;
  12       margin: 10px;
  13       background-color: white;
  14       outline-color: black;
  15       -webkit-transition-property: padding, margin, outline, background, -webkit-border-radius, -webkit-transform-origin;
  16       -webkit-transition-duration: 1s;
  17       -webkit-transition-timing-function: linear;
  18       -webkit-transform-origin: bottom left;
  19     }
  20
  21     #box.final {
  22       padding: 10px;
  23       margin: 40px;
  24       outline: 10px solid rgb(255, 0, 255);
  25       background-color: blue;
  26       -webkit-border-radius: 20px;
  27       -webkit-transform-origin: top right;
  28     }
  29
  30   </style>
  31   <script src="transition-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  32   <script type="text/javascript" charset="utf-8">
  33
  34     const expectedValues = [
  35       // [time, element-id, property, expected-value, tolerance]
  36       // The transition takes 1 second, so we compute tolerance to allow
  37       // 10% or 100ms variance, (endValue - startValue) / 10.
  38       [0.5, 'box', 'padding-top', 5, 1],
  39       [0.5, 'box', 'margin-top', 25, 3],
  40       [0.5, 'box', 'outline-color', [128, 0, 128], 26],
  41       [0.5, 'box', 'background-color', [128, 128, 255], 26],
  42       [0.5, 'box', '-webkit-border-top-right-radius', 10, 2],
  43       [0.5, 'box', '-webkit-transform-origin', [50, 50], 10],
  44     ];
  45
  46     function setupTest()
  47     {
  48       var box = document.getElementById('box');
  49       box.className = 'final';
  50     }
  51
  52     // We can't use the pause API because it only works for individual properties, and
  53     // -webkit-transform-origin is a compound property.
  54     runTransitionTest(expectedValues, setupTest, false);
  55   </script>
  56 </head>
  57 <body>
  58
  59 <p>
  60 Tests transitions of the shorthand properties padding, margin, outline, background, -webkit-border-radius.
  61 </p>
  62 <div id="box"></div>
  63
  64 <div id="result">
  65 </div>
  66 </body>
  67 </html>