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