drafts: changeset 31778:9d989e2cbbe7

     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/css-borders-4/ridge-borders/color.html	Fri Nov 08 14:07:29 2024 -0800
     1.3 @@ -0,0 +1,235 @@
     1.4 +<!doctype html>
     1.5 +<meta charset=utf-8>
     1.6 +<title>Color border tests</title>
     1.7 +<style>
     1.8 +body {
     1.9 +    border: 0;
    1.10 +    margin: 0;
    1.11 +    text-align: center;
    1.12 +}
    1.13 +
    1.14 +table {
    1.15 +    border-spacing: 5px;
    1.16 +    display: inline-table;
    1.17 +}
    1.18 +
    1.19 +h2 {
    1.20 +    padding: 12px;
    1.21 +    margin: 0;
    1.22 +    font: bold 24px Arial;
    1.23 +    cursor: default;
    1.24 +}
    1.25 +
    1.26 +td {
    1.27 +    cursor: default;
    1.28 +    color: black;
    1.29 +    font: 16px Arial;
    1.30 +    text-align: center;
    1.31 +    padding: 2px;
    1.32 +    width: 150px;
    1.33 +    max-width: 150px;
    1.34 +    min-width: 150px;
    1.35 +    border-style: var(--border-style);
    1.36 +    border-width: 10px;
    1.37 +}
    1.38 +</style>
    1.39 +<body style="background-color:white">
    1.40 +    border-style:
    1.41 +    <select id="borderStyle">
    1.42 +        <option value="solid">solid</option>
    1.43 +        <option value="groove">groove</option>
    1.44 +        <option value="ridge">ridge</option>
    1.45 +        <option value="inset">inset</option>
    1.46 +        <option value="outset">outset</option>
    1.47 +    </select>
    1.48 +    <table>
    1.49 +        <tr>
    1.50 +            <td style="border-color:white" title="white = #ffffff">white</td>
    1.51 +            <td style="border-color:gainsboro" title="gainsboro = #dcdcdc">gainsboro</td>
    1.52 +            <td style="border-color:silver" title="silver = #c0c0c0">silver</td>
    1.53 +            <td style="border-color:darkgray" title="darkgray = #a9a9a9">darkgray</td>
    1.54 +            <td style="border-color:gray" title="gray = #808080">gray</td>
    1.55 +            <td style="border-color:dimgray" title="dimgray = #696969">dimgray</td>
    1.56 +            <td style="border-color:black" title="black = #000000">black</td>
    1.57 +        </tr>
    1.58 +        <tr>
    1.59 +            <td style="border-color:whitesmoke" title="whitesmoke = #f5f5f5">whitesmoke</td>
    1.60 +            <td style="border-color:lightgray" title="lightgray = #d3d3d3">lightgray</td>
    1.61 +            <td style="border-color:lightcoral" title="lightcoral = #f08080">lightcoral</td>
    1.62 +            <td style="border-color:rosybrown" title="rosybrown = #bc8f8f">rosybrown</td>
    1.63 +            <td style="border-color:indianred" title="indianred = #cd5c5c">indianred</td>
    1.64 +            <td style="border-color:red" title="red = #ff0000">red</td>
    1.65 +            <td style="border-color:maroon" title="maroon = #800000">maroon</td>
    1.66 +        </tr>
    1.67 +        <tr>
    1.68 +            <td style="border-color:snow" title="snow = #fffafa">snow</td>
    1.69 +            <td style="border-color:mistyrose" title="mistyrose = #ffe4e1">mistyrose</td>
    1.70 +            <td style="border-color:salmon" title="salmon = #fa8072">salmon</td>
    1.71 +            <td style="border-color:orangered" title="orangered = #ff4500">orangered</td>
    1.72 +            <td style="border-color:chocolate" title="chocolate = #d2691e">chocolate</td>
    1.73 +            <td style="border-color:brown" title="brown = #a52a2a">brown</td>
    1.74 +            <td style="border-color:darkred" title="darkred = #8b0000">darkred</td>
    1.75 +        </tr>
    1.76 +        <tr>
    1.77 +            <td style="border-color:seashell" title="seashell = #fff5ee">seashell</td>
    1.78 +            <td style="border-color:peachpuff" title="peachpuff = #ffdab9">peachpuff</td>
    1.79 +            <td style="border-color:tomato" title="tomato = #ff6347">tomato</td>
    1.80 +            <td style="border-color:darkorange" title="darkorange = #ff8c00">darkorange</td>
    1.81 +            <td style="border-color:peru" title="peru = #cd853f">peru</td>
    1.82 +            <td style="border-color:firebrick" title="firebrick = #b22222">firebrick</td>
    1.83 +            <td style="border-color:olive" title="olive = #808000">olive</td>
    1.84 +        </tr>
    1.85 +        <tr>
    1.86 +            <td style="border-color:linen" title="linen = #faf0e6">linen</td>
    1.87 +            <td style="border-color:bisque" title="bisque = #ffe4c4">bisque</td>
    1.88 +            <td style="border-color:darksalmon" title="darksalmon = #e9967a">darksalmon</td>
    1.89 +            <td style="border-color:orange" title="orange = #ffa500">orange</td>
    1.90 +            <td style="border-color:goldenrod" title="goldenrod = #daa520">goldenrod</td>
    1.91 +            <td style="border-color:sienna" title="sienna = #a0522d">sienna</td>
    1.92 +            <td style="border-color:darkolivegreen" title="darkolivegreen = #556b2f">darkolivegreen</td>
    1.93 +        </tr>
    1.94 +        <tr>
    1.95 +            <td style="border-color:oldlace" title="oldlace = #fdf5e6">oldlace</td>
    1.96 +            <td style="border-color:antiquewhite" title="antiquewhite = #faebd7">antiquewhite</td>
    1.97 +            <td style="border-color:coral" title="coral = #ff7f50">coral</td>
    1.98 +            <td style="border-color:gold" title="gold = #ffd700">gold</td>
    1.99 +            <td style="border-color:limegreen" title="limegreen = #32cd32">limegreen</td>
   1.100 +            <td style="border-color:saddlebrown" title="saddlebrown = #8b4513">saddlebrown</td>
   1.101 +            <td style="border-color:darkgreen" title="darkgreen = #006400">darkgreen</td>
   1.102 +        </tr>
   1.103 +        <tr>
   1.104 +            <td style="border-color:floralwhite" title="floralwhite = #fffaf0">floralwhite</td>
   1.105 +            <td style="border-color:navajowhite" title="navajowhite = #ffdead">navajowhite</td>
   1.106 +            <td style="border-color:lightsalmon" title="lightsalmon = #ffa07a">lightsalmon</td>
   1.107 +            <td style="border-color:darkkhaki" title="darkkhaki = #bdb76b">darkkhaki</td>
   1.108 +            <td style="border-color:lime" title="lime = #00ff00">lime</td>
   1.109 +            <td style="border-color:darkgoldenrod" title="darkgoldenrod = #b8860b">darkgoldenrod</td>
   1.110 +            <td style="border-color:green" title="green = #008000">green</td>
   1.111 +        </tr>
   1.112 +        <tr>
   1.113 +            <td style="border-color:cornsilk" title="cornsilk = #fff8dc">cornsilk</td>
   1.114 +            <td style="border-color:blanchedalmond" title="blanchedalmond = #ffebcd">blanchedalmond</td>
   1.115 +            <td style="border-color:sandybrown" title="sandybrown = #f4a460">sandybrown</td>
   1.116 +            <td style="border-color:yellow" title="yellow = #ffff00">yellow</td>
   1.117 +            <td style="border-color:mediumseagreen" title="mediumseagreen = #3cb371">mediumseagreen</td>
   1.118 +            <td style="border-color:olivedrab" title="olivedrab = #6b8e23">olivedrab</td>
   1.119 +            <td style="border-color:forestgreen" title="forestgreen = #228b22">forestgreen</td>
   1.120 +        </tr>
   1.121 +        <tr>
   1.122 +            <td style="border-color:ivory" title="ivory = #fffff0">ivory</td>
   1.123 +            <td style="border-color:papayawhip" title="papayawhip = #ffefd5">papayawhip</td>
   1.124 +            <td style="border-color:burlywood" title="burlywood = #deb887">burlywood</td>
   1.125 +            <td style="border-color:yellowgreen" title="yellowgreen = #9acd32">yellowgreen</td>
   1.126 +            <td style="border-color:springgreen" title="springgreen = #00ff7f">springgreen</td>
   1.127 +            <td style="border-color:seagreen" title="seagreen = #2e8b57">seagreen</td>
   1.128 +            <td style="border-color:darkslategray" title="darkslategray = #2f4f4f">darkslategray</td>
   1.129 +        </tr>
   1.130 +        <tr>
   1.131 +            <td style="border-color:beige" title="beige = #f5f5dc">beige</td>
   1.132 +            <td style="border-color:moccasin" title="moccasin = #ffe4b5">moccasin</td>
   1.133 +            <td style="border-color:tan" title="tan = #d2b48c">tan</td>
   1.134 +            <td style="border-color:chartreuse" title="chartreuse = #7fff00">chartreuse</td>
   1.135 +            <td style="border-color:mediumspringgreen" title="mediumspringgreen = #00fa9a">mediumspringgreen</td>
   1.136 +            <td style="border-color:lightseagreen" title="lightseagreen = #20b2aa">lightseagreen</td>
   1.137 +            <td style="border-color:teal" title="teal = #008080">teal</td>
   1.138 +        </tr>
   1.139 +        <tr>
   1.140 +            <td style="border-color:lightyellow" title="lightyellow = #ffffe0">lightyellow</td>
   1.141 +            <td style="border-color:wheat" title="wheat = #f5deb3">wheat</td>
   1.142 +            <td style="border-color:khaki" title="khaki = #f0e68c">khaki</td>
   1.143 +            <td style="border-color:lawngreen" title="lawngreen = #7cfc00">lawngreen</td>
   1.144 +            <td style="border-color:aqua" title="aqua = #00ffff">aqua</td>
   1.145 +            <td style="border-color:darkturquoise" title="darkturquoise = #00ced1">darkturquoise</td>
   1.146 +            <td style="border-color:darkcyan" title="darkcyan = #008b8b">darkcyan</td>
   1.147 +        </tr>
   1.148 +        <tr>
   1.149 +            <td style="border-color:lightgoldenrodyellow" title="lightgoldenrodyellow = #fafad2">lightgoldenrodyellow</td>
   1.150 +            <td style="border-color:lemonchiffon" title="lemonchiffon = #fffacd">lemonchiffon</td>
   1.151 +            <td style="border-color:greenyellow" title="greenyellow = #adff2f">greenyellow</td>
   1.152 +            <td style="border-color:darkseagreen" title="darkseagreen = #8fbc8f">darkseagreen</td>
   1.153 +            <td style="border-color:cyan" title="cyan = #00ffff">cyan</td>
   1.154 +            <td style="border-color:deepskyblue" title="deepskyblue = #00bfff">deepskyblue</td>
   1.155 +            <td style="border-color:midnightblue" title="midnightblue = #191970">midnightblue</td>
   1.156 +        </tr>
   1.157 +        <tr>
   1.158 +            <td style="border-color:honeydew" title="honeydew = #f0fff0">honeydew</td>
   1.159 +            <td style="border-color:palegoldenrod" title="palegoldenrod = #eee8aa">palegoldenrod</td>
   1.160 +            <td style="border-color:lightgreen" title="lightgreen = #90ee90">lightgreen</td>
   1.161 +            <td style="border-color:mediumaquamarine" title="mediumaquamarine = #66cdaa">mediumaquamarine</td>
   1.162 +            <td style="border-color:cadetblue" title="cadetblue = #5f9ea0">cadetblue</td>
   1.163 +            <td style="border-color:steelblue" title="steelblue = #4682b4">steelblue</td>
   1.164 +            <td style="border-color:navy" title="navy = #000080">navy</td>
   1.165 +        </tr>
   1.166 +        <tr>
   1.167 +            <td style="border-color:mintcream" title="mintcream = #f5fffa">mintcream</td>
   1.168 +            <td style="border-color:palegreen" title="palegreen = #98fb98">palegreen</td>
   1.169 +            <td style="border-color:skyblue" title="skyblue = #87ceeb">skyblue</td>
   1.170 +            <td style="border-color:turquoise" title="turquoise = #40e0d0">turquoise</td>
   1.171 +            <td style="border-color:dodgerblue" title="dodgerblue = #1e90ff">dodgerblue</td>
   1.172 +            <td style="border-color:blue" title="blue = #0000ff">blue</td>
   1.173 +            <td style="border-color:darkblue" title="darkblue = #00008b">darkblue</td>
   1.174 +        </tr>
   1.175 +        <tr>
   1.176 +            <td style="border-color:azure" title="azure = #f0ffff">azure</td>
   1.177 +            <td style="border-color:aquamarine" title="aquamarine = #7fffd4">aquamarine</td>
   1.178 +            <td style="border-color:lightskyblue" title="lightskyblue = #87cefa">lightskyblue</td>
   1.179 +            <td style="border-color:mediumturquoise" title="mediumturquoise = #48d1cc">mediumturquoise</td>
   1.180 +            <td style="border-color:lightslategray" title="lightslategray = #778899">lightslategray</td>
   1.181 +            <td style="border-color:blueviolet" title="blueviolet = #8a2be2">blueviolet</td>
   1.182 +            <td style="border-color:mediumblue" title="mediumblue = #0000cd">mediumblue</td>
   1.183 +        </tr>
   1.184 +        <tr>
   1.185 +            <td style="border-color:lightcyan" title="lightcyan = #e0ffff">lightcyan</td>
   1.186 +            <td style="border-color:paleturquoise" title="paleturquoise = #afeeee">paleturquoise</td>
   1.187 +            <td style="border-color:lightsteelblue" title="lightsteelblue = #b0c4de">lightsteelblue</td>
   1.188 +            <td style="border-color:cornflowerblue" title="cornflowerblue = #6495ed">cornflowerblue</td>
   1.189 +            <td style="border-color:slategray" title="slategray = #708090">slategray</td>
   1.190 +            <td style="border-color:darkorchid" title="darkorchid = #9932cc">darkorchid</td>
   1.191 +            <td style="border-color:darkslateblue" title="darkslateblue = #483d8b">darkslateblue</td>
   1.192 +        </tr>
   1.193 +        <tr>
   1.194 +            <td style="border-color:aliceblue" title="aliceblue = #f0f8ff">aliceblue</td>
   1.195 +            <td style="border-color:powderblue" title="powderblue = #b0e0e6">powderblue</td>
   1.196 +            <td style="border-color:thistle" title="thistle = #d8bfd8">thistle</td>
   1.197 +            <td style="border-color:mediumslateblue" title="mediumslateblue = #7b68ee">mediumslateblue</td>
   1.198 +            <td style="border-color:royalblue" title="royalblue = #4169e1">royalblue</td>
   1.199 +            <td style="border-color:darkviolet" title="darkviolet = #9400d3">darkviolet</td>
   1.200 +            <td style="border-color:rebeccapurple" title="rebeccapurple = #663399">rebeccapurple</td>
   1.201 +        </tr>
   1.202 +        <tr>
   1.203 +            <td style="border-color:ghostwhite" title="ghostwhite = #f8f8ff">ghostwhite</td>
   1.204 +            <td style="border-color:lightblue" title="lightblue = #add8e6">lightblue</td>
   1.205 +            <td style="border-color:plum" title="plum = #dda0dd">plum</td>
   1.206 +            <td style="border-color:mediumpurple" title="mediumpurple = #9370db">mediumpurple</td>
   1.207 +            <td style="border-color:slateblue" title="slateblue = #6a5acd">slateblue</td>
   1.208 +            <td style="border-color:magenta" title="magenta = #ff00ff">magenta</td>
   1.209 +            <td style="border-color:indigo" title="indigo = #4b0082">indigo</td>
   1.210 +        </tr>
   1.211 +        <tr>
   1.212 +            <td style="border-color:lavender" title="lavender = #e6e6fa">lavender</td>
   1.213 +            <td style="border-color:pink" title="pink = #ffc0cb">pink</td>
   1.214 +            <td style="border-color:violet" title="violet = #ee82ee">violet</td>
   1.215 +            <td style="border-color:orchid" title="orchid = #da70d6">orchid</td>
   1.216 +            <td style="border-color:mediumorchid" title="mediumorchid = #ba55d3">mediumorchid</td>
   1.217 +            <td style="border-color:mediumvioletred" title="mediumvioletred = #c71585">mediumvioletred</td>
   1.218 +            <td style="border-color:purple" title="purple = #800080">purple</td>
   1.219 +        </tr>
   1.220 +        <tr>
   1.221 +            <td style="border-color:lavenderblush" title="lavenderblush = #fff0f5">lavenderblush</td>
   1.222 +            <td style="border-color:lightpink" title="lightpink = #ffb6c1">lightpink</td>
   1.223 +            <td style="border-color:hotpink" title="hotpink = #ff69b4">hotpink</td>
   1.224 +            <td style="border-color:palevioletred" title="palevioletred = #db7093">palevioletred</td>
   1.225 +            <td style="border-color:deeppink" title="deeppink = #ff1493">deeppink</td>
   1.226 +            <td style="border-color:crimson" title="crimson = #dc143c">crimson</td>
   1.227 +            <td style="border-color:darkmagenta" title="darkmagenta = #8b008b">darkmagenta</td>
   1.228 +        </tr>
   1.229 +    </table>
   1.230 +
   1.231 +    <script>
   1.232 +        borderStyle.addEventListener("change", () => {
   1.233 +            document.body.style.setProperty("--border-style", borderStyle.value);
   1.234 +        });
   1.235 +        document.body.style.setProperty("--border-style", borderStyle.value);
   1.236 +
   1.237 +    </script>
   1.238 +</body>
   1.239 \ No newline at end of file
Mercurial > drafts / changeset

changeset

[css-borders-4] Add color border test from Tim
