Skip to content

Commit 22cc228

Browse files
matmannionmatmannion
authored
Add failing test for CSS flex shorthand
Will be fixed by jsdom/cssstyle#245.
1 parent f1c40de commit 22cc228

2 files changed

Lines changed: 87 additions & 0 deletions

File tree

‎test/web-platform-tests/to-upstream-expectations.yaml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ css/css-display/display-initial.html:
44
"Revert value of display": [fail, Revert keyword is not supported]
55
"Revert-layer value of display": [fail, Revert-layer keyword is not supported]
66
css/cssom/css-rule-selector-text.html: [fail, Need cssstyle fix; https://github.com/jsdom/cssstyle/issues/193]
7+
css/cssom/style-flex-shorthand.html:
8+
"resolve flex shorthand with auto basis": [fail, Need cssstyle fix; https://github.com/jsdom/cssstyle/pull/245]
9+
"resolve flex shorthand with grow and basis": [fail, Need cssstyle fix; https://github.com/jsdom/cssstyle/pull/245]
710
css/cssom/style-set-custom-property-priority.html: [fail, Need to fix getComputedStyle; related https://github.com/jsdom/cssstyle/issues/225]
811
css/cssom/style-set-property.html:
912
"set null for cssRule.style.setProperty": [fail, Need cssstyle fix; https://github.com/jsdom/cssstyle/issues/196]

‎test/web-platform-tests/to-upstream/css/cssom/style-flex-shorthand.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>Setting flex shorthand</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<!-- regression test for https://github.com/jsdom/cssstyle/pull/245 -->
8+
9+
<div id="div"></div>
10+
<script>
11+
"use strict";
12+
13+
test(() => {
14+
const div = document.getElementById("div");
15+
div.style.display = "flex";
16+
div.style.flex = "none";
17+
assert_equals(div.style.getPropertyValue("flex-grow"), "0");
18+
assert_equals(div.style.getPropertyValue("flex-shrink"), "0");
19+
assert_equals(div.style.getPropertyValue("flex-basis"), "auto");
20+
}, "resolve flex none shorthand");
21+
22+
test(() => {
23+
const div = document.getElementById("div");
24+
div.style.display = "flex";
25+
div.style.flex = "auto";
26+
assert_equals(div.style.getPropertyValue("flex-grow"), "1");
27+
assert_equals(div.style.getPropertyValue("flex-shrink"), "1");
28+
assert_equals(div.style.getPropertyValue("flex-basis"), "auto");
29+
}, "resolve flex auto shorthand");
30+
31+
test(() => {
32+
const div = document.getElementById("div");
33+
div.style.display = "flex";
34+
div.style.flex = "0 1 250px";
35+
assert_equals(div.style.getPropertyValue("flex-grow"), "0");
36+
assert_equals(div.style.getPropertyValue("flex-shrink"), "1");
37+
assert_equals(div.style.getPropertyValue("flex-basis"), "250px");
38+
}, "resolve flex shorthand with explicit basis");
39+
40+
test(() => {
41+
const div = document.getElementById("div");
42+
div.style.display = "flex";
43+
div.style.flex = "0 0 auto";
44+
assert_equals(div.style.getPropertyValue("flex-grow"), "0");
45+
assert_equals(div.style.getPropertyValue("flex-shrink"), "0");
46+
assert_equals(div.style.getPropertyValue("flex-basis"), "auto");
47+
}, "resolve flex shorthand with auto basis");
48+
49+
test(() => {
50+
const div = document.getElementById("div");
51+
div.style.display = "flex";
52+
div.style.flex = "0 auto";
53+
assert_equals(div.style.getPropertyValue("flex-grow"), "0");
54+
assert_equals(div.style.getPropertyValue("flex-shrink"), "1");
55+
assert_equals(div.style.getPropertyValue("flex-basis"), "auto");
56+
}, "resolve flex shorthand with grow and basis");
57+
58+
test(() => {
59+
const div = document.getElementById("div");
60+
div.style.display = "flex";
61+
div.style.flex = "2";
62+
assert_equals(div.style.getPropertyValue("flex-grow"), "2");
63+
assert_equals(div.style.getPropertyValue("flex-shrink"), "1");
64+
assert_equals(div.style.getPropertyValue("flex-basis"), "0%");
65+
}, "resolve flex shorthand with grow only");
66+
67+
test(() => {
68+
const div = document.getElementById("div");
69+
div.style.display = "flex";
70+
div.style.flex = "20%";
71+
assert_equals(div.style.getPropertyValue("flex-grow"), "1");
72+
assert_equals(div.style.getPropertyValue("flex-shrink"), "1");
73+
assert_equals(div.style.getPropertyValue("flex-basis"), "20%");
74+
}, "resolve flex shorthand with basis only");
75+
76+
test(() => {
77+
const div = document.getElementById("div");
78+
div.style.display = "flex";
79+
div.style.flex = "2 2";
80+
assert_equals(div.style.getPropertyValue("flex-grow"), "2");
81+
assert_equals(div.style.getPropertyValue("flex-shrink"), "2");
82+
assert_equals(div.style.getPropertyValue("flex-basis"), "0%");
83+
}, "resolve flex shorthand with grow and shrink");
84+
</script>

0 commit comments

Comments
 (0)