testing/web-platform/tests/css/css-values/getComputedStyle-calc-mixed-units-001.html

   1 <!DOCTYPE html>
   2
   3   <meta charset="UTF-8">
   4
   5   <title>CSS Values Test: computed value of 3 calc() values</title>
   6
   7
   8   <!--
   9   "
  10   Where percentages are not resolved at computed-value time,
  11   they are not resolved in math functions, e.g.
  12   'calc(100% - 100% + 1px)' resolves to 'calc(0% + 1px)', not to
  13   '1px'. If there are special rules for computing percentages
  14   in a value (e.g. the 'height' property), they apply whenever
  15   a math function contains percentages.
  16   "
  17   § 10.11 Computed Value
  18   https://www.w3.org/TR/css-values-4/#calc-computed-value
  19   -->
  20
  21   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
  22   <link rel="help" href="https://www.w3.org/TR/css-values-4/#calc-computed-value">
  23
  24   <meta name="flags" content="">
  25   <meta content="This test verifies that terms with a percentage unit that can not be resolved at computed-value time will require a calc() wrapper. A term with an em value, on the other hand, must be resolved at computed-value time and therefore must be absolutized to 'px'." name="assert">
  26
  27   <script src="/resources/testharness.js"></script>
  28
  29   <script src="/resources/testharnessreport.js"></script>
  30
  31   <style>
  32   html, body
  33     {
  34       font-size: 16px;
  35       height: 570px;
  36     }
  37
  38   div#target
  39     {
  40       background-color: yellow;
  41       background-image: url("support/cat.png");
  42       background-position: top center;
  43       background-repeat: no-repeat;
  44       background-size: 14% 50%; /* entirely arbitrary and random background-size values */
  45       height: 200px;
  46     }
  47   </style>
  48
  49   <div id="target"></div>
  50
  51   <script>
  52   function startTesting()
  53   {
  54
  55   var targetElement = document.getElementById("target");
  56
  57     function verifyComputedStyle(property_name, specified_value, expected_value)
  58     {
  59
  60     test(function()
  61       {
  62
  63       targetElement.style.setProperty(property_name, specified_value);
  64
  65       assert_equals(getComputedStyle(targetElement)[property_name], expected_value);
  66
  67       }, `testing ${property_name}: ${specified_value}`);
  68     }
  69
  70     verifyComputedStyle("background-size", "calc(67% - 54% + 4em) 50%", "calc(13% + 64px) 50%");
  71
  72     /*
  73     "Where percentages are not resolved at computed-value time,
  74     they are not resolved in math functions (...)"
  75     https://www.w3.org/TR/css-values-4/#calc-serialize
  76
  77     Therefore here, the percentage is preserved and
  78     a calc() wrapper must be used. The 4em term
  79     must be resolved though.
  80     */
  81
  82     verifyComputedStyle("background-position", "calc(100% - 100% + 20em)", "calc(0% + 320px) 50%");
  83
  84     /*
  85     Here too, the percentage is preserved and
  86     a calc() wrapper must be used. The 20em term
  87     must be resolved though.
  88     */
  89
  90
  91     verifyComputedStyle("height", "calc(60% - 50% + 3em)", "105px");
  92
  93     /*
  94
  95     The height of the containing block of div#target is not auto.
  96     So, such percentage can and must be resolved at
  97     computed-value time.
  98
  99      570px mult 10% == 57px
 100
 101                  +     48px
 102                  ============
 103                       105px
 104
 105     */
 106   }
 107
 108   startTesting();
 109
 110   </script>