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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/css3/flexbox/align-absolute-child.html

Issue 1920453003: [css-flexbox] Implement new abspos handling (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: fix test Created 4 years, 7 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
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/css3/flexbox/position-absolute-child.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <link href="resources/flexbox.css" rel="stylesheet"> 3 <link href="resources/flexbox.css" rel="stylesheet">
4 <style> 4 <style>
5 body { 5 body {
6 margin: 0; 6 margin: 0;
7 } 7 }
8 .flexbox { 8 .flexbox {
9 background-color: green; 9 background-color: green;
10 height: 100px; 10 height: 100px;
(...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after
66 66
67 <body onload="checkLayout('.flexbox')"> 67 <body onload="checkLayout('.flexbox')">
68 <div id=log></div> 68 <div id=log></div>
69 69
70 <div class='flexbox relative align-items-center'> 70 <div class='flexbox relative align-items-center'>
71 <div id='placed-absolute' class='absolute' data-offset-x=20 data-offset-y=20 ></div> 71 <div id='placed-absolute' class='absolute' data-offset-x=20 data-offset-y=20 ></div>
72 </div> 72 </div>
73 73
74 <div class='flexbox relative align-items-center'> 74 <div class='flexbox relative align-items-center'>
75 <div data-offset-x=0 data-offset-y=40></div> 75 <div data-offset-x=0 data-offset-y=40></div>
76 <div class='absolute' data-offset-x=20 data-offset-y=0></div> 76 <div class='absolute' data-offset-x=0 data-offset-y=40></div>
77 <div data-offset-x=20 data-offset-y=40></div> 77 <div data-offset-x=20 data-offset-y=40></div>
78 <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offse t-y=5></div> 78 <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offse t-y=5></div>
79 </div> 79 </div>
80 80
81 <div class="relative"> 81 <div class="relative">
82 <div class='flexbox align-items-center'> 82 <div class='flexbox align-items-center'>
83 <div data-offset-x=10 data-offset-y=40></div> 83 <div data-offset-x=10 data-offset-y=40></div>
84 <div class='absolute' data-offset-x=30 data-offset-y=0></div> 84 <div class='absolute' data-offset-x=10 data-offset-y=40></div>
85 <div data-offset-x=30 data-offset-y=40></div> 85 <div data-offset-x=30 data-offset-y=40></div>
86 <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offse t-y=5></div> 86 <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offse t-y=5></div>
87 </div> 87 </div>
88 </div> 88 </div>
89 89
90 <div class='flexbox relative column rtl'> 90 <div class='flexbox relative column rtl'>
91 <div data-offset-x=80 data-offset-y=0></div> 91 <div data-offset-x=80 data-offset-y=0></div>
92 <div class='absolute' data-offset-x=80 data-offset-y=20></div> 92 <div class='absolute' data-offset-x=80 data-offset-y=0></div>
93 <div data-offset-x=80 data-offset-y=20></div> 93 <div data-offset-x=80 data-offset-y=20></div>
94 <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offse t-y=5></div> 94 <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offse t-y=5></div>
95 </div> 95 </div>
96 96
97 <div class="relative"> 97 <div class="relative">
98 <div class='flexbox wrap-reverse'> 98 <div class='flexbox wrap-reverse'>
99 <div style="width:90px" data-offset-x=10 data-offset-y=80></div> 99 <div style="width:90px" data-offset-x=10 data-offset-y=80></div>
100 <div class="absolute" data-offset-x=100 data-offset-y=100></div> 100 <div class="absolute" data-offset-x=10 data-offset-y=80></div>
101 <div data-offset-x=10 data-offset-y=30></div> 101 <div data-offset-x=10 data-offset-y=30></div>
102 <div class="absolute" data-offset-x=30 data-offset-y=50></div> 102 <div class="absolute" data-offset-x=10 data-offset-y=80></div>
103 <div data-offset-x=30 data-offset-y=30></div> 103 <div data-offset-x=30 data-offset-y=30></div>
104 <div class="absolute" data-offset-x=50 data-offset-y=50></div> 104 <div class="absolute" data-offset-x=10 data-offset-y=80></div>
105 <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offse t-y=5></div> 105 <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offse t-y=5></div>
106 </div> 106 </div>
107 </div> 107 </div>
108 108
109 <div class='flexbox relative'> 109 <div class='flexbox relative'>
110 <div style="margin: auto;" data-offset-x=40 data-offset-y=40></div> 110 <div style="margin: auto;" data-offset-x=40 data-offset-y=40></div>
111 <div class="absolute" style="margin: auto;" data-offset-x=100 data-offset-y= 0></div> 111 <div class="absolute" style="margin: auto;" data-offset-x=0 data-offset-y=0> </div>
112 <div class="absolute" style="margin: auto;" data-offset-x=100 data-offset-y= 0></div> 112 <div class="absolute" style="margin: auto;" data-offset-x=0 data-offset-y=0> </div>
113 <div class="absolute" style="margin: auto; top: 5px; left: 5px" data-offset- x=5 data-offset-y=5></div> 113 <div class="absolute" style="margin: auto; top: 5px; left: 5px" data-offset- x=5 data-offset-y=5></div>
114 </div> 114 </div>
115 115
116 <div class='flexbox align-items-stretch relative'> 116 <div class='flexbox align-items-stretch relative'>
117 <div style="height: auto" data-offset-x=0 data-offset-y=0 data-expected-heig ht=100></div> 117 <div style="height: auto" data-offset-x=0 data-offset-y=0 data-expected-heig ht=100></div>
118 <div class="absolute" style="height: auto" data-offset-x=20 data-offset-y=0 data-expected-height=0></div> 118 <div class="absolute" style="height: auto" data-offset-x=0 data-offset-y=0 d ata-expected-height=0></div>
119 <div class="absolute" style="height: auto; top: 5px; left: 5px" data-offset- x=5 data-offset-y=5 data-expected-height=0></div> 119 <div class="absolute" style="height: auto; top: 5px; left: 5px" data-offset- x=5 data-offset-y=5 data-expected-height=0></div>
120 </div> 120 </div>
121 121
122 <div class="flexbox wrap relative"> 122 <div class="flexbox wrap relative">
123 <div style="width: 100px;" data-offset-x=0 data-offset-y=0></div> 123 <div style="width: 100px;" data-offset-x=0 data-offset-y=0></div>
124 <div class="absolute" data-offset-x=100 data-offset-y=0></div> 124 <div class="absolute" data-offset-x=0 data-offset-y=0></div>
125 <div style="width: 50px;" data-offset-x=0 data-offset-y=50></div> 125 <div style="width: 50px;" data-offset-x=0 data-offset-y=50></div>
126 <div class="absolute" data-offset-x=50 data-offset-y=50></div> 126 <div class="absolute" data-offset-x=0 data-offset-y=0></div>
127 <div style="width: 50px;" data-offset-x=50 data-offset-y=50></div> 127 <div style="width: 50px;" data-offset-x=50 data-offset-y=50></div>
128 <div class="absolute" data-offset-x=100 data-offset-y=50></div> 128 <div class="absolute" data-offset-x=0 data-offset-y=0></div>
129 </div> 129 </div>
130 130
131 <div class="flexbox wrap relative align-items-flex-end"> 131 <div class="flexbox wrap relative align-items-flex-end">
132 <div style="width: 100px;" data-offset-x=0 data-offset-y=30></div> 132 <div style="width: 100px;" data-offset-x=0 data-offset-y=30></div>
133 <div class="absolute" data-offset-x=100 data-offset-y=0></div> 133 <div class="absolute" data-offset-x=0 data-offset-y=80></div>
134 <div style="width: 50px;" data-offset-x=0 data-offset-y=80></div> 134 <div style="width: 50px;" data-offset-x=0 data-offset-y=80></div>
135 <div class="absolute" data-offset-x=50 data-offset-y=50></div> 135 <div class="absolute" data-offset-x=0 data-offset-y=80></div>
136 <div style="width: 50px;" data-offset-x=50 data-offset-y=80></div> 136 <div style="width: 50px;" data-offset-x=50 data-offset-y=80></div>
137 <div class="absolute" data-offset-x=100 data-offset-y=50></div> 137 <div class="absolute" data-offset-x=0 data-offset-y=80></div>
138 </div> 138 </div>
139 139
140 140
141 <script> 141 <script>
142 var absolute = document.getElementById('placed-absolute'); 142 var absolute = document.getElementById('placed-absolute');
143 var beforePosition = absolute.getBoundingClientRect(); 143 var beforePosition = absolute.getBoundingClientRect();
144 document.querySelector('.flexbox').style.height = '101px'; 144 document.querySelector('.flexbox').style.height = '101px';
145 var afterPosition = absolute.getBoundingClientRect(); 145 var afterPosition = absolute.getBoundingClientRect();
146 146
147 // Positioned element should not change position when the height of it's parent flexbox is changed. 147 // Positioned element should not change position when the height of it's parent flexbox is changed.
148 for (key in beforePosition) 148 for (key in beforePosition)
149 shouldBe('beforePosition[key]', 'afterPosition[key]'); 149 shouldBe('beforePosition[key]', 'afterPosition[key]');
150 </script> 150 </script>
151 </body> 151 </body>
152 </html> 152 </html>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/css3/flexbox/position-absolute-child.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698