ampproject / ampproject/amphtml
amp-img does not apply class on load when [class] amp binding is defined under mustache template
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
## What's the issue?
`amp-img` does not apply `class` on load when `[class]` amp binding is defined under `mustache` template
Briefly describe the bug/feature request.
When `class` is defined for the `amp-img` and `[class]` binding is defined, only the `[class]` binding takes effect but not the `class` values on the page load. Also observed if no `[class]` binding is defined the `class` values take effect. In the attached example (given instructions on how to run on mac local using python 3), the class values defined in the `amp-img` ie: `mtop10` and `mtop10 none` do not take effect. However when the buttons are clicked the bound values of `[class]` work as desired.
## How do we reproduce the issue?
```
> download attached zip file on mac - amp-gbug.zip. # attached in the bug (pls. search)
> unzip amp-gbug.zip
> # Follow README.md
```
Also added here for reference
Reproducing steps for bug
### Setup
```
> virtualenv -p python3 amp_env
> source amp_env/bin/activate
> pip3 install -U flask-cors requests
```
### Run
```
> export FLASK_APP=bug.app
> export FLASK_ENV=development
> flask run
```
### Test
Using Browser go to http://127.0.0.1:5000/static/html/bug.html
### Bug Description
You will see following UI on page load (2 images) should be just first image ONLY (as the `class` values have not taken effect).
#### Page Load

Once you click the buttons the code works as expected
#### Click First Button

#### Click Second Button

[](url)
### Tips on Rendering Bugs
Refer attached ZIP file and instructions
## What browsers are affected?
All browsers
Mac
My Chrome Version - Version 89.0.4389.90 (Official Build) (x86_64)
My Safari Version - Version 14.0.3 (15610.4.3.1.7, 15610)
## Which AMP version is affected?
Not sure if it was always broken for mustache
AMP version
```
```
Attached ZIP file:
[amp-gbug.zip](https://github.com/ampproject/amphtml/files/6174996/amp-gbug.zip)
Contributor guide
Research direction
Start with the attached ZIP's README and static/html/bug.html, then reproduce the initial page-load behavior using the listed AMP scripts and local Flask setup. Trace how amp-img combines its static class with the [class] binding inside the mustache template. Done means the initial static classes apply on load while subsequent bound class changes still work.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100