Commit 37c0eb17 authored by Gyuyoung Kim's avatar Gyuyoung Kim Committed by Commit Bot

[css-grid] Migrate floating-not-effect-on-grid-items.html to WPT

This CL migrates floating-not-effect-on-grid-items.html
from fast/css-grid-layout to
external/wpt/css/css-grid/grid-model with WPT styles,
adding links to the relevant specs, and test description.

Additionally, this test is renamed to grid-float-002.html
to be aligned with existing tests.

Bug: 1063749
Change-Id: I1fe5a1a554ee2e2a15f526c8d1f18b8ba013ce6c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2153446
Commit-Queue: Gyuyoung Kim <gyuyoung@igalia.com>
Reviewed-by: default avatarManuel Rego <rego@igalia.com>
Reviewed-by: default avatarJavier Fernandez <jfernandez@igalia.com>
Cr-Commit-Position: refs/heads/master@{#760297}
parent c36b015e
<!DOCTYPE html>
<html>
<title>CSS Grid Layout Test: 'float' and 'clear' have no effect on a grid item.</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-containers"/>
<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=79180"/>
<link href="/css/support/grid.css" rel="stylesheet"/>
<link href="/css/support/alignment.css" rel="stylesheet"/>
<meta name="assert" content="This test ensures that the grid's items are not affected by the 'float' and 'clear' properties."/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<style>
.container {
background-color:grey;
}
.gridItem {
width: 50px;
height: 50px;
}
</style>
<body onload="checkLayout('.container')">
<div style="position: relative">
<div class="container grid justifyContentStart">
<div style="float: right;" class="gridItem firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
<div class="gridItem firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
<div style="float: left;" class="gridItem firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
<div style="float: left;" class="gridItem secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
<div style="clear: both;" class="gridItem secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
<div style="float: left;" class="gridItem secondRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
</div>
</div>
</body>
</html>
This test checks that the grid's items are not affected by the 'float' and 'clear' properties.
PASS
<!DOCTYPE html>
<html>
<link href="resources/grid.css" rel="stylesheet">
<link href="resources/grid-alignment.css" rel="stylesheet">
<script src="../../resources/check-layout.js"></script>
<style>
.container {
background-color:grey;
}
.gridItem {
width: 50px;
height: 50px;
}
</style>
<body onload="checkLayout('.container')">
<p>This test checks that the grid's items are not affected by the 'float' and 'clear' properties.</p>
<div style="position: relative">
<div class="container grid justifyContentStart">
<div style="float: right;" class="gridItem firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
<div class="gridItem firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
<div style="float: left;" class="gridItem firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
<div style="float: left;" class="gridItem secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
<div style="clear: both;" class="gridItem secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
<div style="float: left;" class="gridItem secondRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
</div>
</div>
</body>
</html>
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