Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(376)

Side by Side Diff: third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-002.xht

Issue 2670473003: [css-grid] Import W3C Test Suite (Closed)
Patch Set: Add comment about skipped tests Created 3 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x html1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>CSS Grid Layout Test: 'order' property affects grid items auto-pl acement position within an inline grid</title>
5 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igal ia.com" />
6 <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
7 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-pro perty" title="5.4. Display Order: the order property" />
8 <link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.x ht" />
9 <meta name="flags" content="ahem" />
10 <style type="text/css"><![CDATA[
11 #reference-overlapped-red {
12 position: absolute;
13 background-color: red;
14 width: 100px;
15 height: 100px;
16 z-index: -1;
17 }
18
19 #inline-grid {
20 display: inline-grid;
21 font: 50px/1 Ahem;
22 grid-template-columns: auto auto;
23 }
24
25 #blue {
26 color: blue;
27 order: -10;
28 }
29
30 #yellow {
31 color: yellow;
32 order: -5;
33 }
34
35 #lime {
36 color: lime;
37 order: -1;
38 }
39
40 #magenta {
41 color: magenta;
42 }
43 ]]></style>
44 </head>
45 <body>
46 <p>Test passes if there are four filled squares with the same size and < strong>no red</strong>.</p>
47 <p>Blue and yellow squares in the first line; lime and magenta squares i n the second line (exactly in this order).</p>
48
49 <div id="reference-overlapped-red"></div>
50 <div id="inline-grid">
51 <div id="magenta">M</div>
52 <div id="lime">L</div>
53 <div id="yellow">Y</div>
54 <div id="blue">B</div>
55 </div>
56 </body>
57 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698