| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <!-- | 2 <!-- |
| 3 Any copyright is dedicated to the Public Domain. | 3 Any copyright is dedicated to the Public Domain. |
| 4 http://creativecommons.org/publicdomain/zero/1.0/ | 4 http://creativecommons.org/publicdomain/zero/1.0/ |
| 5 --> | 5 --> |
| 6 <!-- Testcase to ensure we handle ::before and ::after pseudo-elements on a | 6 <!-- Testcase to ensure we handle ::before and ::after pseudo-elements on a |
| 7 flex container, specifically when they've got display:table-row or | 7 flex container, specifically when they've got display:table-row or |
| 8 table-cell. | 8 table-cell. |
| 9 | 9 |
| 10 Note that we *don't* treat the table row or cell frames themselves as flex | 10 The table-row / table-cell 'display' values should be blockified, and the |
| 11 items, because they get wrapped in an anonymous table box, and *that* is | 11 pseudo-elements should be treated as flex items. (They should not get |
| 12 the flex item. So, "align-self" and "order" have no effect on the | 12 wrapped in an anonymous table box.) --> |
| 13 row/cell. --> | |
| 14 <html> | 13 <html> |
| 15 <head> | 14 <head> |
| 16 <title>CSS Test: Testing that generated content nodes with table-part display
types are wrapped with an anonymous table, which forms a flex item</title> | 15 <title>CSS Test: Testing that generated content nodes with table-part display
types are wrapped with an anonymous table, which forms a flex item</title> |
| 17 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> | 16 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> |
| 18 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> | 17 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> |
| 19 <link rel="match" href="flexbox-with-pseudo-elements-003-ref.html"> | 18 <link rel="match" href="flexbox-with-pseudo-elements-003-ref.html"> |
| 20 <meta charset="utf-8"> | 19 <meta charset="utf-8"> |
| 21 <style> | 20 <style> |
| 22 .flexContainer { | 21 .flexContainer { |
| 23 display: flex; | 22 display: flex; |
| 24 align-items: flex-end; | 23 align-items: flex-end; |
| 25 justify-content: space-between; | 24 justify-content: space-between; |
| 26 height: 50px; | 25 height: 50px; |
| 27 width: 300px; | 26 width: 300px; |
| 28 margin-bottom: 2px; | 27 margin-bottom: 2px; |
| 29 background: lightgray; | 28 background: lightgray; |
| 30 } | 29 } |
| 31 div.withBefore::before { | 30 div.withBefore::before { |
| 32 display: table-row; | 31 display: table-row; |
| 33 content: 'b'; | 32 content: 'b'; |
| 34 background: yellow; | 33 background: yellow; |
| 35 align-self: center; /* should have no effect */ | 34 /* If these "align-self" & "order" properties impact the rendering (as |
| 36 order: 1; /* should have no effect */ | 35 they should), that verifies we're being treated as a flex item. */ |
| 36 align-self: center; |
| 37 order: 1; |
| 37 } | 38 } |
| 38 div.withAfter::after { | 39 div.withAfter::after { |
| 39 display: table-cell; | 40 display: table-cell; |
| 40 content: 'a'; | 41 content: 'a'; |
| 41 background: lightblue; | 42 background: lightblue; |
| 42 align-self: center; /* should have no effect */ | 43 /* If these "align-self" & "order" properties impact the rendering (as |
| 43 order: -1; /* should have no effect */ | 44 they should), that verifies we're being treated as a flex item. */ |
| 45 align-self: center; |
| 46 order: -1; |
| 44 } | 47 } |
| 45 </style> | 48 </style> |
| 46 </head> | 49 </head> |
| 47 <body> | 50 <body> |
| 48 <div class="flexContainer withBefore"> | 51 <div class="flexContainer withBefore"> |
| 49 x | 52 x |
| 50 <div>y</div> | 53 <div>y</div> |
| 51 z | 54 z |
| 52 </div> | 55 </div> |
| 53 <div class="flexContainer withAfter"> | 56 <div class="flexContainer withAfter"> |
| 54 x | 57 x |
| 55 <div>y</div> | 58 <div>y</div> |
| 56 z | 59 z |
| 57 </div> | 60 </div> |
| 58 <div class="flexContainer withBefore withAfter"> | 61 <div class="flexContainer withBefore withAfter"> |
| 59 x | 62 x |
| 60 <div>y</div> | 63 <div>y</div> |
| 61 z | 64 z |
| 62 </div> | 65 </div> |
| 63 </body> | 66 </body> |
| 64 </html> | 67 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1922043004:
Import csswg-test@b2daa426addd5ccb8e9ce1c5d800f9d82603f1ec (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master