Glassware用の実験のアレ

glassware-html-example

            # うまくいった
            <article>
                <figure>
                    <img src="https://si0.twimg.com/profile_images/53494994/btf_logo.jpg" alt="example1 image">
                </figure>
                <section>
                    <h1>Example1. Hello</h1>
                    <p class="text-x-small">
                        <img src="https://mirror-api-playground.appspot.com/links/rated_r.png" alt="">
                        x-small text
                    </p>
                    <hr>
                    <p class="text-x-normal">
                        こんにちは<br>
                        Do you know japanese?
                    </p>
                </section>
            </article>

            #style属性が消えた
            <div style="-webkit-animation-duration: 3s;-webkit-animation-name: slidein;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;-moz-animation-duration: 3s;-moz-animation-name: slidein;-moz-animation-iteration--moz-animation-direction: alternate;animation-duration: 3s;animation-name: slidein;animation-iteration-count: infinite;animation-direction: alternate;@-webkit-keyframes slidein { from {margin-left:100%;width:300%} 75% {font-size:300%;margin-left:25%;width:15width:100%;} }; @-moz-keyframes slidein { from {margin-left:100%;width:300%} 75% {font-size:300%;margin-left:25%;width:15width:100%;} }; @keyframes slidein { from {margin-left:100%;width:300%} 75% {font-size:300%;margin-left:25%;width:15width:100%;} }">
                example4
            </div>

            # text-alignだけ生き残ったけど文字が非表示になった
            <p class="example2" style="-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);text-align: center;">
                example2
            </p>

            # Animated Gifは表示しなかった。ただ、画像だということを示すアイコンは左上にでた。
            <img src="http://userdisk.webry.biglobe.ne.jp/012/650/11/N000/000/000/123078823148816213927_gif_vol.2.gif" alt="">