subpixel-column-rule-width.tentative.html (2628B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> 5 CSS Column-Rule: width computed value 6 </title> 7 8 <link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> 9 <link rel="help" href="https://www.w3.org/TR/css-multicol-1/#crw"> 10 <link rel="match" href="reference/subpixel-column-rule-width-ref.tentative.html"> 11 12 <meta name="assert" content="column-rule-width computed value after rounding."> 13 14 <style> 15 .columns { 16 column-count: 2; 17 column-rule: solid gray; 18 width: 420px; 19 height: 50px; 20 } 21 </style> 22 </head> 23 24 <body> 25 <h1> 26 Test passes if column rule widths are rounded up 27 when they are greater than 0 and less than 1, 28 and rounded down when they are greater than 1. 29 </h1> 30 31 <div class="columns" style="column-rule-width: 0.3px;"> 32 Lorem ipsum dolor sit amet, 33 consectetur adipisicing elit, 34 sed do eiusmod tempor incididunt 35 ut labore et dolore magna aliqua. 36 </div> 37 38 <div class="columns" style="column-rule-width: 0.5px;"> 39 Lorem ipsum dolor sit amet, 40 consectetur adipisicing elit, 41 sed do eiusmod tempor incididunt 42 ut labore et dolore magna aliqua. 43 </div> 44 45 <div class="columns" style="column-rule-width: 0.9px;"> 46 Lorem ipsum dolor sit amet, 47 consectetur adipisicing elit, 48 sed do eiusmod tempor incididunt 49 ut labore et dolore magna aliqua. 50 </div> 51 52 <div class="columns" style="column-rule-width: 1.3px;"> 53 Lorem ipsum dolor sit amet, 54 consectetur adipisicing elit, 55 sed do eiusmod tempor incididunt 56 ut labore et dolore magna aliqua. 57 </div> 58 59 <div class="columns" style="column-rule-width: 1.5px;"> 60 Lorem ipsum dolor sit amet, 61 consectetur adipisicing elit, 62 sed do eiusmod tempor incididunt 63 ut labore et dolore magna aliqua. 64 </div> 65 66 <div class="columns" style="column-rule-width: 1.9px;"> 67 Lorem ipsum dolor sit amet, 68 consectetur adipisicing elit, 69 sed do eiusmod tempor incididunt 70 ut labore et dolore magna aliqua. 71 </div> 72 73 <div class="columns" style="column-rule-width: 3.3px;"> 74 Lorem ipsum dolor sit amet, 75 consectetur adipisicing elit, 76 sed do eiusmod tempor incididunt 77 ut labore et dolore magna aliqua. 78 </div> 79 80 <div class="columns" style="column-rule-width: 3.5px;"> 81 Lorem ipsum dolor sit amet, 82 consectetur adipisicing elit, 83 sed do eiusmod tempor incididunt 84 ut labore et dolore magna aliqua. 85 </div> 86 87 <div class="columns" style="column-rule-width: 3.9px;"> 88 Lorem ipsum dolor sit amet, 89 consectetur adipisicing elit, 90 sed do eiusmod tempor incididunt 91 ut labore et dolore magna aliqua. 92 </div> 93 </body> 94 </html>