diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-box/margin-trim')
91 files changed, 3394 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-001.html b/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-001.html new file mode 100644 index 0000000000..e31abec367 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: block-container-block-001</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="block should trim block start and end margins for block-level first child"> +<style> +.container { + background-color: green; + width: min-content; + margin-trim: block; +} +.outer { + background-color: green; + width: 100px; + height: 50px; +} +.child { + margin-top: 50px; + margin-bottom: 50px; + width: 100px; + height: 50px; +} +</style> +</head> +<body> + <p>Test passes if there is a filled green square.</p> + <div class="container"> + <div class="child"></div> + </div> + <div class="outer"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-002.html b/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-002.html new file mode 100644 index 0000000000..399141b17e --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-002.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: block-container-block-002</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="block should trim block start and end margins for ONLY block-level first/last children"> +<style> +.container { + background-color: green; + width: min-content; + margin-trim: block; +} +.first { + margin-top: 50px; + height: 25px; +} +.second { + width: 100px; + height: 10px; + margin-bottom: 15px; +} +.third { + width: 100px; + height: 25px; + margin-bottom: 50px; +} +.outer { + width: 100px; + height: 25px; + background-color: green; +} +</style> +</head> +<body> + <p>Test passes if there is a filled green square.</p> + <div class="container"> + <div class="first"></div> + <div class="second"></div> + <div class="third"></div> + </div> + <div class="outer"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-end-001.html b/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-end-001.html new file mode 100644 index 0000000000..fcee65692c --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-end-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: block-container-block-end-001</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="block-end should trim block end margin for block-level first child"> +<style> +.container { + background-color: green; + width: min-content; + margin-trim: block-end; +} +.outer { + background-color: green; + width: 100px; + height: 50px; +} +.child { + margin-bottom: 50px; + width: 100px; + height: 50px; +} +</style> +</head> +<body> + <p>Test passes if there is a filled green square.</p> + <div class="container"> + <div class="child"></div> + </div> + <div class="outer"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-end-002.html b/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-end-002.html new file mode 100644 index 0000000000..42d559fbe9 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-end-002.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: block-container-block-end-002</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="block-end should trim block end margin for ONLY block-level first child"> +<style> +.container { + width: min-content; + margin-trim: block-end; + background-color: green; +} +.outer { + width: 100px; + height: 40px; + background-color: green; +} +.first { + width: 100px; + margin-bottom: 25px; + height: 25px; +} +.second { + margin-bottom: 100px; + width: 100px; + height: 10px; +} +</style> +</head> +<body> + <p>Test passes if there is a filled green square.</p> + <div class="container"> + <div class="first"></div> + <div class="second"></div> + </div> + <div class="outer"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-start-001.html b/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-start-001.html new file mode 100644 index 0000000000..c33c7f0abe --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-start-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: block-container-block-start-001</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="block-start should trim block start margin for block-level first child"> +<style> +.container { + background-color: green; + width: min-content; + margin-trim: block-start; +} +.outer { + background-color: green; + width: 100px; + height: 50px; +} +.child { + width: 100px; + margin-top: 50px; + height: 50px; +} +</style> +</head> +<body> + <p>Test passes if there is a filled green square.</p> + <div class="outer"></div> + <div class="container"> + <div class="child"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-start-002.html b/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-start-002.html new file mode 100644 index 0000000000..339c990d10 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-start-002.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: block-container-block-start-002</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="block-start should trim block start margin for ONLY block-level first child"> +<style> +.container { + background-color: green; + width: min-content; + margin-trim: block-start; +} +.outer { + background-color: green; + width: 100px; + height: 10px; +} +.first { + margin-top: 50px; + width: 100px; + height: 40px; +} +.second { + margin-top: 10px; + width: 100px; + height: 40px; +} +</style> +</head> +<body> + <p>Test passes if there is a filled green square.</p> + <div class="outer"></div> + <div class="container"> + <div class="first"></div> + <div class="second"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/block-container-non-adjoining-item-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/block-container-non-adjoining-item-ref.html new file mode 100644 index 0000000000..4affb87f11 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/block-container-non-adjoining-item-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: block-container-non-adjoining-item</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block"> +<meta name="assert" content="non-adjoining first child should still have its margins trimmed and the container should keep its set margin"> +<style> +.container { + background-color: green; + width: min-content; + margin-bottom: 100px; + padding-bottom: 50px; + background-clip: padding-box; +} +.child { + width: 100px; + height: 50px; +} +</style> +</head> +<body> +<div class="container"> + <div class="child"></div> +</div> +<div>This text should be 100px below the green square.</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/block-container-non-adjoining-item.html b/testing/web-platform/tests/css/css-box/margin-trim/block-container-non-adjoining-item.html new file mode 100644 index 0000000000..215175418b --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/block-container-non-adjoining-item.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: block-container-non-adjoining-item</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block"> +<link rel="match" href="block-container-non-adjoining-item-ref.html"> +<meta name="assert" content="non-adjoining first child should still have its margins trimmed and the container should keep its set margin"> +<style> +.container { + background-color: green; + width: min-content; + margin-bottom: 100px; + padding-bottom: 50px; + background-clip: padding-box; + margin-trim: block; +} +.child { + margin-top: 50px; + margin-bottom: 200px; + width: 100px; + height: 50px; +} +</style> +</head> +<body> +<div class="container"> + <div class="child"></div> +</div> +<div>This text should be 100px below the green square.</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/block-container-replaced-block-end.html b/testing/web-platform/tests/css/css-box/margin-trim/block-container-replaced-block-end.html new file mode 100644 index 0000000000..0225460b7b --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/block-container-replaced-block-end.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: block-container-replaced-block-end</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="block level replaced element should have block-end trimmed"> +<style> +.container { + width: min-content; + margin-trim: block-end; +} +.outer { + background-color: green; + width: 100px; + height: 40px; +} +.child { + display: block; + margin-bottom: 50px; + background-color: green; + padding-right: 40px; +} +</style> +</head> +<body> + <p>Test passes if there is a filled green square.</p> + <div class="container"> + <img class="child" src="/css/support/60x60-green.png"/> + </div> + <div class="outer"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/block-container-replaced-block-start.html b/testing/web-platform/tests/css/css-box/margin-trim/block-container-replaced-block-start.html new file mode 100644 index 0000000000..10080c974f --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/block-container-replaced-block-start.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: block-container-replaced-block-start</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="block level replaced element should have block-start trimmed"> +<style> +.container { + width: min-content; + margin-trim: block-start; +} +.outer { + background-color: green; + width: 100px; + height: 40px; +} +.child { + display: block; + margin-top: 50px; + background-color: green; + padding-right: 40px; +} +</style> +</head> +<body> + <p>Test passes if there is a filled green square.</p> + <div class="outer"></div> + <div class="container"> + <img class="child" src="/css/support/60x60-green.png"/> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/block-container-replaced-block.html b/testing/web-platform/tests/css/css-box/margin-trim/block-container-replaced-block.html new file mode 100644 index 0000000000..036066f691 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/block-container-replaced-block.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: block-container-replaced-block</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="block level replaced element should have both block-start and block-end trimmed when block is specified"> +<style> +.container { + width: min-content; + margin-trim: block; +} +.outer { + background-color: green; + width: 100px; + height: 40px; +} +.child { + display: block; + margin-top: 50px; + margin-bottom: 50px; + background-color: green; + padding-right: 40px; +} +</style> +</head> +<body> + <p>Test passes if there is a filled green square.</p> + <div class="container"> + <img class="child" src="/css/support/60x60-green.png"/> + </div> + <div class="outer"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end-nested-child.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end-nested-child.html new file mode 100644 index 0000000000..8a3b03c2e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end-nested-child.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block"> +<meta name="assert" content="Items, including self-collapsing ones, at the block-end of the container should have their margins trimmed"> +<style> +container { + display: block; + inline-size: min-content; + margin-trim: block-end; +} +item { + display: block; + background-color: green; + inline-size: 50px; + block-size: 10px; + margin-block-end: 10px; +} +.border { + border: 1px solid black; +} +.collapsed { + block-size: 0px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('item')"> + <div id="target"> + <container> + <item data-expected-margin-bottom="10"></item> + <item data-expected-margin-bottom="0" style="block-size: auto;"> + <div><item data-expected-margin-bottom="10"></item></div> + <div> + <item data-expected-margin-bottom="0" style="block-size: auto;"> + <div><item data-expected-margin-bottom="0"></item></div> + </item> + <item class="collapsed" data-expected-margin-bottom="0"> + <div><item class="collapsed" data-expected-margin-bottom="0"></item></div> + </item> + </div> + <item class="collapsed" data-expected-margin-bottom="0"> + <div><item class="collapsed" data-expected-margin-bottom="0"></item></div> + </item> + </item> + <item class="collapsed" data-expected-margin-bottom="0"> + <div><item class="collapsed" data-expected-margin-bottom="0"></item></div> + </item> + </container> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end-with-self-collapsing-children.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end-with-self-collapsing-children.html new file mode 100644 index 0000000000..26d46628ef --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end-with-self-collapsing-children.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block"> +<meta name="assert" content="Second item and all self-collapsing children at block-end should have margins trimmed"> +<style> +container { + display: block; + inline-size: min-content; + margin-trim: block-end; +} +item { + display: block; + background-color: green; + inline-size: 50px; + block-size: 50px; + margin-block-end: 10px; +} +.collapsed { + block-size: 0px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('item')"> + <div id="target"> + <container> + <item data-expected-margin-bottom="10"></item> + <item data-expected-margin-bottom="0"></item> + <item class="collapsed" data-expected-margin-bottom="0"> + <div><item class="collapsed" data-expected-margin-bottom="0"> + <div><item class="collapsed" data-expected-margin-bottom="0"> + <div><item class="collapsed" data-expected-margin-bottom="0"></item></div> + <div><item class="collapsed" data-expected-margin-bottom="0"></item></div> + </item></div> + </item></div> + <div><item class="collapsed" data-expected-margin-bottom="0"></item></div> + </item> + <item class="collapsed" data-expected-margin-bottom="0"> + <div><item class="collapsed" data-expected-margin-bottom="0"> + <div><item class="collapsed" data-expected-margin-bottom="0"></item></div> + <div><item class="collapsed" data-expected-margin-bottom="0"> + <div><item class="collapsed" data-expected-margin-bottom="0"></item></div> + </item></div> + <div><item class="collapsed" data-expected-margin-bottom="0"></item></div> + </item></div> + <div><item class="collapsed" data-expected-margin-bottom="0"> + <div><item class="collapsed" data-expected-margin-bottom="0"> + <div><item class="collapsed" data-expected-margin-bottom="0"></item></div> + </item></div> + </item></div> + </item> + <item class="collapsed" data-expected-margin-bottom="0"></item> + </container> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end.html new file mode 100644 index 0000000000..6cd0cce263 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block"> +<meta name="assert" content="block-end margin of item should be trimmed"> +<style> +container { + display: block; + inline-size: min-content; + margin-trim: block-end; +} +item { + display: block; + background-color: green; + inline-size: 50px; + block-size: 50px; + margin-block-end: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('item')"> + <div id="target"> + <container> + <item data-expected-margin-bottom="0"></item> + </container> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start-child-with-border.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start-child-with-border.html new file mode 100644 index 0000000000..fc9bb93394 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start-child-with-border.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block"> +<meta name="assert" content="item with border should prevent trimming within itself"> +<style> +container { + display: block; + margin-trim: block; + border: 1px solid black; + margin-block-start: 10px; +} +item { + display: block; + inline-size: 50px; + block-size: 50px; + background-color: green; +} +.collapsed { + margin-block: 50px; + block-size: 0px +} +.with-border-and-margin { + border: 1px solid black; + margin-block-start: 30px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('item')"> + <container> + <item data-expected-margin-top="0" class="collapsed"> + <item data-expected-margin-top="0" class="collapsed"></item> + </item> + <item class="with-border-and-margin" data-expected-margin-top="0"> + <item class="with-border-and-margin" data-expected-margin-top="30"></item> + </item> + </container> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start-self-collapsing-nested.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start-self-collapsing-nested.html new file mode 100644 index 0000000000..e7963f327f --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start-self-collapsing-nested.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block"> +<meta name="assert" content="self-collapsing items at block start should have margins trimmed along with first non self-collapsing child block-start margins"> +<style> +container { + display: block; + margin-trim: block; + border: 1px solid black; + margin-block-start: 10px; +} +item { + display: block; + inline-size: 50px; + background-color: green; +} +.collapsed { + margin-block-start: 50px; + block-size: 0px +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload=" checkLayout('container, item');"> + <container data-expected-margin-top="10"> + <item data-expected-margin-top="0" class="collapsed"> + <item data-expected-margin-top="0" class="collapsed"></item> + </item> + <item data-expected-margin-top="0" style="margin-block: 40px"> + <item data-expected-margin-top="0" data-expected-margin-bottom="0" class="collapsed"></item> + <item data-expected-margin-top="0" style="margin-top: 30px;"> + <item data-expected-margin-top="0" style="margin-block-start: 100px; height: 50px;"></item> + </item> + </item> + </container> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start.html new file mode 100644 index 0000000000..3a334fc056 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block"> +<meta name="assert" content="block-start margin of item should be trimmed"> +<style> +container { + display: block; + margin-trim: block; + border: 1px solid black; + margin-block-start: 10px; +} +item { + display: block; + inline-size: 50px; + block-size: 50px; + background-color: green; +} +.collapsed { + margin-block: 50px; + block-size: 0px +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('item')"> + <container> + <item style="margin-top: 30px;" data-expected-margin-top="0"></item> + </container> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-block-end.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-block-end.html new file mode 100644 index 0000000000..ecc266378d --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-block-end.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="block-end trimmed margins should be reflected in computed style"> +<style> +flexbox { + display: flex; + flex-direction: column; + width: min-content; + margin-trim: block-end; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-block-end: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('flexbox > item')"> +<div id="target"> +<flexbox> + <item data-expected-margin-bottom="10" data-offset-y="8"></item> + <item data-expected-margin-bottom="0" data-offset-y="68"></item> +</flexbox> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-block-start.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-block-start.html new file mode 100644 index 0000000000..6c760bb1f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-block-start.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="block-start trimmed margins should be reflected in computed style"> +<style> +flexbox { + display: flex; + flex-direction: column; + width: min-content; + margin-trim: block-start; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-block-start: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('flexbox > item')"> +<div id="target"> +<flexbox> + <item data-expected-margin-top="0" data-offset-y="8"></item> + <item data-expected-margin-top="10" data-offset-y="68"></item> +</flexbox> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-inline-end.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-inline-end.html new file mode 100644 index 0000000000..9bf43356f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-inline-end.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="trimmed inline-end margins should be reflected in computed style"> +<style> +flexbox { + display: flex; + flex-direction: column; + width: min-content; + margin-trim: inline-end; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; +} +item:nth-child(1) { + margin-inline-end: 10px; +} +item:nth-child(2) { + margin-inline-end: -10px; +} +item:nth-child(3) { + margin-inline-end: 30%; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('flexbox > item')"> +<div id="target"> +<flexbox> + <item data-expected-margin-right="0" data-offset-x="8"></item> + <item data-expected-margin-right="0" data-offset-x="8"></item> + <item data-expected-margin-right="0" data-offset-x="8"></item> +</flexbox> +</div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-inline-start.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-inline-start.html new file mode 100644 index 0000000000..681c9b859f --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-inline-start.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="trimmed inline-start margins should be reflected in computed style"> +<style> +flexbox { + display: flex; + flex-direction: column; + width: min-content; + margin-trim: inline-start; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; +} +item:nth-child(1) { + margin-inline-start: 10px; +} +item:nth-child(2) { + margin-inline-start: -10px; +} +item:nth-child(3) { + margin-inline-start: 30%; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('flexbox > item')"> +<div id="target"> +<flexbox> + <item data-expected-margin-left="0" data-offset-x="8"></item> + <item data-expected-margin-left="0" data-offset-x="8"></item> + <item data-expected-margin-left="0" data-offset-x="8"></item> +</flexbox> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-block-end.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-block-end.html new file mode 100644 index 0000000000..61f11a9b31 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-block-end.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="block-end trimmed margins should be reflected in computed style"> +<style> +flexbox { + display: flex; + flex-direction: column; + flex-wrap: wrap; + width: 100px; + height: 110px; + margin-trim: block-end; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-block-end: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('flexbox > item')"> +<div id="target"> +<flexbox> + <item data-offset-y="8" data-expected-margin-bottom="10"></item> + <item data-offset-y="68" data-expected-margin-bottom="0"></item> + <item data-offset-y="8" data-expected-margin-bottom="10"></item> + <item data-offset-y="68" data-expected-margin-top="0"></item> +</flexbox> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-block-start.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-block-start.html new file mode 100644 index 0000000000..517619db49 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-block-start.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="block-start trimmed margins should be reflected in computed style"> +<style> +flexbox { + display: flex; + flex-direction: column; + flex-wrap: wrap; + width: 10px; + height: 110px; + margin-trim: block-start; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-block-start: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('flexbox > item')"> +<div id="target"> +<flexbox> + <item data-offset-y="8" data-expected-margin-top="0"></item> + <item data-offset-y="68" data-expected-margin-top="10"></item> + <item data-offset-y="8" data-expected-margin-top="0"></item> + <item data-offset-y="68" data-expected-margin-top="10"></item> +</flexbox> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-block.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-block.html new file mode 100644 index 0000000000..e01067fbe2 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-block.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="both trimmed block margins should be reflected in computed style"> +<style> +flexbox { + display: flex; + flex-direction: column; + flex-wrap: wrap; + width: 100px; + height: 120px; + margin-trim: block; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-block: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('flexbox > item')"> +<div id="target"> +<flexbox> + <item data-offset-y="8" data-expected-margin-top="0" data-expected-margin-bottom="10"></item> + <item data-offset-y="78" data-expected-margin-top="10" data-expected-margin-bottom="0" ></item> + <item data-offset-y="8" data-expected-margin-top="0" data-expected-margin-bottom="10"></item> + <item data-offset-y="78" data-expected-margin-top="10" data-expected-margin-bottom="0"></item> +</flexbox> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-inline-end.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-inline-end.html new file mode 100644 index 0000000000..4d3d5b5326 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-inline-end.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="trimmed inline-end margins should be reflected in computed style"> +<style> +flexbox { + display: flex; + flex-direction: column; + flex-wrap: wrap; + width: min-content; + height: 100px; + margin-trim: inline-end; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-inline-end: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('flexbox > item')"> +<div id="target"> +<flexbox> + <item data-offset-x="8" data-expected-margin-right="10"></item> + <item data-offset-x="8" data-expected-margin-right="10"></item> + <item data-offset-x="68" data-expected-margin-right="0"></item> + <item data-offset-x="68" data-expected-margin-right="0"></item> +</flexbox> +</div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-inline-start.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-inline-start.html new file mode 100644 index 0000000000..1e4d007658 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-inline-start.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="trimmed inline-start margins should be reflected in computed style"> +<style> +flexbox { + display: flex; + flex-direction: column; + flex-wrap: wrap; + width: min-content; + height: 100px; + margin-trim: inline-start; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-inline-start: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('flexbox > item')"> +<div id="target"> +<flexbox> + <item data-offset-x="8" data-expected-margin-left="0"></item> + <item data-offset-x="8" data-expected-margin-left="0"></item> + <item data-offset-x="68" data-expected-margin-left="10"></item> + <item data-offset-x="68" data-expected-margin-left="10"></item> +</flexbox> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-style-change-triggers-layout-block-start.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-style-change-triggers-layout-block-start.html new file mode 100644 index 0000000000..175b5c3f2f --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-style-change-triggers-layout-block-start.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="Make sure margins are no longer trimmed when margin-trim is changed to none on the flexbox"> +<style> +flexbox { + display: flex; + flex-direction: column; + width: min-content; + margin-trim: block-start; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-block-start: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body> +<div id="target"> +<flexbox> + <item data-expected-margin-top="10" data-offset-y="18"></item> + <item data-expected-margin-top="10" data-offset-y="78"></item> +</flexbox> +</div> +<script> +// Force the first layout to trim margins, set margin-trim to none, +// force a second layout, and then check to see if the margins were added back +document.body.offsetHeight; +document.querySelector("flexbox").style["margin-trim"] = "none"; +document.body.offsetHeight; +checkLayout("flexbox > item"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-block-end.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-block-end.html new file mode 100644 index 0000000000..f5ca9854fe --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-block-end.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="block-end trimmed margins should be reflected in computed style"> +<style> +flexbox { + display: flex; + width: min-content; + margin-trim: block-end; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-inline: 10px; +} +item:nth-child(1) { + margin-block-end: 10px; +} +item:nth-child(2) { + margin-block-end: -10px; +} +item:nth-child(3) { + margin-block-end: 30%; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('flexbox > item')"> +<div id="target"> +<flexbox> + <item data-expected-margin-bottom="0"></item> + <item data-expected-margin-bottom="0"></item> + <item data-expected-margin-bottom="0"></item> +</flexbox> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-block-start.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-block-start.html new file mode 100644 index 0000000000..9597c9aa10 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-block-start.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="block-start trimmed margins should be reflected in computed style"> +<style> +flexbox { + display: flex; + width: min-content; + margin-trim: block-start; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-inline: 10px; +} +item:nth-child(1) { + margin-block-start: 10px; +} +item:nth-child(2) { + margin-block-start: -10px; +} +item:nth-child(3) { + margin-block-start: 30%; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('flexbox > item')"> +<div id="target"> +<flexbox> + <item data-expected-margin-top="0" data-offset-y="8"></item> + <item data-expected-margin-top="0" data-offset-y="8"></item> + <item data-expected-margin-top="0" data-offset-y="8"></item> +</flexbox> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-block.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-block.html new file mode 100644 index 0000000000..6c35fa6ac2 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-block.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="both trimmed block margins should be reflected in computed style"> +<style> +flexbox { + display: flex; + width: min-content; + margin-trim: block; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-inline: 10px; +} +item:nth-child(1) { + margin-block: 10px; +} +item:nth-child(2) { + margin-block: -10px; +} +item:nth-child(3) { + margin-block: 30%; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('flexbox > item')"> +<div id="target"> +<flexbox> + <item data-expected-margin-top="0" data-expected-margin-bottom="0" data-offset-y="8"></item> + <item data-expected-margin-top="0" data-expected-margin-bottom="0" data-offset-y="8"></item> + <item data-expected-margin-top="0" data-expected-margin-bottom="0" data-offset-y="8"></item> +</flexbox> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-inline-end.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-inline-end.html new file mode 100644 index 0000000000..2c20625ed3 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-inline-end.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="trimmed inline-end margins should be reflected in computed style"> +<style> +flexbox { + display: flex; + margin-trim: inline-end; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-inline-end: 20px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('flexbox > item')"> +<div id="target"> +<flexbox> + <item data-expected-margin-right="20" data-offset-x="8"></item> + <item data-expected-margin-right="20" data-offset-x="78"></item> + <item data-expected-margin-right="0" data-offset-x="148"></item> +</flexbox> +</div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-inline-start.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-inline-start.html new file mode 100644 index 0000000000..24ce7f90e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-inline-start.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="trimmed inline-start margins should be reflected in computed style"> +<style> +flexbox { + display: flex; + margin-trim: inline-start; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-inline-start: 20px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('flexbox > item')"> +<div id="target"> +<flexbox> + <item data-expected-margin-left="0" data-offset-x="8"></item> + <item data-expected-margin-left="20" data-offset-x="78"></item> + <item data-expected-margin-left="20" data-offset-x="148"></item> +</flexbox> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-block-end.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-block-end.html new file mode 100644 index 0000000000..f4c90c29f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-block-end.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="block-end trimmed margins should be reflected in computed style"> +<style> +flexbox { + display: flex; + flex-wrap: wrap; + width: 100px; + margin-trim: block-end; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-block-end: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('flexbox > item')"> +<div id="target"> +<flexbox> + <item data-offset-y="8" data-expected-margin-bottom="10"></item> + <item data-offset-y="8" data-expected-margin-bottom="10"></item> + <item data-offset-y="68" data-expected-margin-bottom="0"></item> + <item data-offset-y="68" data-expected-margin-bottom="0"></item> +</flexbox> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-block-start.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-block-start.html new file mode 100644 index 0000000000..c3190e1a93 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-block-start.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="block-start trimmed margins should be reflected in computed style"> +<style> +flexbox { + display: flex; + width: 100px; + flex-wrap: wrap; + margin-trim: block-start; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; +} +item:nth-child(1) { + margin-block-start: 10px; +} +item:nth-child(2) { + margin-block-start: -10px; +} +item:nth-child(3) { + margin-block-start: 10px; +} +item:nth-child(4) { + margin-block-start: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('flexbox > item')"> +<div id="target"> +<flexbox> + <item data-expected-margin-top="0" data-offset-y="8"></item> + <item data-expected-margin-top="0" data-offset-y="8"></item> + <item data-expected-margin-top="10" data-offset-y="68"></item> + <item data-expected-margin-top="10" data-offset-y="68"></item> +</flexbox> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-block.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-block.html new file mode 100644 index 0000000000..1db5680306 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-block.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="both trimmed block margins should be reflected in computed style"> +<style> +flexbox { + display: flex; + width: 100px; + flex-wrap: wrap; + margin-trim: block; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-block: 10px; +} + +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('flexbox > item')"> +<div id="target"> +<flexbox> + <item data-expected-margin-top="0" data-expected-margin-bottom="10" data-offset-y="8"></item> + <item data-expected-margin-top="0" data-expected-margin-bottom="10" data-offset-y="8"></item> + <item data-expected-margin-top="10" data-expected-margin-bottom="0" data-offset-y="78"></item> + <item data-expected-margin-top="10" data-expected-margin-bottom="0" data-offset-y="78"></item> +</flexbox> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-inline-end.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-inline-end.html new file mode 100644 index 0000000000..8a59bc4171 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-inline-end.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="trimmed inline-end margins should be reflected in computed style"> +<style> +flexbox { + display: flex; + width: 110px; + flex-wrap: wrap; + margin-trim: inline-end; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; +} +item:nth-child(1) { + margin-inline-end: 10px; +} +item:nth-child(2) { + margin-inline-end: -10px; +} +item:nth-child(3) { + margin-inline-end: 10px; +} +item:nth-child(4) { + margin-inline-end: 50%; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('flexbox > item')"> +<div id="target"> +<flexbox> + <item data-expected-margin-right="10" data-offset-x="8"></item> + <item data-expected-margin-right="0" data-offset-x="68"></item> + <item data-expected-margin-right="10" data-offset-x="8"></item> + <item data-expected-margin-right="0" data-offset-x="68"></item> +</flexbox> +</div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-inline-start.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-inline-start.html new file mode 100644 index 0000000000..9b925a7b68 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-inline-start.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="trimmed inline-start margins should be reflected in computed style"> +<style> +flexbox { + display: flex; + width: 110px; + flex-wrap: wrap; + margin-trim: inline-start; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; +} +item:nth-child(1) { + margin-inline-start: 10px; +} +item:nth-child(2) { + margin-inline-start: -10px; +} +item:nth-child(3) { + margin-inline-start: 50%; +} +item:nth-child(4) { + margin-inline-start: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('flexbox > item')"> +<div id="target"> +<flexbox> + <item data-expected-margin-left="0" data-offset-x="8"></item> + <item data-expected-margin-left="-10" data-offset-x="48"></item> + <item data-expected-margin-left="0" data-offset-x="8"></item> + <item data-expected-margin-left="10" data-offset-x="68"></item> +</flexbox> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-block-end-column-auto-flow.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-block-end-column-auto-flow.html new file mode 100644 index 0000000000..f49f036a63 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-block-end-column-auto-flow.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> +<meta name="assert" content="Trimmed block-end margins for grid items should be reflected in computed style"> +</head> +<style> +grid { + display: grid; + width: min-content; + grid-auto-flow: column; + border: 1px solid black; + grid-template-rows: auto auto auto; + margin-trim: block-end; +} +item { + display: block; + width: 50px; + height: 50px; + margin-block-end: 10px; +} +.span-four { + grid-row: span 4; +} +item:nth-child(1) { + grid-row: 1; + background-color: green; +} +item:nth-child(2) { + grid-row: 2; + background-color: blue; +} +item:nth-child(3) { + grid-row: 3; + background-color: purple; +} +item:nth-child(4) { + background-color:burlywood; +} +item:nth-child(5) { + background-color: grey; + grid-row: 4; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('grid > item')"> + <div id="target"> + <grid> + <item data-expected-margin-bottom="10"></item> + <item data-expected-margin-bottom="10"></item> + <item data-expected-margin-bottom="10"></item> + <item data-expected-margin-bottom="0" class="span-four"></item> + <item data-expected-margin-bottom="0"></item> + </grid> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-block-end-item-spans-multiple-rows.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-block-end-item-spans-multiple-rows.html new file mode 100644 index 0000000000..d44085ed8a --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-block-end-item-spans-multiple-rows.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> +<meta name="assert" content="item that spans into last row should have block-end margin trimmed"> +</head> +<style> +grid { + display: grid; + border: 1px solid black; + grid-template-columns: auto auto; + margin-trim: block-end; +} +item { + display: block; + width: 50px; + height: 50px; + margin-bottom: 10px; +} +.row-two { + grid-row: 2; + background-color: green; +} +.span-two-rows { + grid-row: span 2; + background-color: blue; + height: 90px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('grid > item')"> + <div id="target"> + <grid> + <item data-expected-margin-bottom="0" class="span-two-rows"></item> + <item data-expected-margin-bottom="0" class="row-two"></item> + </grid> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-block-end.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-block-end.html new file mode 100644 index 0000000000..a7d5f44f37 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-block-end.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> +<meta name="assert" content="Trimmed block-end margins for grid items should be reflected in computed style"> +</head> +<style> +grid { + display: grid; + width: min-content; + border: 1px solid black; + grid-template-columns: repeat(4, auto); + margin-trim: block-end; +} +item { + display: block; + width: 50px; + height: 50px; + margin-bottom: 10px; +} +.locked-position { + grid-row: 2; + grid-column: 2; + margin-block-end: 50px; + background-color: magenta; +} +.span-three-columns { + grid-column: span 3; + background-color: purple; +} +.span-five-columns { + grid-column: span 5; +} +item:nth-child(1) { + background-color: green; +} +item:nth-child(4) { + background-color: blue; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('grid > item')"> + <div id="target"> + <grid> + <item class="span-five-columns" data-expected-margin-bottom="10"></item> + <item class="locked-position" data-expected-margin-bottom="50"></item> + <item class="span-three-columns" data-expected-margin-bottom="10"></item> + <item data-expected-margin-bottom="0"></item> + </grid> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-inline-start-item-negative-span.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-inline-start-item-negative-span.html new file mode 100644 index 0000000000..80b97e9cd0 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-inline-start-item-negative-span.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> +<meta name="assert" content="trimmed inline-start margins in grid should be reflected in computed style"> +</head> +<style> +grid { + display: grid; + width: min-content; + outline: 1px solid black; + grid-template-columns: repeat(2, auto); + margin-trim: inline-start; +} +item { + display: block; + width: 50px; + height: 50px; + margin-inline-start: 10px; + background-color: green; +} +.negative-line-number { + width: 50px; + grid-row: 2; + grid-column: -3; + background-color: blue; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('grid > item')"> + <div id="target"> + <grid> + <item data-expected-margin-left="0" class="negative-line-number"></item> + <item data-expected-margin-left="0"></item> + </grid> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-inline-start.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-inline-start.html new file mode 100644 index 0000000000..380090f3a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-inline-start.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> +<meta name="assert" content="trimmed inline-start margins in grid should be reflected in computed style"> +</head> +<style> +grid { + display: grid; + width: min-content; + outline: 1px solid black; + grid-template-columns: repeat(2, auto); + margin-trim: inline-start; +} +item { + display: block; + width: 50px; + height: 50px; +} +.locked-position { + grid-row: 3; + grid-column: 1; + margin-inline-start: -30px; +} +item:nth-child(1) { + background-color: green; + margin-inline-start: 30px; +} +item:nth-child(2) { + background-color: blue; + margin-inline-start: 10px; +} +item:nth-child(3) { + background-color: orchid; + margin-inline-start: 10%; +} +item:nth-child(4) { + background-color: maroon; +} +item:nth-child(5) { + background-color: salmon; + width: auto; + grid-column: span 2; + margin-inline-start: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('grid > item')"> + <div id="target"> + <grid> + <item data-expected-margin-left="0"></item> + <item data-expected-margin-left="10"></item> + <item data-expected-margin-left="0"></item> + <item class="locked-position" data-expected-margin-left="0"></item> + <item data-expected-margin-left="0"></item> + </grid> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-block-end-trimmed-only-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-block-end-trimmed-only-ref.html new file mode 100644 index 0000000000..5145182436 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-block-end-trimmed-only-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-block-end-trimmed-only</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="block-end should trim only margin block end of flex items"> +<style> +flexbox { + display: flex; + width: min-content; + border: 1px black solid; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-inline: 10px; + margin-block-start: 10px; +} +</style> +</head> +<body> +<flexbox> +<item></item> +<item></item> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-block-end-trimmed-only.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-block-end-trimmed-only.html new file mode 100644 index 0000000000..0a99b3f308 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-block-end-trimmed-only.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-block-end-trimmed-only</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<link rel="match" href="flex-block-end-trimmed-only-ref.html"> +<meta name="assert" content="block-end should trim only margin block end of flex items"> +<style> +flexbox { + display: flex; + width: min-content; + border: 1px black solid; + margin-trim: block-end; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-inline: 10px; + margin-block: 10px; +} +</style> +</head> +<body> +<flexbox> +<item></item> +<item></item> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-block-start-trimmed-only-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-block-start-trimmed-only-ref.html new file mode 100644 index 0000000000..58a7e5ba31 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-block-start-trimmed-only-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-block-start-trimmed-only</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="block-start should trim only margin block start of flex items"> +<style> +flexbox { + display: flex; + width: min-content; + border: 1px black solid; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-inline: 10px; + margin-block-end: 10px; +} +</style> +</head> +<body> +<flexbox> +<item></item> +<item></item> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-block-start-trimmed-only.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-block-start-trimmed-only.html new file mode 100644 index 0000000000..5e867ea43d --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-block-start-trimmed-only.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-block-start-trimmed-only</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<link rel="match" href="flex-block-start-trimmed-only-ref.html"> +<meta name="assert" content="block-start should trim only margin block start of flex items"> +<style> +flexbox { + display: flex; + width: min-content; + border: 1px black solid; + margin-trim: block-start; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-inline: 10px; + margin-block: 10px; +} +</style> +</head> +<body> +<flexbox> +<item></item> +<item></item> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-block-trimmed-only-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-block-trimmed-only-ref.html new file mode 100644 index 0000000000..f4cf4fec86 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-block-trimmed-only-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-block-trimmed-only</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="block should trim only block margins of flex items"> +<style> +flexbox { + display: flex; + width: min-content; + border: 1px black solid; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-inline: 10px; +} +</style> +</head> +<body> +<flexbox> +<item></item> +<item></item> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-block-trimmed-only.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-block-trimmed-only.html new file mode 100644 index 0000000000..e730482825 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-block-trimmed-only.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-block-trimmed-only</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<link rel="match" href="flex-block-trimmed-only-ref.html"> +<meta name="assert" content="block should trim only block margins of flex items"> +<style> +flexbox { + display: flex; + width: min-content; + border: 1px black solid; + margin-trim: block; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-inline: 10px; + margin-block: 10px; +} +</style> +</head> +<body> +<flexbox> +<item></item> +<item></item> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-column-block-multiline.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-block-multiline.html new file mode 100644 index 0000000000..6536d7f00d --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-block-multiline.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-column-block-multiline</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="block-start should be trimmed for items at the start of the flex line and block-end should be trimmed for items at the end of the flex line"> +<style> +flexbox { + display: flex; + width: min-content; + height: 100px; + flex-wrap: wrap; + flex-direction: column; + margin-trim: block; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; +} +item:nth-child(odd) { + margin-block-start: 25px; +} +item:nth-child(even) { + margin-block-end: 25px; +} +</style> +</head> +<body> +<p>Test passes if there is a filled green square.</p> +<flexbox> +<item></item> +<item></item> +<item></item> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-column-grow.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-grow.html new file mode 100644 index 0000000000..62c55b2bff --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-grow.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-column-grow</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="items should grow to take up the space made available by trimming margins"> +<style> +flexbox { + display: flex; + width: min-content; + height: 100px; + flex-direction: column; + margin-trim: block; +} +item { + display: block; + width: 100px; + height: 50px; + margin-block: 25px; + flex: 1 0 auto; + background-color: green; +} +</style> +</head> +<body> +<p>Test passes if there is a filled green square.</p> +<flexbox> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-column-inline-multiline-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-inline-multiline-ref.html new file mode 100644 index 0000000000..c4b36a91b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-inline-multiline-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-column-inline-multiline</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="inline-start should be trimmed for all items on the first flex line and inline-end should be trimmed for all items on the last flex line"> +<style> +flexbox { + display: flex; + width: min-content; + height: 100px; + flex-direction: column; + flex-wrap: wrap; + gap: 0px 30px; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; +} +</style> +</head> +<body> +<flexbox> +<item></item> +<item></item> +<item></item> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-column-inline-multiline.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-inline-multiline.html new file mode 100644 index 0000000000..25003aab08 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-inline-multiline.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-column-inline-multiline</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<link rel="match" href="flex-column-inline-multiline-ref.html"> +<meta name="assert" content="inline-start should be trimmed for all items on the first flex line and inline-end should be trimmed for all items on the last flex line"> +<style> +flexbox { + display: flex; + width: min-content; + height: 100px; + flex-direction: column; + flex-wrap: wrap; + margin-trim: inline; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-inline-start: 10px; + margin-inline-end: 20px; +} +</style> +</head> +<body> +<flexbox> +<item></item> +<item></item> +<item></item> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-column-orthogonal-item.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-orthogonal-item.html new file mode 100644 index 0000000000..9f13e2ce71 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-orthogonal-item.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-column-orthogonal-item</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="orthogonal items have correct margins trimmed according to the flexbox's writing mode"> +<style> +flexbox { + display: flex; + flex-direction: column; + margin-trim: block; +} +item { + display: block; + background-color: green; + width: 100px; + height: 50px; +} +.orthogonal { + writing-mode: vertical-rl; +} +item:first-child { + margin-inline-start: 10px; +} +item:last-child { + margin-block-end: 10px; +} +</style> +</head> +<body> +<p>Test passes if there is a filled green square.</p> +<flexbox> +<item class="orthogonal"></item> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-column-shrink.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-shrink.html new file mode 100644 index 0000000000..06395ff6d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-shrink.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-column-shrink</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="content should fill all available space when flex item is larger than the container and the margins are trimmed"> +<style> +flexbox { + display: flex; + flex-direction: column; + width: min-content; + height: 100px; + margin-trim: block; +} +item { + display: block; + background-color: green; + margin-block: 25px; + flex: 0 1 auto; + width: 100px; + height: 150px; +} +</style> +</head> +<body> +<p>Test passes if there is a filled green square.</p> +<flexbox> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-end-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-end-ref.html new file mode 100644 index 0000000000..933ce0cb3b --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-end-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="Flex items react to change in their flexbox's margin-trim value"> +<style> +flexbox { + display: flex; + width: min-content; + flex-wrap: wrap; + border: 1px solid black; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; +} +.margin { + margin-block-end: 10px; +} +</style> +</head> +<body> + <flexbox> + <item class="margin"></item> + </flexbox> + <flexbox> + <item></item> + </flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-end.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-end.html new file mode 100644 index 0000000000..80f2c62d23 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-end.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="Flex items react to change in their flexbox's margin-trim value"> +<link rel="match" href="flex-column-style-change-triggers-layout-block-end-ref.html"> +<style> +flexbox { + display: flex; + flex-direction: column; + width: min-content; + flex-wrap: wrap; + border: 1px solid black; +} +.initial-margin-trim { + margin-trim: block-end; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-block-end: 10px; +} +</style> +</head> +<body> + <flexbox class="initial-margin-trim" id="to-no-margin-trim"> + <item></item> + </flexbox> + <flexbox id="to-margin-trim"> + <item></item> + </flexbox> +</body> +<script> +document.body.offsetHeight; +document.getElementById("to-no-margin-trim").style["margin-trim"] = "none"; +document.getElementById("to-margin-trim").style["margin-trim"] = "block-end"; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-ref.html new file mode 100644 index 0000000000..7b53e757d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="Flex items react to change in their flexbox's margin-trim value"> +<style> +flexbox { + display: flex; + width: min-content; + flex-wrap: wrap; + border: 1px solid black; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; +} +.margin { + margin-block: 10px; +} +</style> +</head> +<body> + <flexbox> + <item class="margin"></item> + </flexbox> + <flexbox> + <item></item> + </flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-start-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-start-ref.html new file mode 100644 index 0000000000..d58cd0827d --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-start-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="Flex items react to change in their flexbox's margin-trim value"> +<style> +flexbox { + display: flex; + width: min-content; + flex-wrap: wrap; + border: 1px solid black; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; +} +.margin { + margin-block-start: 10px; +} +</style> +</head> +<body> + <flexbox> + <item class="margin"></item> + </flexbox> + <flexbox> + <item></item> + </flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-start.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-start.html new file mode 100644 index 0000000000..15bdcdaebc --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-start.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<link rel="match" href="flex-column-style-change-triggers-layout-block-start-ref.html"> +<meta name="assert" content="Flex items react to change in their flexbox's margin-trim value"> +<style> +flexbox { + display: flex; + flex-direction: column; + width: min-content; + flex-wrap: wrap; + border: 1px solid black; +} +.initial-margin-trim { + margin-trim: block-start; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-block-start: 10px; +} +</style> +</head> +<body> + <flexbox class="initial-margin-trim" id="to-no-margin-trim"> + <item></item> + </flexbox> + <flexbox id="to-margin-trim"> + <item></item> + </flexbox> +</body> +<script> +document.body.offsetHeight; +document.getElementById("to-no-margin-trim").style["margin-trim"] = "none"; +document.getElementById("to-margin-trim").style["margin-trim"] = "block-start"; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block.html new file mode 100644 index 0000000000..505f62ff28 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<link rel="match" href="flex-column-style-change-triggers-layout-block-ref.html"> +<meta name="assert" content="Flex items react to change in their flexbox's margin-trim value"> +<style> +flexbox { + display: flex; + flex-direction: column; + width: min-content; + flex-wrap: wrap; + border: 1px solid black; +} +.initial-margin-trim { + margin-trim: block; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-block: 10px; +} +</style> +</head> +<body> + <flexbox class="initial-margin-trim" id="to-no-margin-trim"> + <item></item> + </flexbox> + <flexbox id="to-margin-trim"> + <item></item> + </flexbox> +</body> +<script> +document.body.offsetHeight; +document.getElementById("to-no-margin-trim").style["margin-trim"] = "none"; +document.getElementById("to-margin-trim").style["margin-trim"] = "block"; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-end-trimmed-only-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-end-trimmed-only-ref.html new file mode 100644 index 0000000000..9fb945d00c --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-end-trimmed-only-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-inline-end-trimmed-only</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="inline-end should trim only inline-end margins of flex items"> +<style> +flexbox { + display: flex; + width: min-content; + border: 1px black solid; + gap: 20px; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-block: 10px; +} +item:first-child { + margin-inline-start: 10px; +} +</style> +</head> +<body> +<flexbox> +<item></item> +<item></item> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-end-trimmed-only.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-end-trimmed-only.html new file mode 100644 index 0000000000..33451daf30 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-end-trimmed-only.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-inline-end-trimmed-only</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<link rel="match" href="flex-inline-end-trimmed-only-ref.html"> +<meta name="assert" content="inline-end should trim only inline-end margins of flex items"> +<style> +flexbox { + display: flex; + width: min-content; + border: 1px black solid; + margin-trim: inline-end; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-inline: 10px; + margin-block: 10px; +} +</style> +</head> +<body> +<flexbox> +<item></item> +<item></item> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-start-trimmed-only-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-start-trimmed-only-ref.html new file mode 100644 index 0000000000..f7dc9ec5c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-start-trimmed-only-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-inline-start-trimmed-only</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="inline-start should trim only inline-start margin of flex items"> +<style> +flexbox { + display: flex; + width: min-content; + border: 1px black solid; + gap: 20px; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-block: 10px; +} +item:last-child { + margin-inline-end: 10px; +} +</style> +</head> +<body> +<flexbox> +<item></item> +<item></item> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-start-trimmed-only.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-start-trimmed-only.html new file mode 100644 index 0000000000..05cf112e66 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-start-trimmed-only.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-inline-start-trimmed-only</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<link rel="match" href="flex-inline-start-trimmed-only-ref.html"> +<meta name="assert" content="inline-start trims only inline-start margin of flex items"> +<style> +flexbox { + display: flex; + width: min-content; + border: 1px black solid; + margin-trim: inline-start; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-inline: 10px; + margin-block: 10px; +} +</style> +</head> +<body> +<flexbox> +<item></item> +<item></item> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-trimmed-only-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-trimmed-only-ref.html new file mode 100644 index 0000000000..e262b903df --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-trimmed-only-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-inline-trimmed-only</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="inline should trim only the inline margins of flex items"> +<style> +flexbox { + display: flex; + width: min-content; + border: 1px black solid; + gap: 20px; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-block: 10px; +} +</style> +</head> +<body> +<flexbox> +<item></item> +<item></item> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-trimmed-only.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-trimmed-only.html new file mode 100644 index 0000000000..637dc485af --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-trimmed-only.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-inline-trimmed-only</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<link rel="match" href="flex-inline-trimmed-only-ref.html"> +<meta name="assert" content="inline will trim only the inline margins of flex items"> +<style> +flexbox { + display: flex; + width: min-content; + border: 1px black solid; + margin-trim: inline; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-inline: 10px; + margin-block: 10px; +} +</style> +</head> +<body> +<flexbox> +<item></item> +<item></item> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-row-block-multiline-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-block-multiline-ref.html new file mode 100644 index 0000000000..8eb29f5806 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-block-multiline-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-row-block-multiline</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="block-start margins are trimmed for items on first flex line and block-end margins and trimmed for items on last flex line"> +<style> +flexbox { + display: flex; + width: 100px; + flex-wrap: wrap; + gap: 20px 0px; + border: 1px solid black; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; +} +</style> +</head> +<body> +<flexbox> +<item></item> +<item></item> +<item></item> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-row-block-multiline.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-block-multiline.html new file mode 100644 index 0000000000..c8fc788ca2 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-block-multiline.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-row-block-multiline</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<link rel="match" href="flex-row-block-multiline-ref.html"> +<meta name="assert" content="block-start margins are trimmed for items on first flex line and block-end margins and trimmed for items on last flex line"> +<style> +flexbox { + display: flex; + width: 100px; + flex-wrap: wrap; + margin-trim: block; + border: 1px solid black; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-block: 10px; +} +</style> +</head> +<body> +<flexbox> +<item></item> +<item></item> +<item></item> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-row-grow.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-grow.html new file mode 100644 index 0000000000..64395461cf --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-grow.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-row-grow</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="items should grow to take up the space made available by trimming margins"> +<style> +flexbox { + display: flex; + width: 100px; + margin-trim: inline; +} +item { + display: block; + width: 50px; + height: 100px; + margin-inline: 25px; + flex: 1 0 auto; + background-color: green; +} +</style> +</head> +<body> +<p>Test passes if there is a filled green square.</p> +<flexbox> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-row-inline-multiline.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-inline-multiline.html new file mode 100644 index 0000000000..d563373d50 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-inline-multiline.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-row-inline-multiline</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="inline-start margins are trimmed for items at start of flex line and inline-end margins are trimmed for items at end of flex line"> +<style> +flexbox { + display: flex; + width: 100px; + flex-wrap: wrap; + margin-trim: inline; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; +} +item:nth-child(odd) { + margin-inline-start: 25px; +} +item:nth-child(even) { + margin-inline-end: 25px; +} +</style> +</head> +<body> +<p>Test passes if there is a filled green square.</p> +<flexbox> +<item></item> +<item></item> +<item></item> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-row-orthogonal-item.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-orthogonal-item.html new file mode 100644 index 0000000000..3facc7450c --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-orthogonal-item.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-row-orthogonal-item</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="orthogonal items have correct margins trimmed according to the flexbox's writing mode"> +<style> +flexbox { + display: flex; + width: min-content; + margin-trim: inline +} +item { + display: block; + background-color: green; + width: 50px; + height: 100px; +} +.orthogonal { + writing-mode: vertical-rl; +} +item:first-child { + margin-block-end: 10px; +} +item:last-child { + margin-inline-end: 10px; +} +</style> +</head> +<body> +<p>Test passes if there is a filled green square.</p> +<flexbox> +<item class="orthogonal"></item> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-row-shrink.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-shrink.html new file mode 100644 index 0000000000..172c946cb4 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-shrink.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-row-shrink</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="content should fill all available space when flex item is larger than the container and the margins are trimmed"> +<style> +flexbox { + display: flex; + width: 100px; + margin-trim: inline; +} +item { + display: block; + background-color: green; + margin-inline: 25px; + flex: 0 1 auto; + width: 150px; + height: 100px; +} +</style> +</head> +<body> +<p>Test passes if there is a filled green square.</p> +<flexbox> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-end-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-end-ref.html new file mode 100644 index 0000000000..cee1fbb55f --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-end-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="Flex items react to change in their flexbox's margin-trim value"> +<style> +flexbox { + display: flex; + width: min-content; + flex-wrap: wrap; + border: 1px solid black; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; +} +.margin { + margin-inline-end: 10px; +} +</style> +</head> +<body> + <flexbox> + <item class="margin"></item> + </flexbox> + <flexbox> + <item></item> + </flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-end.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-end.html new file mode 100644 index 0000000000..c17e043548 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-end.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="Flex items react to change in their flexbox's margin-trim value"> +<link rel="match" href="flex-row-style-change-triggers-layout-inline-end-ref.html"> +<style> +flexbox { + display: flex; + width: min-content; + flex-wrap: wrap; + border: 1px solid black; +} +.initial-margin-trim { + margin-trim: inline-end; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-inline-end: 10px; +} +</style> +</head> +<body> + <flexbox id="to-no-margin-trim" class="initial-margin-trim"> + <item></item> + </flexbox> + <flexbox id="to-margin-trim"> + <item></item> + </flexbox> +</body> +<script> +document.body.offsetHeight; +document.getElementById("to-no-margin-trim").style["margin-trim"] = "none"; +document.getElementById("to-margin-trim").style["margin-trim"] = "inline-end"; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-ref.html new file mode 100644 index 0000000000..455a88f78e --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="Flex items react to change in their flexbox's margin-trim value"> +<style> +flexbox { + display: flex; + width: min-content; + flex-wrap: wrap; + border: 1px solid black; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; +} +.margin { + margin-inline: 10px; +} +</style> +</head> +<body> + <flexbox> + <item class="margin"></item> + </flexbox> + <flexbox> + <item></item> + </flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-start-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-start-ref.html new file mode 100644 index 0000000000..966bdf1be8 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-start-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="Flex items react to change in their flexbox's margin-trim value"> +<style> +flexbox { + display: flex; + width: min-content; + flex-wrap: wrap; + border: 1px solid black; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; +} +.margin { + margin-inline-start: 10px; +} +</style> +</head> +<body> + <flexbox> + <item class="margin"></item> + </flexbox> + <flexbox> + <item></item> + </flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-start.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-start.html new file mode 100644 index 0000000000..87118ff698 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-start.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<link rel="match" href="flex-row-style-change-triggers-layout-inline-start-ref.html"> +<meta name="assert" content="Flex items react to change in their flexbox's margin-trim value"> +<style> +flexbox { + display: flex; + width: min-content; + flex-wrap: wrap; + border: 1px solid black; +} +.initial-margin-trim { + margin-trim: inline-start; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-inline-start: 10px; +} +</style> +</head> +<body> + <flexbox class="initial-margin-trim" id="to-no-margin-trim"> + <item></item> + </flexbox> + <flexbox id="to-margin-trim"> + <item></item> + </flexbox> +</body> +<script> +document.body.offsetHeight; +document.getElementById("to-no-margin-trim").style["margin-trim"] = "none"; +document.getElementById("to-margin-trim").style["margin-trim"] = "inline-start"; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline.html new file mode 100644 index 0000000000..2e02643e58 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<link rel="match" href="flex-row-style-change-triggers-layout-inline-ref.html"> +<meta name="assert" content="Flex items react to change in their flexbox's margin-trim value"> +<style> +flexbox { + display: flex; + width: min-content; + flex-wrap: wrap; + border: 1px solid black; +} +.initial-margin-trim { + margin-trim: inline; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-inline: 10px; +} +</style> +</head> +<body> + <flexbox class="initial-margin-trim" id="to-no-margin-trim"> + <item></item> + </flexbox> + <flexbox id="to-margin-trim"> + <item></item> + </flexbox> +</body> +<script> +document.body.offsetHeight; +document.getElementById("to-no-margin-trim").style["margin-trim"] = "none"; +document.getElementById("to-margin-trim").style["margin-trim"] = "inline"; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-trim-all-margins-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-trim-all-margins-ref.html new file mode 100644 index 0000000000..aebc1045d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-trim-all-margins-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-trim-all-margins</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<meta name="assert" content="specifying all margin edges should trim all of them correctly for the appropriate items"> +<style> +flexbox { + display: flex; + width: min-content; + gap: 20px; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; +} +</style> +</head> +<body> +<flexbox> +<item></item> +<item></item> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-trim-all-margins.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-trim-all-margins.html new file mode 100644 index 0000000000..1c2eda8aa0 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-trim-all-margins.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: flex-trim-all-margins</title> +<link rel="author" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex"> +<link rel="match" href="flex-trim-all-margins-ref.html"> +<meta name="assert" content="specifying all margin edges should trim all of them correctly for the appropriate items"> +<style> +flexbox { + display: flex; + width: min-content; + margin-trim: block-start block-end inline-start inline-end; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-inline: 10px; + margin-block: 10px; +} +</style> +</head> +<body> +<flexbox> +<item></item> +<item></item> +<item></item> +</flexbox> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/grid-block-end-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/grid-block-end-ref.html new file mode 100644 index 0000000000..0ada645147 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/grid-block-end-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: grid-block-end</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> +<meta name="assert" content="block-end should trim block-end margins of items on last row"> +<style> +grid { + display: inline-grid; + border: 1px solid black; + grid-template-columns: auto auto; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; +} +</style> +</head> +<body> +<grid> +<item style="grid-row: span 2; height: auto;"></item> +<item style="margin-block-end: 10px;"></item> +<item></item> +</grid> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/grid-block-end.html b/testing/web-platform/tests/css/css-box/margin-trim/grid-block-end.html new file mode 100644 index 0000000000..ffbc374756 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/grid-block-end.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: grid-block-end</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> +<link rel="match" href="grid-block-end-ref.html"> +<meta name="assert" content="block-end should trim block-end margins of items on last row"> +<style> +grid { + display: inline-grid; + border: 1px solid black; + grid-template-columns: auto auto; + margin-trim: block-end; +} + +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-block-end: 10px; +} +</style> +</head> +<body> +<grid> +<item style="grid-row: span 2; height: auto;"></item> +<item></item> +<item></item> +</grid> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/grid-block-start-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/grid-block-start-ref.html new file mode 100644 index 0000000000..486b64c74a --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/grid-block-start-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: grid-block-start</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> +<meta name="assert" content="block-start should trim block-start margins of items on first row"> +<style> +grid { + display: inline-grid; + border: 1px solid black; + grid-template-columns: auto auto; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; +} +.block-start-margin { + margin-block-start: 10px; +} +</style> +</head> +<body> +<grid> +<item></item> +<item></item> +<item class="block-start-margin"></item> +<item class="block-start-margin"></item> +</grid> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/grid-block-start.html b/testing/web-platform/tests/css/css-box/margin-trim/grid-block-start.html new file mode 100644 index 0000000000..21d5447253 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/grid-block-start.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: grid-block-start</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> +<link rel="match" href="grid-block-start-ref.html"> +<meta name="assert" content="block-start should trim block-start margins of items on first row"> +<style> +grid { + display: inline-grid; + border: 1px solid black; + grid-template-columns: auto auto; + margin-trim: block-start; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-block-start: 10px; +} +</style> +</head> +<body> +<grid> +<item></item> +<item></item> +<item></item> +<item></item> +</grid> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/grid-block.html b/testing/web-platform/tests/css/css-box/margin-trim/grid-block.html new file mode 100644 index 0000000000..6a4c3bbc94 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/grid-block.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: grid-block</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="block should trim block-start margin of items on first row and block-end margins of items on last row"> +<style> +grid { + display: inline-grid; + grid-template-columns: auto auto; + margin-trim: block; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; +} +.block-start-margin { + margin-block-start: 10px; +} +.block-end-margin { + margin-block-end: 20px; +} +</style> +</head> +<body> +<p>Test passes if there is a filled green square.</p> +<grid> +<item class="block-start-margin"></item> +<item class="block-start-margin"></item> +<item class="block-end-margin"></item> +<item class="block-end-margin"></item> +</grid> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/grid-inline-end-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/grid-inline-end-ref.html new file mode 100644 index 0000000000..e51a97faf8 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/grid-inline-end-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: grid-inline-end</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> +<meta name="assert" content="inline-end should trim inline-end margins of items on last column"> +<style> +grid { + display: inline-grid; + border: 1px solid black; + grid-template-columns: auto auto; + margin-trim: inline-end; +} + +item { + display: block; + background-color: green; + width: 50px; + height: 50px; +} +</style> +</head> +<body> +<grid> +<item style="grid-column: span 2; width: auto;"></item> +<item style="margin-inline-end: 10px;"></item> +<item></item> +</grid> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/grid-inline-end.html b/testing/web-platform/tests/css/css-box/margin-trim/grid-inline-end.html new file mode 100644 index 0000000000..3754a9b50a --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/grid-inline-end.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: grid-inline-end</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> +<link rel="match" href="grid-inline-end-ref.html"> +<meta name="assert" content="inline-end should trim inline-end margins of items on last column"> +<style> +grid { + display: inline-grid; + border: 1px solid black; + grid-template-columns: auto auto; + margin-trim: inline-end; +} + +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-inline-end: 10px; +} +</style> +</head> +<body> +<grid> +<item style="grid-column: span 2; width: auto;"></item> +<item></item> +<item></item> +</grid> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/grid-inline-start-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/grid-inline-start-ref.html new file mode 100644 index 0000000000..c35b1f5fe6 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/grid-inline-start-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: grid-inline-start</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> +<meta name="assert" content="inline-start should trim inline-start margins of items on first column"> +<style> +grid { + display: inline-grid; + border: 1px solid black; + grid-template-columns: auto auto; + margin-trim: inline-start; +} + +item { + display: block; + background-color: green; + width: 50px; + height: 50px; +} +.inline-start-margin { + margin-inline-start: 10px; +} +</style> +</head> +<body> +<grid> +<item></item> +<item class="inline-start-margin"></item> +<item></item> +<item class="inline-start-margin"></item> +</grid> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/grid-inline-start.html b/testing/web-platform/tests/css/css-box/margin-trim/grid-inline-start.html new file mode 100644 index 0000000000..e0f4c6d454 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/grid-inline-start.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: grid-inline-start</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> +<link rel="match" href="grid-inline-start-ref.html"> +<meta name="assert" content="inline-start should trim inline-start margins of items on first column"> +<style> +grid { + display: inline-grid; + border: 1px solid black; + grid-template-columns: auto auto; + margin-trim: inline-start; +} + +item { + display: block; + background-color: green; + width: 50px; + height: 50px; + margin-inline-start: 10px; +} +</style> +</head> +<body> +<grid> +<item></item> +<item></item> +<item></item> +<item></item> +</grid> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/grid-inline.html b/testing/web-platform/tests/css/css-box/margin-trim/grid-inline.html new file mode 100644 index 0000000000..1ac228296a --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/grid-inline.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: grid-inline</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="inline should trim inline-start margin of items on first column and inline-end margins of items on last column"> +<style> +grid { + display: inline-grid; + grid-template-columns: auto auto; + margin-trim: inline; +} +item { + display: block; + background-color: green; + width: 50px; + height: 50px; +} +item:nth-child(odd) { + margin-inline-start: 10px; +} +item:nth-child(even) { + margin-inline-end: 20px; +} +</style> +</head> +<body> +<p>Test passes if there is a filled green square.</p> +<grid> +<item></item> +<item></item> +<item></item> +<item></item> +</grid> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-box/margin-trim/grid-trim-ignores-collapsed-tracks.html b/testing/web-platform/tests/css/css-box/margin-trim/grid-trim-ignores-collapsed-tracks.html new file mode 100644 index 0000000000..15768ea7aa --- /dev/null +++ b/testing/web-platform/tests/css/css-box/margin-trim/grid-trim-ignores-collapsed-tracks.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<title>margin-trim: grid-trim-ignores-collapsed-tracks</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="should ignore collapsed margins when determining if an edge should be trimmed"> +<style> +grid { + display: inline-grid; + grid-template-rows: repeat(auto-fit, 250px); + grid-template-columns: repeat(auto-fit, 250px); + margin-trim: block-start inline-start; +} +item { + display: block; + background-color: green; + grid-column: 2; + grid-row: 2; + margin-inline-start: 30px; + margin-block-start: 50px; + width: 100px; + height: 100px; +} +</style> +</head> +<body> +<p>Test passes if there is a filled green square.</p> +<grid> +<item></item> +</grid> +</body> +</html> |