[css-grid] Unprefix CSS Grid Layout properties
[WebKit-https.git] / LayoutTests / css3 / calc / simple-minmax.html
1 <!DOCTYPE HTML>
2 <style>
3 .width-test {
4     height: 100px;
5     width: 256px;
6     background-color: red;
7 }
8
9 .height-test {
10     width: 100px;
11     height: 50px;
12     background-color: red;
13 }
14 </style>
15
16 <p>
17   All boxes below should be 100px * 100px and green.
18 </p>
19
20 <div id="test">
21
22 <div class="width-test" style="width: -webkit-min(100px);">min(100px)</div>
23 <div class="width-test" style="width: -webkit-min( 100px );">min( 100px )</div>
24 <div class="width-test" style="width: -webkit-min((((100px))));">min((((100px))))</div>
25 <div class="width-test" style="width: -webkit-min(150px,100px);">min(150px,100px)</div>
26 <div class="width-test" style="width: -webkit-min(150px,100px,200px);">min(150px,100px,200px)</div>
27 <div class="width-test" style="width: -webkit-min(  150px ,  100px  ,200px);">min(  150px  ,  100px  ,200px)</div>
28 <div class="width-test" style="width: -webkit-min(90px + 50px ,100px);">min(90px + 50px ,100px)</div>
29 <div style="width: 200px; background-color: white;" class="wrapper">
30   <div class="width-test" style="width: -webkit-min(100%,100px);">min(100%,100px) - where 100% is 200px</div>
31 </div>
32 <div style="width: 200px; background-color: white;" class="wrapper">
33   <div class="width-test" style="width: -webkit-min(100px,100%);">min(100px,100%) - where 100% is 200px</div>
34 </div>
35
36 <div class="width-test" style="width: -webkit-max(100px);">max(100px)</div>
37 <div class="width-test" style="width: -webkit-max(50px,100px);">max(50px,100px)</div>
38 <div class="width-test" style="width: -webkit-max(50px,100px,20px);">max(50px,100px,20px)</div>
39 <div class="width-test" style="width: -webkit-max(120px - 50px,100px);">max(120px - 50px,100px)</div>
40 <div style="width: 50px; background-color: white;" class="wrapper">
41   <div class="width-test" style="width: -webkit-max(100%,100px);">max(100%,100px) - where 100% is 50px</div>
42 </div>
43 <div style="width: 50px; background-color: white;" class="wrapper">
44   <div class="width-test" style="width: -webkit-max(100px,100%);">max(100px,100%) - where 100% is 50px</div>
45 </div>
46
47 <div class="height-test" style="height: -webkit-min(200px, 100px);">min(200px,100px)</div>
48
49 </div>
50
51 <script>
52 if (window.testRunner)
53     testRunner.dumpAsText();
54
55 var test = document.getElementById("test");
56 for (var child = test.firstChild; child; child = child.nextSibling) {
57     var element = child;
58     if (element.className == "wrapper") {
59         element = element.firstChild;
60         while (element.tagName != "DIV") element = element.nextSibling;
61     }
62
63     var width = element.offsetWidth;
64     var error = [];
65     if (width != 100)
66         error.push("expected width of 100, but was " + width);
67     var height = element.offsetHeight;
68     if (height != 100)
69         error.push("expected height of 100, but was " + height);
70
71     if (error == "") {
72         element.style.backgroundColor = "green";
73         element.innerHTML += " => PASS";
74     } else
75         element.innerHTML += " => FAIL: " + error.join(", ");
76 }
77 </script>