third_party/WebKit/LayoutTests/fast/css-intrinsic-dimensions/height-property-value.html

   1 <!doctype html>
   2 <!--
   3     Tests that the height keywords are respected by the parser.
   4 -->
   5 <script src="../../resources/js-test.js"></script>
   6
   7 <div style="height: -webkit-min-content; min-height: -webkit-min-content; max-height: -webkit-min-content;" expected-data="-webkit-min-content"></div>
   8 <div style="height: -webkit-max-content; min-height: -webkit-max-content; max-height: -webkit-max-content;" expected-data="-webkit-max-content"></div>
   9 <div style="height: -webkit-fill-available; min-height: -webkit-fill-available; max-height: -webkit-fill-available;" expected-data="-webkit-fill-available"></div>
  10 <div style="height: -webkit-fit-content; min-height: -webkit-fit-content; max-height: -webkit-fit-content;" expected-data="-webkit-fit-content"></div>
  11
  12 <div style="height: min-content; min-height: min-content; max-height: min-content;" expected-data="min-content"></div>
  13 <div style="height: max-content; min-height: max-content; max-height: max-content;" expected-data="max-content"></div>
  14 <div style="height: fit-content; min-height: fit-content; max-height: fit-content;" expected-data="fit-content"></div>
  15
  16 <script>
  17     description('Tests that the height keywords are parsed.');
  18
  19     var divs = document.querySelectorAll('div[expected-data]');
  20     for (var i = 0; i < divs.length; ++i) {
  21         shouldBe('divs[i].style.height', 'divs[i].getAttribute("expected-data")');
  22         shouldBe('divs[i].style.minHeight', 'divs[i].getAttribute("expected-data")');
  23         shouldBe('divs[i].style.maxHeight', 'divs[i].getAttribute("expected-data")');
  24     }
  25
  26     var KEYWORDS = ['-webkit-min-content', '-webkit-max-content', '-webkit-fill-available',  '-webkit-fit-content',
  27         'min-content', 'max-content', 'fit-content'];
  28     var div;
  29
  30     KEYWORDS.forEach(function(keyword) {
  31         div = document.createElement('div');
  32         div.style.height = keyword;
  33         div.style.minHeight = keyword;
  34         div.style.maxHeight = keyword;
  35         shouldBe('div.style.height', '"' + keyword + '"');
  36         shouldBe('div.style.minHeight', '"' + keyword + '"');
  37         shouldBe('div.style.maxHeight', '"' + keyword + '"');
  38     });
  39
  40 </script>
  41