Skip to content

GitLab

T
tangled
Commit f511fde8 authored by Antonio Gomes's avatar Antonio Gomes Committed by Commit Bot
Browse files
Options

[css-grid] Migrate grid-gutters-and-flex-content.html to WPT 

Drive-by: some \t are renamed at 4-spaces.

BUG=767015, 1063749
R=rego@igalia.com

Change-Id: I369fc1fb602c4b87f33d8fe14b517743e82aec02
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2154460
Commit-Queue: Antonio Gomes <tonikitoo@igalia.com>
Reviewed-by: default avatarManuel Rego <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#760071}
parent 0d051b34
Hide whitespace changes
Inline Side-by-side
Showing with 23 additions and 13 deletions
third_party/blink/web_tests/fast/css-grid-layout/grid-gutters-and-flex-content.html → third_party/blink/web_tests/external/wpt/css/css-grid/grid-model/grid-gutters-and-flex-content-001.html
View file @ f511fde8
<!DOCTYPE html> <!DOCTYPE html>
<link href="resources/grid.css" rel="stylesheet"> <title>CSS Grid: grid gutters and flex content.</title>
<link href="resources/grid-alignment.css" rel="stylesheet"> <link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel=stylesheet> <link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters"/>
<script src="../../resources/check-layout.js"></script> <meta name="assert" content="Check that gutters do not interfere with flex content resolution for columns or with content sized tracks."/>
<script src="../../resources/js-test.js"></script> <link rel="stylesheet" href="/css/support/grid.css"/>
<link rel="stylesheet" href="/css/support/width-keyword-classes.css"/>
<link rel="stylesheet" href="/css/support/alignment.css">
<link rel="stylesheet" href="/fonts/ahem.css" type="text/css"/>
<style> <style>
.gridPercentAndFlexContent { grid-template: 50px / 50% minmax(30px, 2fr); } .gridPercentAndFlexContent { grid-template: 50px / 50% minmax(30px, 2fr); }
.gridTwoDoubleMaxFlexContent { grid-template: 50px / minmax(10px, 0.5fr) minmax(10px, 2fr); } .gridTwoDoubleMaxFlexContent { grid-template: 50px / minmax(10px, 0.5fr) minmax(10px, 2fr); }
...@@ -22,9 +25,16 @@ div.grid > div { font: 10px/1 Ahem; } ...@@ -22,9 +25,16 @@ div.grid > div { font: 10px/1 Ahem; }
grid-row-gap: 33px; grid-row-gap: 33px;
grid-column-gap: 19px; grid-column-gap: 19px;
} }
</style> </style>
<body onload="checkLayout('.grid');">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script type="text/javascript">
setup({ explicit_done: true });
</script>
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
<!-- Check that gutters do not interfere with flex content resolution for columns --> <!-- Check that gutters do not interfere with flex content resolution for columns -->
...@@ -76,18 +86,18 @@ div.grid > div { font: 10px/1 Ahem; } ...@@ -76,18 +86,18 @@ div.grid > div { font: 10px/1 Ahem; }
<div style="position: relative; width: 100px;"> <div style="position: relative; width: 100px;">
<div class="grid gridMinContentAndMinMaxFixedMinContentAndFlex gridRowColumnGaps" data-expected-width="100" data-expected-height="149"> <div class="grid gridMinContentAndMinMaxFixedMinContentAndFlex gridRowColumnGaps" data-expected-width="100" data-expected-height="149">
<div style="grid-column: 2 / span 2;" data-expected-width="80">XXXXX</div> <div style="grid-column: 2 / span 2;" data-expected-width="80">XXXXX</div>
<div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="100">XXX XXX XXX</div> <div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="100">XXX XXX XXX</div>
<div style="grid-column: 1 / span 2; grid-row: 3;" data-expected-width="40">XXXX XXXX</div> <div style="grid-column: 1 / span 2; grid-row: 3;" data-expected-width="40">XXXX XXXX</div>
<div style="grid-column: 1; grid-row: 4;" data-expected-width="1" data-expected-height="0"></div> <div style="grid-column: 1; grid-row: 4;" data-expected-width="1" data-expected-height="0"></div>
</div> </div>
</div> </div>
<div style="position: relative; width: 100px;"> <div style="position: relative; width: 100px;">
<div class="grid gridMaxContentAndMinMaxFixedMaxContentAndFlex gridRowColumnGaps" data-expected-width="100" data-expected-height="139"> <div class="grid gridMaxContentAndMinMaxFixedMaxContentAndFlex gridRowColumnGaps" data-expected-width="100" data-expected-height="139">
<div style="grid-column: 2 / span 2;" data-expected-width="39">XX</div> <div style="grid-column: 2 / span 2;" data-expected-width="39">XX</div>
<div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="109">XXX XXX XXX</div> <div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="109">XXX XXX XXX</div>
<div style="grid-column: 1 / span 2; grid-row: 3;" data-expected-width="90">XXXX XXXX</div> <div style="grid-column: 1 / span 2; grid-row: 3;" data-expected-width="90">XXXX XXXX</div>
<div style="grid-column: 1; grid-row: 4;" data-expected-width="51" data-expected-height="0"></div> <div style="grid-column: 1; grid-row: 4;" data-expected-width="51" data-expected-height="0"></div>
</div> </div>
</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