|
1 | 1 | <!DOCTYPE html> |
2 | | -<div id="flexContainer" style="display: flex"> |
3 | | - <div id="flexItem"></div> |
4 | | -</div> |
5 | | -<script src="../../resources/js-test.js"></script> |
| 2 | +<script src="../../resources/testharness.js"></script> |
| 3 | +<script src="../../resources/testharnessreport.js"></script> |
| 4 | +<script src="../resources/alignment-parsing-utils-th.js"></script> |
| 5 | +<html> |
| 6 | + <body> |
| 7 | + <p>Test to verify that the new alignment values are parsed as invalid if Grid Layout is disabled and in any case they do not cause a crash because assertions in flexbox layout code.</p> |
| 8 | + <div id="log"></div> |
| 9 | + |
| 10 | + <div id="flexContainer" style="display: flex"> |
| 11 | + <div id="flexItem"></div> |
| 12 | + </div> |
6 | 13 | <script> |
7 | | -description('Test to verify that the new alignment values are parsed as invalid if Grid Layout is disabled and in any case they do not cause a crash because assertions in flexbox layout code.'); |
| 14 | + |
| 15 | +var container = document.getElementById("flexContainer"); |
| 16 | +var item = document.getElementById("flexItem"); |
8 | 17 |
|
9 | 18 | function checkAlignSelfValue(value, computedValue, gridEnabled) |
10 | 19 | { |
11 | 20 | item.style.webkitAlignSelf = value; |
12 | | - alignSelf = getComputedStyle(item, '').getPropertyValue('-webkit-align-self'); |
13 | 21 | if (gridEnabled) |
14 | | - shouldBe("alignSelf", computedValue); |
| 22 | + checkValues(item, "alignSelf", "align-self", value, computedValue); |
15 | 23 | else |
16 | | - shouldBe("alignSelf", "'flex-start'"); |
| 24 | + checkValues(item, "alignSelf", "align-self", "flex-start", "flex-start"); |
17 | 25 | } |
18 | 26 |
|
19 | 27 | function checkAlignItemsValue(value, computedValue, gridEnabled) |
20 | 28 | { |
21 | 29 | container.style.webkitAlignItems = value; |
22 | | - alignItems = getComputedStyle(container, '').getPropertyValue('-webkit-align-items'); |
23 | | - alignSelf = getComputedStyle(item, '').getPropertyValue('-webkit-align-self'); |
24 | 30 | if (gridEnabled) { |
25 | | - shouldBe("alignItems", computedValue); |
26 | | - shouldBe("alignSelf", computedValue); |
| 31 | + checkValues(container, "alignItems", "align-items", value, computedValue); |
| 32 | + checkValues(item, "alignSelf", "align-self", "auto", "auto"); |
27 | 33 | } else { |
28 | | - shouldBe("alignItems", "'flex-end'"); |
29 | | - shouldBe("alignSelf", "'flex-end'"); |
| 34 | + checkValues(container, "alignItems", "align-items", "flex-end", "flex-end"); |
| 35 | + checkValues(item, "alignSelf", "align-self", "auto", "auto"); |
30 | 36 | } |
31 | 37 | } |
32 | 38 |
|
33 | | -function checkAlignmentValues(gridEnabled) |
| 39 | +function checkSelfAlignmentValues(gridEnabled) |
34 | 40 | { |
35 | 41 | if (window.internals) |
36 | | - internals.settings.setCSSGridLayoutEnabled(gridEnabled); |
| 42 | + internals.settings.setCSSGridLayoutEnabled(gridEnabled) |
37 | 43 |
|
38 | | - debug('<br>Testing Self-Alignment values.'); |
39 | | - checkAlignSelfValue("start unsafe", "'start unsafe'", gridEnabled) |
40 | | - checkAlignSelfValue("start", "'start'", gridEnabled) |
41 | | - checkAlignSelfValue("end", "'end'", gridEnabled) |
42 | | - checkAlignSelfValue("flex-start safe", "'flex-start safe'", gridEnabled) |
43 | | - checkAlignSelfValue("self-start", "'self-start'", gridEnabled) |
44 | | - checkAlignSelfValue("self-end", "'self-end'", gridEnabled) |
| 44 | + item.style.webkitAlignSelf = "flex-start"; |
45 | 45 |
|
46 | | - item.style.webkitAlignSelf = "auto"; |
| 46 | + checkAlignSelfValue("start unsafe", "start unsafe", gridEnabled) |
| 47 | + checkAlignSelfValue("start", "start", gridEnabled) |
| 48 | + checkAlignSelfValue("end", "end", gridEnabled) |
| 49 | + checkAlignSelfValue("flex-start safe", "flex-start safe", gridEnabled) |
| 50 | + checkAlignSelfValue("self-start", "self-start", gridEnabled) |
| 51 | + checkAlignSelfValue("self-end", "self-end", gridEnabled) |
| 52 | +} |
47 | 53 |
|
48 | | - debug('<br>Testing Default-Alignment values.'); |
49 | | - checkAlignItemsValue("start unsafe", "'start unsafe'", gridEnabled) |
50 | | - checkAlignItemsValue("start", "'start'", gridEnabled) |
51 | | - checkAlignItemsValue("end", "'end'", gridEnabled) |
52 | | - checkAlignItemsValue("flex-start safe", "'flex-start safe'", gridEnabled) |
53 | | - checkAlignItemsValue("self-start", "'self-start'", gridEnabled) |
54 | | - checkAlignItemsValue("self-end", "'self-end'", gridEnabled) |
| 54 | +function checkDefaultAlignmentValues(gridEnabled) |
| 55 | +{ |
| 56 | + if (window.internals) |
| 57 | + internals.settings.setCSSGridLayoutEnabled(gridEnabled) |
55 | 58 |
|
56 | | - item.style.webkitAlignSelf = "flex-start"; |
| 59 | + container.style.webkitAlignItems = "flex-end"; |
| 60 | + item.style.webkitAlignSelf = "auto"; |
| 61 | + |
| 62 | + checkAlignItemsValue("start unsafe", "start unsafe", gridEnabled) |
| 63 | + checkAlignItemsValue("start", "start", gridEnabled) |
| 64 | + checkAlignItemsValue("end", "end", gridEnabled) |
| 65 | + checkAlignItemsValue("flex-start safe", "flex-start safe", gridEnabled) |
| 66 | + checkAlignItemsValue("self-start", "self-start", gridEnabled) |
| 67 | + checkAlignItemsValue("self-end", "self-end", gridEnabled) |
57 | 68 | } |
58 | 69 |
|
59 | | -var container = document.getElementById("flexContainer"); |
60 | | -var item = document.getElementById("flexItem"); |
| 70 | +test(function() { |
| 71 | + checkSelfAlignmentValues(false); |
| 72 | +}, "New Self-Alignment values should be invalid when grid layout is DISABLED."); |
61 | 73 |
|
62 | | -container.style.webkitAlignItems = "flex-end"; |
63 | | -item.style.webkitAlignSelf = "flex-start"; |
64 | | -var alignSelf = "flex-start"; |
65 | | -var alignItems = "flex-start"; |
| 74 | +test(function() { |
| 75 | + checkDefaultAlignmentValues(false); |
| 76 | +}, "New Default-Alignment values should be invalid when grid layout is DISABLED."); |
66 | 77 |
|
67 | | -debug('<br>New alignment values should be invalid when grid layout is disabled'); |
68 | | -checkAlignmentValues(false); |
| 78 | +test(function() { |
| 79 | + checkSelfAlignmentValues(true); |
| 80 | +}, "Even when grid layout is ENABLED, new Self-Alignment values should not violate assertions in FlexibleBox layout logic.."); |
69 | 81 |
|
70 | | -debug('<br>Even when grid layout is enabled, new values should not violate assertions in FlexibleBox layout logic.'); |
71 | | -checkAlignmentValues(true); |
| 82 | +test(function() { |
| 83 | + checkDefaultAlignmentValues(true); |
| 84 | +}, "Even when grid layout is ENABLED, new Default-Alignment values should not violate assertions in FlexibleBox layout logic.."); |
72 | 85 |
|
73 | 86 | </script> |
| 87 | + |
| 88 | +</body> |
| 89 | +</html> |
0 commit comments