forked from web-platform-tests/wpt
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
WebKit export: CSS Masonry Intrinsic Sizing tests (web-platform-tests…
…#49475) Split these test cases up to make them easier to analyze, and fix numerous bugs with the test cases. https://bugs.webkit.org/show_bug.cgi?id=279455 https://bugs.webkit.org/show_bug.cgi?id=281004 https://bugs.webkit.org/show_bug.cgi?id=281005 https://bugs.webkit.org/show_bug.cgi?id=281016 https://bugs.webkit.org/show_bug.cgi?id=281011 https://bugs.webkit.org/show_bug.cgi?id=281059 https://bugs.webkit.org/show_bug.cgi?id=281060 https://bugs.webkit.org/show_bug.cgi?id=281065 https://bugs.webkit.org/show_bug.cgi?id=281087 https://bugs.webkit.org/show_bug.cgi?id=281094 https://bugs.webkit.org/show_bug.cgi?id=281145 https://bugs.webkit.org/show_bug.cgi?id=281146 https://bugs.webkit.org/show_bug.cgi?id=281151 https://bugs.webkit.org/show_bug.cgi?id=281148 https://bugs.webkit.org/show_bug.cgi?id=281463 https://bugs.webkit.org/show_bug.cgi?id=281438 https://bugs.webkit.org/show_bug.cgi?id=282397 https://bugs.webkit.org/show_bug.cgi?id=282340 https://bugs.webkit.org/show_bug.cgi?id=282352 https://bugs.webkit.org/show_bug.cgi?id=282717 https://bugs.webkit.org/show_bug.cgi?id=282836 https://bugs.webkit.org/show_bug.cgi?id=282850 https://bugs.webkit.org/show_bug.cgi?id=282841 https://bugs.webkit.org/show_bug.cgi?id=282993 https://bugs.webkit.org/show_bug.cgi?id=283004 https://bugs.webkit.org/show_bug.cgi?id=283060 https://bugs.webkit.org/show_bug.cgi?id=282992 https://bugs.webkit.org/show_bug.cgi?id=283068 https://bugs.webkit.org/show_bug.cgi?id=283940
- Loading branch information
Showing
84 changed files
with
7,718 additions
and
6,100 deletions.
There are no files selected for viewing
105 changes: 105 additions & 0 deletions
105
...s-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-001-auto-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,105 @@ | ||
<!DOCTYPE HTML> | ||
<!-- | ||
Any copyright is dedicated to the Public Domain. | ||
http://creativecommons.org/publicdomain/zero/1.0/ | ||
--> | ||
<html> | ||
<meta charset="utf-8"> | ||
<title>Reference: Masonry layout intrinsic sizing</title> | ||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> | ||
<style> | ||
|
||
@import "support/masonry-intrinsic-sizing-visual.css"; | ||
|
||
grid { | ||
display: inline-grid; | ||
gap: 1px 2px; | ||
grid-template-columns: repeat(4,auto); | ||
grid-auto-rows: auto; | ||
border: 1px solid; | ||
padding: 0 1px 0 2px; | ||
vertical-align: top; | ||
} | ||
</style> | ||
|
||
<body> | ||
|
||
<section> | ||
<grid style="grid-template-columns: repeat(4, 2ch)"> | ||
<item style="width:2ch">1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item>5</item> | ||
</grid> | ||
|
||
<grid style="grid-template-columns: repeat(4, 2ch)"> | ||
<item>1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item style="width:2ch">5</item> | ||
</grid> | ||
|
||
<grid> | ||
<item>1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item style="width:2ch; grid-area:1/2">5</item> | ||
</grid> | ||
|
||
<grid> | ||
<item>1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item style="visibility: hidden">4</item> | ||
<item style="width:4ch; grid-area:1/2/2/4">5</item> | ||
</grid> | ||
|
||
<grid> | ||
<item style="grid-column: 4">1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item style="visibility: hidden">4</item> | ||
<item style="grid-area: 1/2/2/span 2">5</item> | ||
<item style="width:5ch; grid-area: 2/1/3/4">6</item> | ||
</grid> | ||
|
||
<grid> | ||
<item style="grid-column: 4">1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item style="visibility: hidden">4</item> | ||
<item style="width:3ch; grid-area:1/2/2/4">5</item> | ||
<item style="width:5ch; grid-area:2/1/3/4">6</item> | ||
</grid> | ||
|
||
<grid> | ||
<item>1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item style="grid-column:span 4">5</item> | ||
</grid> | ||
|
||
<grid> | ||
<item>1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item style="width:6ch; grid-column:span 4">5</item> | ||
</grid> | ||
|
||
<grid> | ||
<item>1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item style="width:6ch; grid-area: 2/1/3/4">5</item> | ||
<item style="width:6ch; grid-area: 2/2/3/5; visibility: hidden">5</item> | ||
</grid> | ||
</section> |
103 changes: 103 additions & 0 deletions
103
css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-001-auto.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,103 @@ | ||
<!DOCTYPE HTML> | ||
<!-- | ||
Any copyright is dedicated to the Public Domain. | ||
http://creativecommons.org/publicdomain/zero/1.0/ | ||
--> | ||
<html> | ||
<meta charset="utf-8"> | ||
<title>CSS Grid Test: Masonry layout column sizing - intrinsic</title> | ||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> | ||
<link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing"> | ||
<link rel="match" href="masonry-intrinsic-sizing-cols-001-auto-ref.html"> | ||
<style> | ||
|
||
@import "support/masonry-intrinsic-sizing-visual.css"; | ||
|
||
grid { | ||
display: inline-grid; | ||
gap: 1px 2px; | ||
grid-template-columns: repeat(4,auto); | ||
grid-template-rows: masonry; | ||
border: 1px solid; | ||
padding: 0 1px 0 2px; | ||
vertical-align: top; | ||
} | ||
</style> | ||
|
||
<body> | ||
|
||
<section> | ||
<grid title="Wider 1st item 2ch"> | ||
<item style="width:2ch">1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item>5</item> | ||
</grid> | ||
|
||
<grid title="Wider 5th item 2ch"> | ||
<item>1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item style="width:2ch">5</item> | ||
</grid> | ||
|
||
<grid title="Wider 5th item 2ch in col 2"> | ||
<item>1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item style="width:2ch; grid-column:2">5</item> | ||
</grid> | ||
|
||
<grid title="Wider 5th item 4ch in col 2-3"> | ||
<item>1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item style="width:4ch; grid-column:2/span 2">5</item> | ||
</grid> | ||
|
||
<grid title="5th item in col 2-3, wider 6th item 5ch in col 1-3"> | ||
<item>1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item style="grid-column:2/span 2">5</item> | ||
<item style="width:5ch; grid-column:span 3/4">6</item> | ||
</grid> | ||
|
||
<grid title="5th item 3ch in 2-3, 6th item 5ch in 1-3"> | ||
<item>1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item style="width:3ch; grid-column:span 2/4">5</item> | ||
<item style="width:5ch; grid-column:1/span 3">6</item> | ||
</grid> | ||
|
||
<grid title="5th item span 4"> | ||
<item>1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item style="grid-column:span 4">5</item> | ||
</grid> | ||
|
||
<grid title="5th item 6ch span 4"> | ||
<item>1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item style="width:6ch; grid-column:span 4">5</item> | ||
</grid> | ||
|
||
<grid title="5th item 6ch span 3"> | ||
<item>1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item style="width:6ch; grid-column:span 3">5</item> | ||
</grid> | ||
</section> |
105 changes: 105 additions & 0 deletions
105
...css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-001-fr-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,105 @@ | ||
<!DOCTYPE HTML> | ||
<!-- | ||
Any copyright is dedicated to the Public Domain. | ||
http://creativecommons.org/publicdomain/zero/1.0/ | ||
--> | ||
<html> | ||
<meta charset="utf-8"> | ||
<title>Reference: Masonry layout intrinsic sizing</title> | ||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> | ||
<style> | ||
|
||
@import "support/masonry-intrinsic-sizing-visual.css"; | ||
|
||
grid { | ||
display: inline-grid; | ||
gap: 1px 2px; | ||
grid-template-columns: 1fr 2fr 1fr 1fr; | ||
grid-auto-rows: auto; | ||
border: 1px solid; | ||
padding: 0 1px 0 2px; | ||
vertical-align: top; | ||
} | ||
</style> | ||
|
||
<body> | ||
|
||
<section class="fr"> | ||
<grid> | ||
<item style="width:2ch">1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item>5</item> | ||
</grid> | ||
|
||
<grid> | ||
<item>1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item style="width:2ch">5</item> | ||
</grid> | ||
|
||
<grid> | ||
<item>1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item style="width:2ch; grid-area: 1/2">5</item> | ||
</grid> | ||
|
||
<grid> | ||
<item>1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item style="width:4ch; grid-area: 1/2/2/4">5</item> | ||
</grid> | ||
|
||
<grid> | ||
<item style="grid-column: 4">1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item style="visibility: hidden">4</item> | ||
<item style="grid-area: 1/2/2/span 2">5</item> | ||
<item style="width:5ch; grid-area: 2/1/3/4">6</item> | ||
</grid> | ||
|
||
<grid> | ||
<item style="grid-column: 4">1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item style="visibility: hidden">4</item> | ||
<item style="width:3ch; grid-area:1/2/2/4">5</item> | ||
<item style="width:5ch; grid-area:2/1/3/4">6</item> | ||
</grid> | ||
|
||
<grid> | ||
<item>1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item style="grid-column:span 4">5</item> | ||
</grid> | ||
|
||
<grid> | ||
<item>1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item style="width:6ch; grid-column:span 4">5</item> | ||
</grid> | ||
|
||
<grid> | ||
<item>1</item> | ||
<item>2</item> | ||
<item>3</item> | ||
<item>4</item> | ||
<item style="width:6ch; grid-area: 2/1/3/4">5</item> | ||
<item style="width:6ch; grid-area: 2/2/3/5; visibility: hidden">5</item> | ||
</grid> | ||
</section> | ||
</body> |
Oops, something went wrong.