third_party/WebKit/LayoutTests/css3/calc/transitions.html

   1 <!DOCTYPE html>
   2 <style>
   3 .transitionTest {
   4     background-color: green;
   5     height: 100px;
   6     -webkit-transition: all 1s linear;
   7     -moz-transition: all 1s linear;
   8 }
   9
  10 #startCalcEndCalc, #startCalcEndPx, #startCalcEndPercent {
  11     width: calc(10% + 50px);
  12     width: -moz-calc(10% + 50px);
  13 }
  14
  15 #startPxEndCalc {
  16     width: 100px;
  17 }
  18
  19 #startPercentEndCalc {
  20     width: 20%;
  21 }
  22
  23 #startCalcEndCalc.go, #startPxEndCalc.go, #startPercentEndCalc.go {
  24     width: calc(100% - 100px);
  25     width: -moz-calc(100% - 100px);
  26 }
  27
  28 #startCalcEndPx.go {
  29     width: 400px;
  30 }
  31
  32 #startCalcEndPercent.go {
  33     width: 80%;
  34 }
  35 </style>
  36
  37 This tests that transitions containing calc() expressions transition correctly.
  38 <div style="width:500px; border: 1px solid black;">
  39     <div class="transitionTest" id="startCalcEndCalc"></div>
  40     <div class="transitionTest" id="startPxEndCalc"></div>
  41     <div class="transitionTest" id="startPercentEndCalc"></div>
  42     <div class="transitionTest" id="startCalcEndPx"></div>
  43     <div class="transitionTest" id="startCalcEndPercent"></div>
  44 </div>
  45 <div id="result"></div>
  46
  47 <script src="../../animations/resources/animation-test-helpers.js"></script>
  48 <script>
  49
  50 const tests = ["startCalcEndCalc", "startPxEndCalc", "startPercentEndCalc", "startCalcEndPx", "startCalcEndPercent"];
  51
  52 expectedValues = [];
  53
  54 for (var i = 0; i < tests.length; i++) {
  55     expectedValues = expectedValues.concat([[0.25, tests[i], 'width', 175, 2]]);
  56     expectedValues = expectedValues.concat([[0.5, tests[i], 'width', 250, 2]]);
  57     expectedValues = expectedValues.concat([[0.75, tests[i], 'width', 325, 2]]);
  58     expectedValues = expectedValues.concat([[1.0, tests[i], 'width', 400, 2]]);
  59 }
  60
  61 function initialize(id)
  62 {
  63     var expectedStartWidth = 100;
  64     var element = document.getElementById(id);
  65     var width = element.offsetWidth;
  66     if (width == expectedStartWidth)
  67         result += 'PASS - "width" property for "' + id +'" element at 0.0s was: ' + width + '<br>';
  68     else
  69         result += 'FAIL  - "width" property for "' + id +'" element at 0.0s expected: ' + expectedStartWidth + ' but saw: ' + width + '<br>';
  70
  71     element.className += " go";
  72 }
  73
  74 function setupTest()
  75 {
  76     for (var i = 0; i < tests.length; i++)
  77         initialize(tests[i]);
  78 }
  79
  80 runTransitionTest(expectedValues, setupTest, undefined, false /* pixel test */);
  81
  82 </script>