LayoutTests/transitions/shorthand-border-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: gray;
  14       border: 0px solid rgb(0, 0, 0);
  15       -webkit-transition: border 1s linear;
  16     }
  17
  18     #box.final {
  19       border: 20px dashed rgb(255, 0, 255);
  20     }
  21
  22     #box1 {
  23       height: 100px;
  24       width: 100px;
  25       margin: 10px;
  26       background-color: gray;
  27       border: 0px solid rgb(0, 0, 0);
  28       -webkit-transition: border-width 1s linear;
  29     }
  30
  31     #box1.final {
  32       border: 20px solid rgb(255, 0, 255);
  33     }
  34
  35     #box2 {
  36       height: 100px;
  37       width: 100px;
  38       margin: 10px;
  39       background-color: gray;
  40       border: 0px solid rgb(0, 0, 0);
  41       -webkit-transition: border 1s linear;
  42     }
  43
  44     #box2.final {
  45       border-width: 20px;
  46       border-bottom-width: 40px;
  47     }
  48   </style>
  49   <script src="transition-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  50   <script type="text/javascript" charset="utf-8">
  51
  52     const expectedValues = [
  53       // [time, element-id, property, expected-value, tolerance]
  54       // color and width of each side should be animating
  55       [0.5, 'box', 'border-top-color', [128, 0, 128], 10],
  56       [0.5, 'box', 'border-right-color', [128, 0, 128], 10],
  57       [0.5, 'box', 'border-bottom-color', [128, 0, 128], 10],
  58       [0.5, 'box', 'border-left-color', [128, 0, 128], 10],
  59       [0.5, 'box', 'border-top-width', 10, 1],
  60       [0.5, 'box', 'border-right-width', 10, 1],
  61       [0.5, 'box', 'border-bottom-width', 10, 1],
  62       [0.5, 'box', 'border-left-width', 10, 1],
  63
  64       // only border-width should be animating
  65       [0.5, 'box1', 'border-top-width', 10, 1],
  66       [0.5, 'box1', 'border-top-color', [255, 0, 255], 0],  // initial value
  67
  68       // border-width should be animating
  69       [0.5, 'box2', 'border-top-width', 10, 1],
  70       [0.5, 'box2', 'border-bottom-width', 20, 1],
  71     ];
  72
  73     function setupTest()
  74     {
  75       var box = document.getElementById('box');
  76       box.className = 'final';
  77
  78       var box1 = document.getElementById('box1');
  79       box1.className = 'final';
  80
  81       var box2 = document.getElementById('box2');
  82       box2.className = 'final';
  83     }
  84
  85     runTransitionTest(expectedValues, setupTest, false);
  86   </script>
  87 </head>
  88 <body>
  89
  90 <p>
  91   Tests transitions of the border shorthand properties.
  92 </p>
  93 <div id="box"></div>
  94 <div id="box1"></div>
  95 <div id="box2"></div>
  96
  97 <div id="result">
  98 </div>
  99 </body>
 100 </html>