Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /conformance-checkers/tools/picture.py. -->
<meta charset=utf-8>
<title>valid picture</title>
<template><picture><img src=x alt></picture></template> <!-- parent-template-in-head -->
<body>
<img src=x alt> <!-- basic-img-src -->
<picture><img src=x alt></picture> <!-- basic-picture-img-src -->
<picture><source srcset=x><img src=x alt></picture> <!-- basic-picture-source -->
<picture><source srcset=x height=100><img src=x alt></picture> <!-- source-height -->
<picture><source srcset=x width=100><img src=x alt></picture> <!-- source-width -->
<picture> <!--x--> <source srcset=x> <!--x--> <img src=x alt> <!--x--> </picture> <!-- inter-element-whitespace -->
<p><picture><img src=x alt></picture></p> <!-- parent-p -->
<h1><picture><img src=x alt=x></picture></h1> <!-- parent-h1 -->
<noscript><picture><img src=x alt></picture></noscript> <!-- parent-noscript-in-body -->
<object data=x><picture><img src=x alt></picture></object> <!-- parent-object -->
<video src=x><picture><img src=x alt></picture></video> <!-- parent-video -->
<section><h2>x</h2><picture><img src=x alt></picture></section> <!-- parent-section -->
<main><picture><img src=x alt></picture></main> <!-- parent-main -->
<canvas><picture><img src=x alt></picture></canvas> <!-- parent-canvas -->
<template><picture><img src=x alt></picture></template> <!-- parent-template-in-body -->
<ruby><picture><img src=x alt></picture><rt>x</rt></ruby> <!-- parent-ruby -->
<ruby>x<rt><picture><img src=x alt></picture></rt></ruby> <!-- parent-rt -->
<a href=x><picture><img src=x alt></picture></a> <!-- parent-a -->
<button><picture><img src=x alt></picture></button> <!-- parent-button -->
<table><tr><td><picture><img src=x alt></picture></table> <!-- parent-td -->
<picture><script></script><source srcset=x><img src=x alt></picture> <!-- script-first -->
<picture><template></template><source srcset=x><img src=x alt></picture> <!-- template-first -->
<picture><source srcset=x><script></script><img src=x alt></picture> <!-- script-between -->
<picture><source srcset=x><img src=x alt><script></script></picture> <!-- script-after -->
<picture><script></script><source srcset=x><img src=x alt><script></script></picture> <!-- script-before-after -->
<picture><script></script><source srcset=x><script></script><img src=x alt><script></script></picture> <!-- script-before-between-after -->
<picture><template></template><source srcset=x><script></script><img src=x alt><template></template></picture> <!-- script-and-template -->
<picture><source srcset=x media=screen><img src=x srcset=x alt></picture> <!-- source-with-media-img-with-srcset -->
<picture><source srcset=x media=SCREEN><img src=x srcset=x alt></picture> <!-- source-with-media-uppercase-img-with-srcset -->
<picture><source srcset=x media='
screen
'><img src=x srcset=x alt></picture> <!-- source-with-media-spaces-img-with-srcset -->
<picture><source srcset=x media=screen><source srcset=x><img src=x alt></picture> <!-- source-with-media-source-with-srcset -->
<picture><source srcset=x type=image/gif><img src=x srcset=x alt></picture> <!-- source-with-type-img-with-srcset -->
<picture><source srcset=x type=image/gif><source srcset=x><img src=x alt></picture> <!-- source-with-type-source-with-srcset -->
<img srcset='x 100w, y 200w' sizes=50vw src=x alt> <!-- img-with-sizes -->
<picture><source srcset='x 100w, y 200w' sizes=50vw><img src=x alt></picture> <!-- source-with-sizes -->
<embed srcset> <!-- embed-srcset-empty -->
<embed srcset='foo bar'> <!-- embed-srcset-junk -->
<embed sizes> <!-- embed-sizes-empty -->
<embed sizes='foo bar'> <!-- embed-sizes-junk -->
<img src=x srcset='x 1x, y 2x' alt> <!-- img-src-also-in-srcset-1x -->
<img src=x srcset='y 1x, x 2x' alt> <!-- img-src-also-in-srcset-2x -->
<img src=x srcset='x 100w, y 200w' sizes=100vw alt> <!-- img-src-also-in-srcset-w -->
<img src=x srcset='y 1x, z 2x' alt> <!-- img-src-not-in-srcset-x -->
<img src=x srcset='y 100w, z 200w' sizes=100vw alt> <!-- img-src-not-in-srcset-w -->
<picture><source srcset=x type=image/gif><img src=x alt></picture> <!-- source-type -->
<picture><source srcset='x 1x, y 2x' type=image/gif><img src=x alt></picture> <!-- source-type-srcset-x -->
<picture><source srcset='x 100w, y 200w' type=image/gif sizes=50vw><img src=x alt></picture> <!-- source-type-srcset-w-sizes -->
<img sizes='(min-width:500px) 500px, 100vw' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-media-min-width -->
<img sizes='(min-width:1500px) 500px, (min-width:1000px) 33vw, (min-width:500px) 50vw, 100vw' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-multiple-source-sizes -->
<img sizes='(min-width:500px) 500px' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-no-default -->
<img sizes='(not (width:500px)) and (width:500px) 500px' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-media-not-and -->
<img sizes='500px' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-only-default -->
<img sizes='calc(500px)' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-calc-in-default -->
<img sizes='(min-width:500px) calc(500px)' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-calc-in-source-size-value -->
<img sizes='(min-width:calc(500px)) 500px' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-calc-in-media -->
<img sizes='0' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-zero -->
<img sizes='-0' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-minus-zero -->
<img sizes='1em' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-em-in-source-size-value -->
<img sizes='1ex' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-ex-in-source-size-value -->
<img sizes='1ch' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-ch-in-source-size-value -->
<img sizes='1rem' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-rem-in-source-size-value -->
<img sizes='1vw' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-vw-in-source-size-value -->
<img sizes='1vh' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-vh-in-source-size-value -->
<img sizes='1vmin' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-vmin-in-source-size-value -->
<img sizes='1vmax' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-vmax-in-source-size-value -->
<img sizes='1cm' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-cm-in-source-size-value -->
<img sizes='1mm' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-mm-in-source-size-value -->
<img sizes='1q' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-q-in-source-size-value -->
<img sizes='1in' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-in-in-source-size-value -->
<img sizes='1pc' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-pc-in-source-size-value -->
<img sizes='1pt' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-pt-in-source-size-value -->
<img sizes='1px' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-px-in-source-size-value -->
<img sizes='0.2px' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-non-integer-px-in-source-size-value -->
<img sizes='/**/50vw' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-leading-css-comment -->
<img sizes='50vw/**/' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-trailing-css-comment -->
<img sizes='+50vw' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-plus -->
<img sizes='.2px' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-non-integer-omitted-zero -->
<img sizes='-0e-0px' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-scientifi-notation-0 -->
<img sizes='+11.11e+11px' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-scientifi-notation-1 -->
<img sizes='2.2e2px' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-scientifi-notation-2 -->
<img sizes='33E33px' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-scientifi-notation-3 -->
<img sizes='.4E4px' srcset='x 100w, y 200w' src=x alt> <!-- sizes-microsyntax-scientifi-notation-4 -->
<img srcset='x,x' src=x alt> <!-- srcset-microsyntax-comma-in-url -->
<img srcset='%2Cx' src=x alt> <!-- srcset-microsyntax-percent-escaped-leading-comma-in-url -->
<img srcset='x%2C' src=x alt> <!-- srcset-microsyntax-percent-escaped-trailing-comma-in-url -->
<img srcset='%20' src=x alt> <!-- srcset-microsyntax-percent-escaped-space-in-url -->
<img srcset='x 1w' sizes=100vw src=x alt> <!-- srcset-microsyntax-w -->
<img srcset='x 1x' src=x alt> <!-- srcset-microsyntax-x -->
<img srcset='x .5x' src=x alt> <!-- srcset-microsyntax-leading-dot-x -->
<img srcset='x 1.5x' src=x alt> <!-- srcset-microsyntax-non-integer-x -->
<img srcset='x 1e0x' src=x alt> <!-- srcset-microsyntax-scientific-notation-x -->
<img srcset='x 1.5e0x' src=x alt> <!-- srcset-microsyntax-scientific-notation-decimals-x -->
<img srcset='x 1e+0x' src=x alt> <!-- srcset-microsyntax-scientific-notation-e-plus-x -->
<img srcset='x 1e-0x' src=x alt> <!-- srcset-microsyntax-scientific-notation-e-minus-x -->
<img srcset='x 1E0x' src=x alt> <!-- srcset-microsyntax-scientific-notation-e-uppercase-x -->
<img srcset='x 1x,y 2x' src=x alt> <!-- srcset-microsyntax-no-space-between-candidates -->
<picture><img crossorigin src=x alt></picture> <!-- img-crossorigin-with-picture -->
<picture><img usemap=#x src=x alt></picture><map name=x></map> <!-- img-usemap-with-picture -->
<a href=x><picture><img ismap src=x alt></picture></a> <!-- img-ismap-with-picture -->
<picture><img src=x alt width=1 height=1></picture> <!-- img-width-height-with-picture -->
<picture><img src=x alt width=0 height=0></picture> <!-- img-width-height-zero-with-picture -->
<picture title=x class=x dir=ltr hidden id=asdf tabindex=0><img src=x alt></picture> <!-- picture-global-attributes -->