LayoutTests/transitions/shorthand-border-transitions.html

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