third_party/WebKit/LayoutTests/fast/table/css-table-max-width.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style type="text/css">
   5 .parent
   6 {
   7     width:300px;
   8     border:1px solid green;
   9 }
  10
  11 .parent .child
  12 {
  13     background-color:#999999;
  14     border:1px solid yellow;
  15 }
  16 </style>
  17 <script src="../../resources/js-test.js"></script>
  18 </head>
  19 <body>
  20 <div id="container" class="parent">
  21     <div id="maxGreatThanMinWidthAutoLayout" class="child" style="display:table; min-width:100px; max-width:200px; width:100%;">
  22         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  23         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  24         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  25         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
  26         fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa
  27         qui officia deserunt mollit anim id est laborum.
  28     </div>
  29     <div id="minGreatThanMaxWidthAutoLayout" class="child" style="display:table; min-width:200px; max-width:100px; width:100%;">
  30         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  31         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  32         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  33         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
  34         fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa
  35         qui officia deserunt mollit anim id est laborum.
  36     </div>
  37     <div id="onlyMaxWidthAutoLayout" class="child" style="display:table; max-width:200px; width:100%;">
  38         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  39         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  40         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  41         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
  42         fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa
  43         qui officia deserunt mollit anim id est laborum.
  44     </div>
  45     <div id="maxWidthZeroAutoLayout" class="child" style="display:table; max-width:0; width:100%; font: 10px/1 Ahem;">
  46         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  47         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  48         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  49         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
  50         fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa
  51         qui officia deserunt mollit anim id est laborum.
  52     </div>
  53         <div id="maxGreatThanMinWidthFixedLayout" class="child" style="display:table; table-layout:fixed; min-width:100px; max-width:200px; width:100%;">
  54         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  55         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  56         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  57         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
  58         fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa
  59         qui officia deserunt mollit anim id est laborum.
  60     </div>
  61     <div id="minGreatThanMaxWidthFixedLayout" class="child" style="display:table; table-layout:fixed; min-width:200px; max-width:100px; width:100%;">
  62         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  63         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  64         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  65         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
  66         fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa
  67         qui officia deserunt mollit anim id est laborum.
  68     </div>
  69     <div id="onlyMaxWidthFixedLayout" class="child" style="display:table; table-layout:fixed; max-width:200px; width:100%;">
  70         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  71         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  72         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  73         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
  74         fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa
  75         qui officia deserunt mollit anim id est laborum.
  76     </div>
  77     <div id="maxWidthZeroFixedLayout" class="child" style="display:table; table-layout:fixed; max-width:0; width:100%;">
  78         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  79         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  80         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  81         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
  82         fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa
  83         qui officia deserunt mollit anim id est laborum.
  84     </div>
  85 </div>
  86 <script>
  87 description('Test case for bug <a href="http://webkit.org/b/98455">http://webkit.org/b/98455</a>. The testcase checks \
  88 if the max-width property overrides the computed width of a html container with display:table.<br> \
  89 A html container with display:table should not exceed the max-width even if its calculated \
  90 width is greater than the max-width value.<br>However when min-width property is set and its value is greated than \
  91 the max-width value, the width of the container must be equal to the min-width value.');
  92 debug('Note:The width of the css tables inclusive of its border width.<br>');
  93 maxGreatThanMinWidthAutoLayout = document.getElementById("maxGreatThanMinWidthAutoLayout");
  94 shouldBe("maxGreatThanMinWidthAutoLayout.getBoundingClientRect().width","202");
  95 minGreatThanMaxWidthAutoLayout = document.getElementById("minGreatThanMaxWidthAutoLayout");
  96 shouldBe("minGreatThanMaxWidthAutoLayout.getBoundingClientRect().width","202");
  97 onlyMaxWidthAutoLayout = document.getElementById("onlyMaxWidthAutoLayout");
  98 shouldBe("onlyMaxWidthAutoLayout.getBoundingClientRect().width","202");
  99 maxWidthZeroAutoLayout = document.getElementById("maxWidthZeroAutoLayout");
 100 shouldBe("maxWidthZeroAutoLayout.getBoundingClientRect().width","182");
 101 maxGreatThanMinWidthFixedLayout = document.getElementById("maxGreatThanMinWidthFixedLayout");
 102 shouldBe("maxGreatThanMinWidthFixedLayout.getBoundingClientRect().width","202");
 103 minGreatThanMaxWidthFixedLayout = document.getElementById("minGreatThanMaxWidthFixedLayout");
 104 shouldBe("minGreatThanMaxWidthFixedLayout.getBoundingClientRect().width","202");
 105 onlyMaxWidthFixedLayout = document.getElementById("onlyMaxWidthFixedLayout");
 106 shouldBe("onlyMaxWidthFixedLayout.getBoundingClientRect().width","202");
 107 maxWidthZeroFixedLayout = document.getElementById("maxWidthZeroFixedLayout");
 108 shouldBe("maxWidthZeroFixedLayout.getBoundingClientRect().width","2");
 109
 110 document.body.removeChild(document.getElementById('container'));
 111 </script>
 112 <body>
 113 </html>