| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <title>CSS Test: flow-into on individual list items preserves other list
styling properties (list-style-*)</title> | |
| 5 <link rel="author" title="Mihai Balan" href="mibalan@adobe.com"> | |
| 6 <link rel="help" href="http://www.w3.org/TR/css3-regions/#properties-and
-rules" /> | |
| 7 <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-
property" /> | |
| 8 <link rel="stylesheet" type="text/css" href="../resources/font-smoothing
-disabler.css"> | |
| 9 <meta name="flags" content=""> | |
| 10 <meta name="assert" content="Test checks that list styling properties ar
e honored even for list items extracted in named flows and rendered in regions."
> | |
| 11 <style> | |
| 12 #first { | |
| 13 list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA
ABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0
WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6
cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9
IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAg
ICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1z
eW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8v
bnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAv
MS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNv
dXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIg
eG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGRDAzNDVGOTNCMEQxMUUyQkVGOEU1OTA4MTYyRjA0RiIg
eG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGRDAzNDVGQTNCMEQxMUUyQkVGOEU1OTA4MTYyRjA0RiI+
IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkZEMDM0NUY3M0IwRDEx
RTJCRUY4RTU5MDgxNjJGMDRGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkZEMDM0NUY4M0IwRDEx
RTJCRUY4RTU5MDgxNjJGMDRGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBt
ZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+rpZ8YAAAAGlJREFUeNpi/P//PwMlgImBQoDVAEZGxv9ATLEL
iDKEkBcIGkJMGOA1hNhAxGkIKbHwn37RiAM0UmIASPMB7B4DJmV0DPUvDDcAsQM2dWC1BAzAq5mQAQ34
NBIyoAFKOxAygJHS7AwQYAAt068AjhXk+gAAAABJRU5ErkJggg==); | |
| 14 list-style-position: inside; | |
| 15 } | |
| 16 #second { | |
| 17 list-style-type: square; | |
| 18 list-style-position: outside; | |
| 19 } | |
| 20 #third { | |
| 21 list-style-type: upper-roman; | |
| 22 list-style-position: inside; | |
| 23 } | |
| 24 #third li { | |
| 25 font-weight: bold; | |
| 26 } | |
| 27 #third li span { | |
| 28 font-weight: normal; | |
| 29 } | |
| 30 #inner { | |
| 31 list-style-type: upper-alpha; | |
| 32 } | |
| 33 .container { | |
| 34 color: #006400; | |
| 35 background-color: lightgreen; | |
| 36 margin: 2em; | |
| 37 float: left; | |
| 38 width: 20em; | |
| 39 height: 20em; | |
| 40 } | |
| 41 li:last-child { | |
| 42 -webkit-flow-into: f1; | |
| 43 color: blue; | |
| 44 } | |
| 45 .region { | |
| 46 margin: 2em; | |
| 47 background-color: lightblue; | |
| 48 float: left; | |
| 49 width: 20em; | |
| 50 height: 20em; | |
| 51 } | |
| 52 #r1 { | |
| 53 -webkit-flow-from: f1; | |
| 54 } | |
| 55 </style> | |
| 56 </head> | |
| 57 <body> | |
| 58 <!-- Setting different values for list-style-position, list-style-type,
list-style-image and | |
| 59 then extracting individual list items into named flows. Numbering should
n't be affected, as | |
| 60 shouldn't indenting and marker boxes positioning. --> | |
| 61 <p>Test passes if you see two rectangles, one green and one blue, as des
cribed below. Except where noted, all list items should be rendered on two lines
.<br> | |
| 62 The green rectangle should contain three lists, separated by a small ver
tical space, each with two items. The <strong>first list</strong> should use a t
riangle-shaped bullet and the text on the second line should start below the bul
let. The <strong>second list</strong> should use a square-shaped bullet and the
text on the second line should not come under the bullet. The <strong>third list
</strong> should be numbered with roman numerals starting with 20 (XX) and the t
ext on the second line should start below the number.<br> | |
| 63 The blue rectangle should contain a list with items numbered/marked in d
ifferent ways, as follows. The <strong>first item</strong> should use a triangle
-shaped bullet and the text on the second line should start below the bullet. Th
e <strong>second item</strong> should use a square-shaped bullet and the bullet
should be outside of the blue rectangle. The <strong>third and fourth items</str
ong> should be one-line and numbered with letters A and B respectively. The thir
d item should be indented while the fourth item should have the number outside t
he blue rectangle. The <strong>fifth item</strong> should be numbered with the r
oman numeral 22 (XXII) and the text on the second line should start below the nu
mber.</p> | |
| 64 | |
| 65 <div class="container"> | |
| 66 <ul id="first"> | |
| 67 <li>Custom bullet list, item 1<br><em>Another line of text here<
/em></li> | |
| 68 <li>Custom bullet list, item 2<br><em>Another line of text here<
/em></li> | |
| 69 <li>Custom bullet list, item 3<br><em>Another line of text here<
/em></li> | |
| 70 </ul> | |
| 71 <ul id="second"> | |
| 72 <li>Square bullet list, item 1<br><em>Another line of text here<
/em></li> | |
| 73 <li>Square bullet list, item 2<br><em>Another line of text here<
/em></li> | |
| 74 <li>Square bullet list, item 3<br><em>Another line of text here<
/em> | |
| 75 <ol id="inner"> | |
| 76 <li>Inner ordered list, item A</li> | |
| 77 <li>Inner ordered list, item B</li> | |
| 78 </ol> | |
| 79 </li> | |
| 80 </ul> | |
| 81 <ol start="20" id="third"> | |
| 82 <li><span>Roman numbered list, item XX<br><em>Another line of te
xt here</em></span></li> | |
| 83 <li><span>Roman numbered list, item XXI<br><em>Another line of t
ext here</em></span></li> | |
| 84 <li><span>Roman numbered list, item XXII<br><em>Another line of
text here</em></span></li> | |
| 85 </ol> | |
| 86 </div> | |
| 87 <div class="region" id="r1"></div> | |
| 88 </body> | |
| 89 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 159863002:
Remove CSS regions support, keeping a bare minimum to support "region-based" multicol. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master