Skip to content

GitLab

T
tangled
Commit 80faa07f authored by Javier Fernandez's avatar Javier Fernandez Committed by Commit Bot
Browse files
Options

[css-grid] Ignore previously computed auto margins when relayout 

This new NG layout engine implements a different approach for margin
calculation, giving the containing block the responsibility of its
children's margin computation.

However, in legacy layout this is children's responsibility; this is
the reason why the issue this patch tries to fix is only only
reproducible using layout-ng.

The grid code assumed this legacy behavior when computing the 'auto'
margins of the grid items. So, in order to fix the bug, this patch
just ignores any previously computed 'auto' margin when performing a
a relayout of a grid cntainer.

Bug: 994300
Change-Id: I44658876f7c2f2067202e45c6a552593bddfe6c9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1763749
Commit-Queue: Javier Fernandez <jfernandez@igalia.com>
Reviewed-by: default avatarIan Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: default avatarChristian Biesinger <cbiesinger@chromium.org>
Cr-Commit-Position: refs/heads/master@{#692108}
parent ee668df5
Hide whitespace changes
Inline Side-by-side
Showing with 807 additions and 6 deletions
third_party/blink/renderer/core/layout/layout_grid.cc
View file @ 80faa07f
......@@ -1554,14 +1554,22 @@ DISABLE_CFI_PERF
void LayoutGrid::UpdateAutoMarginsInRowAxisIfNeeded(LayoutBox& child) {
DCHECK(!child.IsOutOfFlowPositioned());
const Length& margin_start = child.StyleRef().MarginStartUsing(StyleRef());
const Length& margin_end = child.StyleRef().MarginEndUsing(StyleRef());
LayoutUnit margin_logical_width;
// We should only consider computed margins if their specified value isn't
// 'auto', since such computed value may come from a previous layout and may
// be incorrect now.
if (!margin_start.IsAuto())
margin_logical_width += child.MarginStart();
if (!margin_end.IsAuto())
margin_logical_width += child.MarginEnd();
LayoutUnit available_alignment_space =
child.OverrideContainingBlockContentLogicalWidth() -
child.LogicalWidth() - child.MarginLogicalWidth();
child.LogicalWidth() - margin_logical_width;
if (available_alignment_space <= 0)
return;
const Length& margin_start = child.StyleRef().MarginStartUsing(StyleRef());
const Length& margin_end = child.StyleRef().MarginEndUsing(StyleRef());
if (margin_start.IsAuto() && margin_end.IsAuto()) {
child.SetMarginStart(available_alignment_space / 2, Style());
child.SetMarginEnd(available_alignment_space / 2, Style());
......@@ -1578,14 +1586,22 @@ DISABLE_CFI_PERF
void LayoutGrid::UpdateAutoMarginsInColumnAxisIfNeeded(LayoutBox& child) {
DCHECK(!child.IsOutOfFlowPositioned());
const Length& margin_before = child.StyleRef().MarginBeforeUsing(StyleRef());
const Length& margin_after = child.StyleRef().MarginAfterUsing(StyleRef());
LayoutUnit margin_logical_height;
// We should only consider computed margins if their specified value isn't
// 'auto', since such computed value may come from a previous layout and may
// be incorrect now.
if (!margin_before.IsAuto())
margin_logical_height += child.MarginBefore();
if (!margin_after.IsAuto())
margin_logical_height += child.MarginAfter();
LayoutUnit available_alignment_space =
child.OverrideContainingBlockContentLogicalHeight() -
child.LogicalHeight() - child.MarginLogicalHeight();
child.LogicalHeight() - margin_logical_height;
if (available_alignment_space <= 0)
return;
const Length& margin_before = child.StyleRef().MarginBeforeUsing(StyleRef());
const Length& margin_after = child.StyleRef().MarginAfterUsing(StyleRef());
if (margin_before.IsAuto() && margin_after.IsAuto()) {
child.SetMarginBefore(available_alignment_space / 2, Style());
child.SetMarginAfter(available_alignment_space / 2, Style());
......
third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html 0 → 100644
View file @ 80faa07f
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid's height changes.">
<style>
#grid {
display: grid;
position: relative;
background: grey;
grid-template-rows: 40% 60%;
height: 500px;
width: 300px;
}
#grid div {
margin: auto 0px auto 0px;
}
#item1 {
background: green;
width: 25px;
height: 50px;
}
#item2 {
background: blue;
width: 25px;
height: 100px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
</div>
<script>
item1.setAttribute("data-offset-y", "75");
item2.setAttribute("data-offset-y", "300");
checkLayout('#grid');
grid.style.height = "300px";
item1.setAttribute("data-offset-y", "35");
item2.setAttribute("data-offset-y", "160");
checkLayout('#grid');
</script>
third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html 0 → 100644
View file @ 80faa07f
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid item's height changes.">
<style>
#grid {
display: grid;
position: relative;
background: grey;
grid-template-rows: 40% 60%;
height: 500px;
width: 300px;
}
#grid div {
margin: auto 0px auto 0px;
}
#item1 {
background: green;
width: 25px;
height: 50px;
}
#item2 {
background: blue;
width: 25px;
height: 100px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
</div>
<script>
item1.setAttribute("data-offset-y", "75");
item2.setAttribute("data-offset-y", "300");
checkLayout('#grid');
item1.style.height = "100px";
item1.setAttribute("data-offset-y", "50");
item2.setAttribute("data-offset-y", "300");
checkLayout('#grid');
</script>
third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html 0 → 100644
View file @ 80faa07f
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid items's height changes.">
<style>
#grid {
display: grid;
position: relative;
background: grey;
grid-template-columns: 300px;
grid-template-rows: 40% 60%;
height: 500px;
width: 300px;
}
#grid div {
margin: auto 0px auto 0px;
}
#item1 {
background: green;
width: 25px;
height: 50px;
}
#item2 {
background: blue;
width: 25px;
height: 100px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
</div>
<script>
item1.setAttribute("data-offset-y", "75");
item2.setAttribute("data-offset-y", "300");
checkLayout('#grid');
item1.style.height = "100px";
item1.setAttribute("data-offset-y", "50");
item2.setAttribute("data-offset-y", "300");
checkLayout('#grid');
</script>
third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html 0 → 100644
View file @ 80faa07f
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid's height changes.">
<style>
#grid {
display: grid;
position: relative;
background: grey;
grid-template-columns: 300px;
grid-template-rows: 40% 60%;
height: 500px;
width: min-content;
}
#grid div {
margin: auto 0px auto 0px;
}
#item1 {
background: green;
width: 25px;
height: 50px;
}
#item2 {
background: blue;
width: 25px;
height: 100px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
</div>
<script>
item1.setAttribute("data-offset-y", "75");
item2.setAttribute("data-offset-y", "300");
checkLayout('#grid');
grid.style.height = "300px";
item1.setAttribute("data-offset-y", "35");
item2.setAttribute("data-offset-y", "160");
checkLayout('#grid');
</script>
third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html 0 → 100644
View file @ 80faa07f
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid item's height changes.">
<style>
#grid {
display: grid;
position: relative;
background: grey;
grid-template-rows: 40% 60%;
height: 500px;
width: 300px;
}
#grid div {
margin: auto 0px auto 0px;
}
#item1 {
font: 20px/1 Ahem;
color: green;
}
#item2 {
font: 10px/1 Ahem;
color: blue;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<div id="grid">
<div id="item1">XXXXX</div>
<div id="item2">XXXXX</div>
</div>
<script>
item1.setAttribute("data-offset-y", "90");
item2.setAttribute("data-offset-y", "345");
checkLayout('#grid');
item2.style.fontSize = "40px";
item1.setAttribute("data-offset-y", "90");
item2.setAttribute("data-offset-y", "330");
checkLayout('#grid');
</script>
third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html 0 → 100644
View file @ 80faa07f
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid item's height changes.">
<style>
#grid {
display: grid;
position: relative;
background: grey;
font: 10px/1 Ahem;
grid-template-columns: 100px;
grid-template-rows: 40% 60%;
height: 500px;
width: 300px;
}
#grid div {
margin: auto 0px auto 0px;
}
#item1 {
color: green;
}
#item2 {
color: blue;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<div id="grid">
<div id="item1">XXXXX</div>
<div id="item2">XXXXX</div>
</div>
<script>
item1.setAttribute("data-offset-y", "95");
item2.setAttribute("data-offset-y", "345");
checkLayout('#grid');
grid.style.fontSize = "40px";
item1.setAttribute("data-offset-y", "80");
item2.setAttribute("data-offset-y", "330");
checkLayout('#grid');
</script>
third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html 0 → 100644
View file @ 80faa07f
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid's height changes.">
<style>
#grid {
display: grid;
position: relative;
background: grey;
grid-template-rows: 40% 60%;
height: 500px;
width: 200px;
}
#grid div {
margin: auto 0px auto 0px;
}
#item1 {
background: green;
width: 25px;
height: 50px;
}
#item2 {
background: blue;
width: 25px;
height: 100px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
</div>
<script>
item1.setAttribute("data-offset-y", "75");
item2.setAttribute("data-offset-y", "300");
checkLayout('#grid');
grid.style.height = "300px";
item1.setAttribute("data-offset-y", "35");
item2.setAttribute("data-offset-y", "160");
checkLayout('#grid');
</script>
third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-008.html 0 → 100644
View file @ 80faa07f
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
<link rel="match" href="../reference/grid-block-axis-alignment-auto-margins-008-ref.html">
<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed after the grid's intrinsic size is determined.">
<style>
#grid {
display: grid;
position: relative;
background: grey;
grid-template-columns: auto;
grid-template-rows: 40% 60%;
height: 50vh;
width: auto;
}
#grid div {
margin: auto 0px auto 0px;
}
#item1 {
font: 20px/1 Ahem;
color: green;
}
#item2 {
font: 40px/1 Ahem;
color: blue;
}
</style>
<p>The test passes if it has the same visual effect as reference.</p>
<div id="grid">
<div id="item1">XXX</div>
<div id="item2">XXXXX</div>
</div>
third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001.html 0 → 100644
View file @ 80faa07f
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid's width changes.">
<style>
#grid {
display: grid;
position: relative;
background: grey;
grid-template-columns: 40% 60%;
height: 30vh;
width: 500px;
}
#grid div {
margin: 0px auto 0px auto;
}
#item1 {
background: green;
width: 50px;
height: 25px;
}
#item2 {
background: blue;
width: 100px;
height: 25px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
</div>
<script>
item1.setAttribute("data-offset-x", "75");
item2.setAttribute("data-offset-x", "300");
checkLayout('#grid');
grid.style.width = "300px";
item1.setAttribute("data-offset-x", "35");
item2.setAttribute("data-offset-x", "160");
checkLayout('#grid');
</script>
third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002.html 0 → 100644
View file @ 80faa07f
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid item's width changes.">
<style>
#grid {
display: grid;
position: relative;
background: grey;
grid-template-columns: 40% 60%;
height: 30vh;
width: 500px;
}
#grid div {
margin: 0px auto 0px auto;
}
#item1 {
background: green;
width: 50px;
height: 25px;
}
#item2 {
background: blue;
width: 100px;
height: 25px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
</div>
<script>
item1.setAttribute("data-offset-x", "75");
item2.setAttribute("data-offset-x", "300");
checkLayout('#grid');
item1.style.width = "100px";
item1.setAttribute("data-offset-x", "50");
item2.setAttribute("data-offset-x", "300");
checkLayout('#grid');
</script>
third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003.html 0 → 100644
View file @ 80faa07f
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid items's width changes.">
<style>
#grid {
display: grid;
position: relative;
background: grey;
grid-template-columns: 40% 60%;
grid-template-rows: 300px;
height: 400px;
width: 500px;
}
#grid div {
margin: 0px auto 0px auto;
}
#item1 {
background: green;
width: 50px;
height: 25px;
}
#item2 {
background: blue;
width: 100px;
height: 25px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
</div>
<script>
item1.setAttribute("data-offset-x", "75");
item2.setAttribute("data-offset-x", "300");
checkLayout('#grid');
item1.style.width = "100px";
item1.setAttribute("data-offset-x", "50");
item2.setAttribute("data-offset-x", "300");
checkLayout('#grid');
</script>
third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004.html 0 → 100644
View file @ 80faa07f
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid's width changes.">
<style>
#grid {
display: grid;
position: relative;
background: grey;
grid-template-columns: 40% 60%;
grid-template-rows: 300px;
height: auto;
width: 500px;
}
#grid div {
margin: 0px auto 0px auto;
}
#item1 {
background: green;
width: 50px;
height: 25px;
}
#item2 {
background: blue;
width: 100px;
height: 25px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
</div>
<script>
item1.setAttribute("data-offset-x", "75");
item2.setAttribute("data-offset-x", "300");
checkLayout('#grid');
grid.style.width = "300px";
item1.setAttribute("data-offset-x", "35");
item2.setAttribute("data-offset-x", "160");
checkLayout('#grid');
</script>
third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005.html 0 → 100644
View file @ 80faa07f
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid items's width changes.">
<style>
#grid {
display: grid;
position: relative;
background: grey;
grid-template-columns: 40% 60%;
grid-template-rows: 100px;
height: 200px;
width: 500px;
align-items: start;
}
#grid div {
margin: 0px auto 0px auto;
}
#item1 {
font: 20px/1 Ahem;
color: green;
}
#item2 {
font: 10px/1 Ahem;
color: blue;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<div id="grid">
<div id="item1">XXXXX</div>
<div id="item2">XXXXX</div>
</div>
<script>
item1.setAttribute("data-offset-x", "50");
item2.setAttribute("data-offset-x", "325");
checkLayout('#grid');
item2.style.fontSize = "30px";
item1.setAttribute("data-offset-x", "50");
item2.setAttribute("data-offset-x", "275");
checkLayout('#grid');
</script>
third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006.html 0 → 100644
View file @ 80faa07f
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid items's width changes.">
<style>
#grid {
display: grid;
position: relative;
background: grey;
font: 10px/1 Ahem;
grid-template-columns: 40% 60%;
grid-template-rows: 100px;
height: auto;
width: 500px;
align-items: start;
}
#grid div {
margin: 0px auto 0px auto;
}
#item1 {
color: green;
}
#item2 {
color: blue;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<div id="grid">
<div id="item1">XXXX</div>
<div id="item2">XX</div>
</div>
<script>
item1.setAttribute("data-offset-x", "80");
item2.setAttribute("data-offset-x", "340");
checkLayout('#grid');
grid.style.fontSize = "25px";
item1.setAttribute("data-offset-x", "50");
item2.setAttribute("data-offset-x", "325");
checkLayout('#grid');
</script>
third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007.html 0 → 100644
View file @ 80faa07f
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid's width changes.">
<style>
#grid {
display: grid;
position: relative;
background: grey;
grid-template-columns: 40% 60%;
height: 200px;
width: 500px;
}
#grid div {
margin: 0px auto 0px auto;
}
#item1 {
background: green;
width: 50px;
height: 25px;
}
#item2 {
background: blue;
width: 100px;
height: 25px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
</div>
<script>
item1.setAttribute("data-offset-x", "75");
item2.setAttribute("data-offset-x", "300");
checkLayout('#grid');
grid.style.width = "300px";
item1.setAttribute("data-offset-x", "35");
item2.setAttribute("data-offset-x", "160");
checkLayout('#grid');
</script>
third_party/blink/web_tests/external/wpt/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-008.html 0 → 100644
View file @ 80faa07f
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
<link rel="match" href="../reference/grid-inline-axis-alignment-auto-margins-008-ref.html">
<meta name="assert" content="The 'left' and 'right' margins must be recomputed after the grid's intrinsic size is determined.">
<style>
#grid {
display: grid;
position: relative;
background: grey;
grid-template-columns: 40% 60%;
grid-template-rows: 100px;
height: 200px;
width: auto;
align-items: start;
}
#grid div {
margin: 0px auto 0px auto;
}
#item1 {
font: 20px/1 Ahem;
color: green;
}
#item2 {
font: 40px/1 Ahem;
color: blue;
}
</style>
<p>The test passes if it has the same visual effect as reference.</p>
<div id="grid">
<div id="item1">XXX</div>
<div id="item2">XXXXX</div>
</div>
third_party/blink/web_tests/external/wpt/css/css-grid/reference/grid-block-axis-alignment-auto-margins-008-ref.html 0 → 100644
View file @ 80faa07f
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Reference: Aligning grid items using 'auto' margins</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<style>
#grid {
display: grid;
position: relative;
background: grey;
grid-template-columns: 100px;
grid-template-rows: 40% 60%;
height: 50vh;
width: auto;
align-items: center;
}
#item1 {
font: 20px/1 Ahem;
color: green;
}
#item2 {
font: 40px/1 Ahem;
color: blue;
}
</style>
<p>The test passes if it has the same visual effect as reference.</p>
<div id="grid">
<div id="item1">XXX</div>
<div id="item2">XXXXX</div>
</div>
third_party/blink/web_tests/external/wpt/css/css-grid/reference/grid-inline-axis-alignment-auto-margins-008-ref.html 0 → 100644
View file @ 80faa07f
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Reference: Aligning grid items using 'auto' margins</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<style>
#grid {
display: grid;
position: relative;
background: grey;
grid-template-columns: 40% 60%;
grid-template-rows: 100px;
height: 200px;
width: auto;
justify-items: center;
align-items: start;
}
#item1 {
font: 20px/1 Ahem;
color: green;
}
#item2 {
font: 40px/1 Ahem;
color: blue;
}
</style>
<p>The test passes if it has the same visual effect as reference.</p>
<div id="grid">
<div id="item1">XXX</div>
<div id="item2">XXXXX</div>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment