diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values')
31 files changed, 1320 insertions, 0 deletions
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> |