Начало Каталог Помощ
Вход
LinusTuring
/
tailwindcss
огледало от https://github.com/tailwindlabs/tailwindcss.git
Наблюдаван 1
Харесван 0
Разклонения 0
Файлове Задачи 0 Уики
Клон: feature/parcel-css
Клонове Маркери
tailwindcss
/
tests
/
arbitrary-values.test.html

arbitrary-values.test.html 15 KB
Постоянна връзка История Директен файл

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <link rel="icon" href="/favicon.ico" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>Title</title>
    8. 

  8.     <link rel="stylesheet" href="./tailwind.css" />
    9. 

  9.   </head>
    10. 

  10.   <body>
    11. 

  11.     <div class="inset-[11px]"></div>
    12. 

  12.     <div class="inset-[var(--value)]"></div>
    13. 

  13.     <div class="inset-x-[11px]"></div>
    14. 

  14.     <div class="inset-x-[var(--value)]"></div>
    15. 

  15.     <div class="inset-y-[11px]"></div>
    16. 

  16.     <div class="inset-y-[var(--value)]"></div>
    17. 

  17.     <div class="top-[11px]"></div>
    18. 

  18.     <div class="top-[var(--value)]"></div>
    19. 

  19.     <div class="right-[11px]"></div>
    20. 

  20.     <div class="right-[var(--value)]"></div>
    21. 

  21.     <div class="bottom-[11px]"></div>
    22. 

  22.     <div class="bottom-[var(--value)]"></div>
    23. 

  23.     <div class="left-[11px]"></div>
    24. 

  24.     <div class="left-[var(--value)]"></div>
    25. 

  25. 

  26.     <div class="z-[123]"></div>
    27. 

  27.     <div class="z-[var(--value)]"></div>
    28. 

  28. 

  29.     <div class="order-[4]"></div>
    30. 

  30.     <div class="order-[var(--value)]"></div>
    31. 

  31. 

  32.     <div class="col-[7]"></div>
    33. 

  33.     <div class="col-end-[7]"></div>
    34. 

  34.     <div class="col-start-[7]"></div>
    35. 

  35. 

  36.     <div class="row-[7]"></div>
    37. 

  37.     <div class="row-end-[7]"></div>
    38. 

  38.     <div class="row-start-[7]"></div>
    39. 

  39. 

  40.     <div class="m-[7px]"></div>
    41. 

  41.     <div class="mx-[7px]"></div>
    42. 

  42.     <div class="my-[7px]"></div>
    43. 

  43.     <div class="mt-[7px]"></div>
    44. 

  44.     <div class="mr-[7px]"></div>
    45. 

  45.     <div class="mb-[7px]"></div>
    46. 

  46.     <div class="ml-[7px]"></div>
    47. 

  47.     <div class="mt-[clamp(30px,100px)]"></div>
    48. 

  48. 

  49.     <div class="aspect-[16/9] aspect-[var(--aspect)]"></div>
    50. 

  50. 

  51.     <div class="h-[3.23rem]"></div>
    52. 

  52.     <div class="h-[calc(100%+1rem)]"></div>
    53. 

  53.     <div class="h-[var(--height)]"></div>
    54. 

  54. 

  55.     <div class="max-h-[3.23rem]"></div>
    56. 

  56.     <div class="max-h-[calc(100%+1rem)]"></div>
    57. 

  57.     <div class="max-h-[var(--height)]"></div>
    58. 

  58. 

  59.     <div class="min-h-[3.23rem]"></div>
    60. 

  60.     <div class="min-h-[calc(100%+1rem)]"></div>
    61. 

  61.     <div class="min-h-[var(--height)]"></div>
    62. 

  62. 

  63.     <div class="w-[0]"></div>
    64. 

  64.     <div class="w-[3.23rem]"></div>
    65. 

  65.     <div class="w-[calc(100%+1rem)]"></div>
    66. 

  66.     <div class="w-[calc(var(--10-10px,calc(-20px-(-30px--40px)))-50px)]"></div>
    67. 

  67.     <div class="w-[var(--width)]"></div>
    68. 

  68.     <div class="w-[var(--width,calc(100%+1rem))]"></div>
    69. 

  69.     <div class="w-[calc(100%/3-1rem*2)]"></div>
    70. 

  70. 

  71.     <div class="min-w-[3.23rem]"></div>
    72. 

  72.     <div class="min-w-[calc(100%+1rem)]"></div>
    73. 

  73.     <div class="min-w-[var(--width)]"></div>
    74. 

  74. 

  75.     <div class="max-w-[3.23rem]"></div>
    76. 

  76.     <div class="max-w-[calc(100%+1rem)]"></div>
    77. 

  77.     <div class="max-w-[var(--width)]"></div>
    78. 

  78. 

  79.     <div class="flex-[var(--flex)]"></div>
    80. 

  80.     <div class="flex-shrink-[var(--shrink)]"></div>
    81. 

  81.     <div class="shrink-[var(--shrink)]"></div>
    82. 

  82.     <div class="flex-grow-[var(--grow)]"></div>
    83. 

  83.     <div class="grow-[var(--grow)]"></div>
    84. 

  84.     <div class="basis-[var(--basis)]"></div>
    85. 

  85. 

  86.     <div class="origin-[50px_50px]"></div>
    87. 

  87. 

  88.     <div class="translate-x-[12%]"></div>
    89. 

  89.     <div class="translate-x-[var(--value)]"></div>
    90. 

  90.     <div class="translate-y-[12%]"></div>
    91. 

  91.     <div class="translate-y-[var(--value)]"></div>
    92. 

  92. 

  93.     <div class="rotate-[23deg] rotate-[2.3rad] rotate-[401grad] rotate-[1.5turn]"></div>
    94. 

  94. 

  95.     <div class="skew-x-[3px]"></div>
    96. 

  96.     <div class="skew-x-[var(--value)]"></div>
    97. 

  97.     <div class="skew-y-[3px]"></div>
    98. 

  98.     <div class="skew-y-[var(--value)]"></div>
    99. 

  99. 

  100.     <div class="scale-[0.7]"></div>
    101. 

  101.     <div class="scale-[var(--value)]"></div>
    102. 

  102.     <div class="scale-x-[0.7]"></div>
    103. 

  103.     <div class="scale-x-[var(--value)]"></div>
    104. 

  104.     <div class="scale-y-[0.7]"></div>
    105. 

  105.     <div class="scale-y-[var(--value)]"></div>
    106. 

  106. 

  107.     <div class="animate-[pong_1s_cubic-bezier(0,0,0.2,1)_infinite]"></div>
    108. 

  108.     <div class="animate-[var(--value)]"></div>
    109. 

  109. 

  110.     <div class="scroll-m-[7px]"></div>
    111. 

  111.     <div class="scroll-mx-[7px]"></div>
    112. 

  112.     <div class="scroll-my-[7px]"></div>
    113. 

  113.     <div class="scroll-mt-[7px]"></div>
    114. 

  114.     <div class="scroll-mr-[7px]"></div>
    115. 

  115.     <div class="scroll-mb-[7px]"></div>
    116. 

  116.     <div class="scroll-ml-[7px]"></div>
    117. 

  117.     <div class="scroll-mt-[var(--scroll-margin)]"></div>
    118. 

  118. 

  119.     <div class="scroll-p-[7px]"></div>
    120. 

  120.     <div class="scroll-px-[7px]"></div>
    121. 

  121.     <div class="scroll-py-[7px]"></div>
    122. 

  122.     <div class="scroll-pt-[7px]"></div>
    123. 

  123.     <div class="scroll-pr-[7px]"></div>
    124. 

  124.     <div class="scroll-pb-[7px]"></div>
    125. 

  125.     <div class="scroll-pl-[7px]"></div>
    126. 

  126.     <div class="scroll-pt-[var(--scroll-padding)]"></div>
    127. 

  127. 

  128.     <div class="cursor-[pointer]"></div>
    129. 

  129.     <div class="cursor-[url(hand.cur)_2_2,pointer]"></div>
    130. 

  130.     <div class="cursor-[url('./path_to_hand.cur')_2_2,pointer]"></div>
    131. 

  131.     <div class="cursor-[var(--value)]"></div>
    132. 

  132. 

  133.     <div class="list-['\1F44D']"></div>
    134. 

  134.     <div class="list-[var(--value)]"></div>
    135. 

  135. 

  136.     <div class="columns-[20] columns-[var(--columns)]"></div>
    137. 

  137. 

  138.     <div class="auto-cols-[minmax(10px,auto)]"></div>
    139. 

  139. 

  140.     <div class="auto-rows-[minmax(10px,auto)]"></div>
    141. 

  141. 

  142.     <div class="grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
    143. 

  143.     <div class="lg:grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
    144. 

  144. 

  145.     <div class="grid-rows-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
    146. 

  146. 

  147.     <div class="gap-[20px]"></div>
    148. 

  148.     <div class="gap-[var(--value)]"></div>
    149. 

  149.     <div class="gap-x-[20px]"></div>
    150. 

  150.     <div class="gap-x-[var(--value)]"></div>
    151. 

  151.     <div class="gap-y-[20px]"></div>
    152. 

  152.     <div class="gap-y-[var(--value)]"></div>
    153. 

  153. 

  154.     <div class="space-x-[20cm]"></div>
    155. 

  155.     <div class="space-x-[calc(20%-1cm)]"></div>
    156. 

  156.     <div class="space-y-[20cm]"></div>
    157. 

  157.     <div class="space-y-[calc(20%-1cm)]"></div>
    158. 

  158. 

  159.     <div class="divide-x-[20cm]"></div>
    160. 

  160.     <div class="divide-x-[calc(20%-1cm)]"></div>
    161. 

  161.     <div class="divide-y-[20cm]"></div>
    162. 

  162.     <div class="divide-y-[calc(20%-1cm)]"></div>
    163. 

  163. 

  164.     <div class="divide-[black]"></div>
    165. 

  165.     <div class="divide-[var(--value)]"></div>
    166. 

  166. 

  167.     <div class="divide-opacity-[0.8]"></div>
    168. 

  168.     <div class="divide-opacity-[var(--value)]"></div>
    169. 

  169. 

  170.     <div class="rounded-[11px]"></div>
    171. 

  171.     <div
    172. 

  172.       class="
    173. 

  173.         rounded-t-[var(--radius)]
    174. 

  174.         rounded-r-[var(--radius)]
    175. 

  175.         rounded-b-[var(--radius)]
    176. 

  176.         rounded-l-[var(--radius)]
    177. 

  177.       "
    178. 

  178.     ></div>
    179. 

  179.     <div
    180. 

  180.       class="
    181. 

  181.         rounded-tr-[var(--radius)]
    182. 

  182.         rounded-br-[var(--radius)]
    183. 

  183.         rounded-bl-[var(--radius)]
    184. 

  184.         rounded-tl-[var(--radius)]
    185. 

  185.       "
    186. 

  186.     ></div>
    187. 

  187. 

  188.     <div class="border-[#f00]"></div>
    189. 

  189.     <div class="border-[red_black]"></div>
    190. 

  190.     <div class="border-[2.5px]"></div>
    191. 

  191.     <div class="border-[color:var(--value)]"></div>
    192. 

  192.     <div class="border-[length:var(--value)]"></div>
    193. 

  193. 

  194.     <div class="border-t-[#f00]"></div>
    195. 

  195.     <div class="border-t-[2.5px]"></div>
    196. 

  196.     <div class="border-t-[color:var(--value)]"></div>
    197. 

  197.     <div class="border-t-[length:var(--value)]"></div>
    198. 

  198.     <div class="border-r-[#f00]"></div>
    199. 

  199.     <div class="border-r-[2.5px]"></div>
    200. 

  200.     <div class="border-r-[color:var(--value)]"></div>
    201. 

  201.     <div class="border-r-[length:var(--value)]"></div>
    202. 

  202.     <div class="border-b-[#f00]"></div>
    203. 

  203.     <div class="border-b-[2.5px]"></div>
    204. 

  204.     <div class="border-b-[color:var(--value)]"></div>
    205. 

  205.     <div class="border-b-[length:var(--value)]"></div>
    206. 

  206.     <div class="border-l-[#f00]"></div>
    207. 

  207.     <div class="border-l-[2.5px]"></div>
    208. 

  208.     <div class="border-l-[color:var(--value)]"></div>
    209. 

  209.     <div class="border-l-[length:var(--value)]"></div>
    210. 

  210. 

  211.     <div class="border-opacity-[0.8]"></div>
    212. 

  212.     <div class="border-opacity-[var(--value)]"></div>
    213. 

  213. 

  214.     <div class="bg-[#0f0] bg-[#ff0000] bg-[#0000ffcc]"></div>
    215. 

  215.     <div class="bg-[rgb(123,123,123)] bg-[rgba(123,123,123,0.5)]"></div>
    216. 

  216.     <div class="bg-[rgb(123,_456,_123)_black]"></div>
    217. 

  217.     <div class="bg-[rgb(123_456_789)]"></div>
    218. 

  218.     <div class="bg-[hsl(0,100%,50%)] bg-[hsla(0,100%,50%,0.3)]"></div>
    219. 

  219.     <div class="bg-[hsl(0rad,100%,50%)] bg-[hsla(0turn,100%,50%,0.3)]"></div>
    220. 

  220.     <div class="bg-[#0f0_var(--value)]"></div>
    221. 

  221.     <div class="bg-[var(--value1)_var(--value2)]"></div>
    222. 

  222.     <div class="bg-[color:var(--value1)_var(--value2)]"></div>
    223. 

  223. 

  224.     <div class="bg-[url('/path-to-image.png')] bg-[url:var(--url)]"></div>
    225. 

  225.     <div class="bg-[linear-gradient(#eee,#fff)]"></div>
    226. 

  226.     <div class="bg-[linear-gradient(#eee,#fff),conic-gradient(red,orange,yellow,green,blue)]"></div>
    227. 

  227.     <div class="bg-[image(),var(--value)]"></div>
    228. 

  228.     <div class="bg-[var(--value),var(--value)]"></div>
    229. 

  229.     <div class="bg-[image:var(--value),var(--value)]"></div>
    230. 

  230. 

  231.     <div class="bg-opacity-[0.11]"></div>
    232. 

  232.     <div class="bg-opacity-[var(--value)]"></div>
    233. 

  233. 

  234.     <div class="from-[#da5b66] via-[#da5b66] to-[#da5b66]"></div>
    235. 

  235.     <div class="from-[var(--color)] via-[var(--color)] to-[var(--color)]"></div>
    236. 

  236. 

  237.     <div class="bg-[length:200px_100px]"></div>
    238. 

  238.     <div class="bg-[length:var(--value)]"></div>
    239. 

  239. 

  240.     <div class="bg-[center_top_1rem]"></div>
    241. 

  241.     <div class="bg-[position:200px_100px]"></div>
    242. 

  242.     <div class="bg-[position:var(--value)]"></div>
    243. 

  243. 

  244.     <div class="fill-[#da5b66]"></div>
    245. 

  245.     <div class="fill-[var(--value)]"></div>
    246. 

  246.     <div class="fill-[url(#icon-gradient)]"></div>
    247. 

  247. 

  248.     <div class="stroke-[#da5b66]"></div>
    249. 

  249.     <div class="stroke-[color:var(--value)]"></div>
    250. 

  250.     <div class="stroke-[url(#icon-gradient)]"></div>
    251. 

  251. 

  252.     <div class="stroke-[20px]"></div>
    253. 

  253.     <div class="stroke-[length:var(--value)]"></div>
    254. 

  254. 

  255.     <div class="object-[50%,50%]"></div>
    256. 

  256.     <div class="object-[top,right]"></div>
    257. 

  257.     <div class="object-[var(--position)]"></div>
    258. 

  258. 

  259.     <div class="p-[7px]"></div>
    260. 

  260.     <div class="px-[7px]"></div>
    261. 

  261.     <div class="py-[7px]"></div>
    262. 

  262.     <div class="pt-[7px]"></div>
    263. 

  263.     <div class="pr-[7px]"></div>
    264. 

  264.     <div class="pb-[7px]"></div>
    265. 

  265.     <div class="pl-[7px]"></div>
    266. 

  266.     <div class="pt-[clamp(30px,100px)]"></div>
    267. 

  267. 

  268.     <div class="indent-[50%] indent-[var(--indent)]"></div>
    269. 

  269. 

  270.     <div class="align-[10em]"></div>
    271. 

  271. 

  272.     <div class="font-[Georgia,serif]"></div>
    273. 

  273.     <div class="font-['Gill_Sans']"></div>
    274. 

  274.     <div class="font-[sans-serif,serif]"></div>
    275. 

  275.     <div class="font-[family-name:var(--value)]"></div>
    276. 

  276.     <div class="font-[serif,var(--value)]"></div>
    277. 

  277.     <div class="font-['Some_Font',sans-serif]"></div>
    278. 

  278.     <div class="font-['Some_Font','Some_Other_Font']"></div>
    279. 

  279.     <div class="font-['Some_Font',var(--other-font)]"></div>
    280. 

  280.     <div class="font-[var(--font1),var(--font2)]"></div>
    281. 

  281.     <div class="font-[invalid_font_because_spaces]"></div>
    282. 

  282. 

  283.     <div class="text-[0]"></div>
    284. 

  284.     <div class="text-[2.23rem]"></div>
    285. 

  285.     <div class="text-[length:var(--font-size)]"></div>
    286. 

  286.     <div class="text-[angle:var(--angle)]"></div>
    287. 

  287.     <div class="text-[min(10vh,100px)]"></div>
    288. 

  288. 

  289.     <div class="font-[300]"></div>
    290. 

  290.     <div class="font-[number:lighter]"></div>
    291. 

  291.     <div class="font-[number:var(--value)]"></div>
    292. 

  292. 

  293.     <div class="leading-[var(--leading)]"></div>
    294. 

  294. 

  295.     <div class="tracking-[var(--tracking)]"></div>
    296. 

  296. 

  297.     <div class="text-[black]"></div>
    298. 

  298.     <div class="text-[rgb(123,123,123)]"></div>
    299. 

  299.     <div class="text-[rgb(123,_123,_123)]"></div>
    300. 

  300.     <div class="text-[rgb(123_123_123)]"></div>
    301. 

  301.     <div class="text-[color:var(--color)]"></div>
    302. 

  302. 

  303.     <div class="text-opacity-[0.8]"></div>
    304. 

  304.     <div class="text-opacity-[var(--value)]"></div>
    305. 

  305. 

  306.     <div class="decoration-[black]"></div>
    307. 

  307.     <div class="decoration-[rgb(123,123,123)]"></div>
    308. 

  308.     <div class="decoration-[rgb(123,_123,_123)]"></div>
    309. 

  309.     <div class="decoration-[rgb(123_123_123)]"></div>
    310. 

  310.     <div class="decoration-[color:var(--color)]"></div>
    311. 

  311. 

  312.     <div class="decoration-[length:10px]"></div>
    313. 

  313. 

  314.     <div class="underline-offset-[10px]"></div>
    315. 

  315. 

  316.     <div class="placeholder-[var(--placeholder)]"></div>
    317. 

  317. 

  318.     <div class="placeholder-opacity-[var(--placeholder-opacity)]"></div>
    319. 

  319. 

  320.     <div class="caret-[black]"></div>
    321. 

  321.     <div class="caret-[var(--value)]"></div>
    322. 

  322. 

  323.     <div class="accent-[#bada55]"></div>
    324. 

  324.     <div class="accent-[var(--accent-color)]"></div>
    325. 

  325. 

  326.     <div class="opacity-[0.8]"></div>
    327. 

  327.     <div class="opacity-[var(--opacity)]"></div>
    328. 

  328. 

  329.     <div class="shadow-[0px_1px_2px_black]"></div>
    330. 

  330.     <div class="shadow-[shadow:var(--value)]"></div>
    331. 

  331. 

  332.     <div class="outline-[black]"></div>
    333. 

  333.     <div class="outline-[10px]"></div>
    334. 

  334.     <div class="outline-[color:var(--outline)]"></div>
    335. 

  335.     <div class="outline-[length:var(--outline)]"></div>
    336. 

  336.     <div class="outline-offset-[10px]"></div>
    337. 

  337. 

  338.     <div class="ring-[#76ad65]"></div>
    339. 

  339.     <div class="ring-[color:var(--value)]"></div>
    340. 

  340.     <div class="ring-offset-[#76ad65]"></div>
    341. 

  341.     <div class="ring-[10px]"></div>
    342. 

  342.     <div class="ring-[length:(var(--value))]"></div>
    343. 

  343.     <div class="ring-offset-[#ad672f]"></div>
    344. 

  344.     <div class="ring-offset-[color:var(--value)]"></div>
    345. 

  345.     <div class="ring-offset-[19rem]"></div>
    346. 

  346.     <div class="ring-offset-[length:var(--value)]"></div>
    347. 

  347.     <div class="ring-opacity-[var(--ring-opacity)]"></div>
    348. 

  348. 

  349.     <div class="blur-[15px]"></div>
    350. 

  350.     <div class="brightness-[300%]"></div>
    351. 

  351.     <div class="contrast-[2.4]"></div>
    352. 

  352.     <div class="drop-shadow-[0px_1px_2px_black]"></div>
    353. 

  353.     <div class="grayscale-[0.55]"></div>
    354. 

  354.     <div class="hue-rotate-[0.8turn]"></div>
    355. 

  355.     <div class="invert-[0.75]"></div>
    356. 

  356.     <div class="saturate-[180%]"></div>
    357. 

  357.     <div class="sepia-[0.2]"></div>
    358. 

  358.     <div class="backdrop-blur-[11px]"></div>
    359. 

  359.     <div class="backdrop-brightness-[1.23]"></div>
    360. 

  360.     <div class="backdrop-contrast-[0.87]"></div>
    361. 

  361.     <div class="backdrop-grayscale-[0.42]"></div>
    362. 

  362.     <div class="backdrop-hue-rotate-[1.57rad]"></div>
    363. 

  363.     <div class="backdrop-invert-[0.66]"></div>
    364. 

  364.     <div class="backdrop-opacity-[22%]"></div>
    365. 

  365.     <div class="backdrop-saturate-[144%]"></div>
    366. 

  366.     <div class="backdrop-sepia-[0.38]"></div>
    367. 

  367. 

  368.     <div class="transition-[opacity,width]"></div>
    369. 

  369. 

  370.     <div class="delay-[var(--delay)]"></div>
    371. 

  371. 

  372.     <div class="duration-[2s]"></div>
    373. 

  373.     <div class="duration-[var(--app-duration)]"></div>
    374. 

  374. 

  375.     <div class="will-change-[top,left] will-change-[var(--will-change)]"></div>
    376. 

  376. 

  377.     <div class="content-['hello']"></div>
    378. 

  378.     <div class="content-[attr(content-before)]"></div>
    379. 

  379.     <div class="content-['>']"></div>
    380. 

  380. 

  381.     <!-- Balancing issues, this is not checking the validity of the actual value, but purely syntax-wise -->
    382. 

  382.     <div class="w-[do-not-generate-this]w-[it-is-invalid-syntax]"></div>
    383. 

  383.     <!-- INVALID -->
    384. 

  384.     <div class="grid-cols-[[linename],1fr,auto]"></div>
    385. 

  385.     <!-- VALID -->
    386. 

  386.     <div class="w-[{}]"></div>
    387. 

  387.     <!-- VALID -->
    388. 

  388.     <div class="w-[{{}}]"></div>
    389. 

  389.     <!-- VALID -->
    390. 

  390.     <div class="w-[[]]"></div>
    391. 

  391.     <!-- VALID -->
    392. 

  392.     <div class="w-[[[]]]"></div>
    393. 

  393.     <!-- VALID -->
    394. 

  394.     <div class="w-[()]"></div>
    395. 

  395.     <!-- VALID -->
    396. 

  396.     <div class="w-[(())]"></div>
    397. 

  397.     <!-- VALID -->
    398. 

  398.     <div class="w-[][]"></div>
    399. 

  399.     <!-- INVALID -->
    400. 

  400.     <div class="w-[)(]"></div>
    401. 

  401.     <!-- INVALID -->
    402. 

  402.     <div class="w-[}{]"></div>
    403. 

  403.     <!-- INVALID -->
    404. 

  404.     <div class="w-[][]]"></div>
    405. 

  405.     <!-- INVALID -->
    406. 

  406.     <div class="w-[)()]"></div>
    407. 

  407.     <!-- INVALID -->
    408. 

  408.     <div class="w-[}{}]"></div>
    409. 

  409.     <!-- INVALID -->
    410. 

  410.     <div class="w-['][]']"></div>
    411. 

  411.     <!-- VALID -->
    412. 

  412.     <div class="w-[')()']"></div>
    413. 

  413.     <!-- VALID -->
    414. 

  414.     <div class="w-['}{}']"></div>
    415. 

  415.     <!-- VALID -->
    416. 

  416.     <div class="w-[{[}]]"></div>
    417. 

  417.     <!-- INVALID -->
    418. 

  418.     <div class="w-[[{]}]"></div>
    419. 

  419.     <!-- INVALID -->
    420. 

  420.     <div class="w-[{(})]"></div>
    421. 

  421.     <!-- INVALID -->
    422. 

  422.     <div class="w-[({)}]"></div>
    423. 

  423.     <!-- INVALID -->
    424. 

  424.     <div class="w-[([)]]"></div>
    425. 

  425.     <!-- INVALID -->
    426. 

  426.     <div class="w-[[(])]"></div>
    427. 

  427.     <!-- INVALID -->
    428. 

  428.   </body>
    429. 

  429. </html>
    430. 

  430.